WordPress sidebar widgets are areas in the sidebar where you can put search tab, sidebar menu, pictures, banners, etc. Here I described how to do this.
You will not need any plugin to do this. Some of these items you can see in the sidebar of the post which you are reading right now.
[Recuerdos de la Alhambra By Francisco Tarrega]
WordPress widgets can be designed and set in a specific order. To design your sidebar, when you are in the dashboard, you should go to Appearance and then Widgets, and this will lead you to what you see on the picture below:
On the right side of the picture you see several Text tabs in the Main Sidebar. These may contain various things. You add them from the “Available Widgets” area on the left simply by dragging and dropping. The same is for any other type of widgets you see there on the left.
Below, I am going to show through some examples what exactly (and how) you can put in these Text widgets. In particular, I shall explain how to add pictures and banners in the sidebar widget. Regarding the ‘sidebar menu’, this I have explained elsewhere within this site.
Add image in WordPress Sidebar Widgets
I shall describe the procedure I used to add a picture similar to the one you see in the sidebar of this post. The steps are as follows:
1. I add a new Text widget into Sidebar menu. For the time being it is empty.
2. In my dashboard, I go to Pages, and Add new.
3. Without doing anything with the title, I go directly to the Edit area (usually I do this in Visual mode) and click onto Add Media, and choose the picture I want to add. I assume you are familiar with the procedure of adding pictures. If not, this is described in my another post.
4. Next, I click onto Text mode in order to grab the code of the picture, which looks like this:
You will notice that this is a big picture, far exceeding the usual width of a sidebar. I am doing this on purpose to show that it will be reduced automatically to fit. But you might like to reduce it considerably because indeed you do not need a picture of this size.
After copying the code I can simply close the page without saving anything, its purpose was only to create a code presented above.
5. Now I copy the code, and go to Appearance, Widgets, and click on the Text widget which I prepared in the step 1, and just paste the code there. You can see it below on the left, together with one sentence I added below the code. I can also add a title, can center it as described below in the text. But for now, I just save it as it is, and the result is shown on the picture below-right:
Center an image in sidebar
Sometimes, when you put an object into the widget, it is not centered. To correct this, all you have to do is to add two small commands in the already existing code: <center> and </center>, one in front of the code and the other at the end. This is demonstrated below by using the example of my “print-pdf” tab, which you may see in my sidebar:
The added commands are in red only to make them more visible for you. Obviously, this will work the same way for any other object, like an image or a banner.
Adding a link to sidebar image
An image added to sidebar you may make clickable, to lead visitors to certain external site or to a separate page/post within your site. The procedure is the same as with any images, as described in my another post within this site.
a) So here is what you have to do. When you have added an image as described in step 3 above, it will appear in Visual mode, and when you click on it you will see the picture like the one here on the right.
b) Notice the ‘pencil’ tab here. Click on it and it will open a menu where you can do some changes relevant for the picture as shown below:
c) In the tab ‘Link To’ you will have several options. For the present purpose you choose ‘Custom URL’ option, as you can see above. This opens a tab where you can put your desired link. In my case I choose the URL of my another site about mountains.
d) Now just save and save the post, refresh the page and you will have the clickable picture in the sidebar.
Note that the procedure of adding such a link is the same if you have a picture in the text of your post.
Adding a banner to WordPress Sidebar Widgets
Banners are typically your affiliate links. But the procedure is the same regardless of what they may represent.
Adding a banner is very similar to what you have seen about adding images. A banner is simply a peace of code, just like the one you see in the images above. So copy and paste it to the Text widget as explained in the previous steps, and save. You may add ‘center’ command in addition and this will be job done.
So dealing with WordPress sidebar widgets is not complicated. I hope you find this text useful. If this is so and if you have any question on these issues, please do not hesitate to contact me or to leave a comment below. I wish to stress that all I know about the online business and building a site I have learned at Wealthy Affiliate. Have a look into this post, it may change your life.