WordPress Sidebar Widgets – Learn How To Use Them

Share

wordpress sidebar widgets -wp pictureWordPress 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:

wordpress sidebar widgets -menu structureOn 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:

Wordpress Sidebar Widgets - adding picture
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:

Wordpress Sidebar Widgets -example of code with pictureWordpress Sidebar Widgets - finished example

 

 

 

 

 

 

 

 


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:

<center><script type=”text/javascript” src=”https://100widgets.com/js_data.php?id=165″></script></center>

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

Wordpress Sidebar Widgets - pencil to the pictureAn 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:

Wordpress Sidebar Widgets - addinng link to a site
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.


Share

12 comments

  1. Hi Jovo, thanks for helping me. When I got stuck on my site, suddenly I have found your site, follow and it works now. last time, I was wondering how to add images, and I don’t know what is widget, too. I got stuck and was confused.Another question, I found your site has and advertisement about jaaxy. what is jaaxy?

  2. Excellent article, and Thank you!
    Using the “add a page” to get the html code for adding a picture was very clever, I am definitely going to use this on my own page! I am also definitely going to bookmark this page! Looking forward to more! Is it safe to assume that you could use the same methods in header and footer widgets?

  3. Thanks for adding this easy step by step explanation, I’m still new to online business and explanations like this save me tons of time and frustration, and I have been wondering about adding a picture and caption to my sidebar but decided it’s still to advanced for me, now I see it’s actually quite easy and doable – thank you!

    Take Care,
    Eva.

  4. Well done Jovo!
    I found your post most helpful. Oftentimes it takes me a lot of time to do simple things like the one you wrote about. Well, simple once you know how to do it :).
    I could see you have a lot written on SEO and bookmarked your website, I’m very interested in the subject.
    Best regards

  5. I remember wondering how to get links on sidebar widgets when I was first starting out. I wish I had run across your article then. It took me quite a while to figure it out.
    You show pictures and share directions which is very helpful. Showing us how to align a picture is invaluable as well.
    I’m going to take a look around the other articles on your page. Thanks for sharing.

    ~KW

  6. Hi Jovo,
    Thank you for the super info on sidebar widgets. Your info on this site is great and I will be using it to help my own site and its rankings. Thanks again for sharing this info.

Leave a Reply

Your email address will not be published. Required fields are marked *