How to add pictures to your sidebar

Updated – February, 2013

Attention: Use this Image Widget plugin to make this whole process automatic!!

Caution!

This is one of the only areas in which you CAN mess up your website, and thats because we use  TEXT widgets.  Text widgets are those sidebar blocks that let you add anything to your website.  That is dangerous! So please, please, please be careful.

The upside of using text widgets is that you have great  flexibility.  You can place code, ads, images, or text into your sidebars.  However approximately 40% of the troubleshooting jobs that I complete, are caused by incomplete code in a text widget.  To prevent user errors, I strongly recommend copying and pasting the code that you want in your text widgets.  And here’s how you do that:

Fail Safe Method to Add Image to Sidebar

1.  Find the image that you want.

The Image

2.  Upload that image to photobucket or another photo hosting service.  For our example, I’ll use Photobucket.  Click on “Share”.  Highlight the link with your mouse and right-click, “copy”.

3.  Open your WordPress website (www.yoursite.com/wp-admin).  Login.  Go to Posts -> Add new.

4.  Click on the “Add media” button.

5.  Click on “From URL” tab.  6.  And in the “URL” field, right-click and “paste” the link.  Add a title (something relevant to the picture and including keywords).  Then click “Insert into Post”.

 

6.  Click the picture one time. It will turn blue.  And an edit button will pop up.  Click the edit button.  Enter the link that the image is ‘going to’.  For example, if you want it to go to your Facebook page, you paste the Facebook link in the “Link URL” field like this:

7.  Looking at your new post, you will only see the picture.  Click on the HTML tab and you’ll see something like this:

 

8.  Copy the whole section in yellow above. It is VERY IMPORTANT that you copy everything.

9.  Now, you’re ready to add this code to your text widget.  Under “Appearance”, under “Widgets”, drag a “Text Widget” into any sidebar.  Right click in the text box, and click on “paste”.   All that code will now be in the text widget like this (a copy of my pinterest button):

 

Questions?  I’m happy to help. Just let me know in the comments.

Notice how fast this page loads?

Synthesis Managed WordPress Hosting

Comments

  1. says

    I have been trying to post a widget to my side bar,
    I can get the copy right. But when I go to paste,
    my screen disappears. What am I doing wrong?

  2. says

    Hi there,

    Wicked suggestion. Works perfectly except for the fact that I want a specific image in the right sidebar for different pages. Essentially each page gets its own image in the sidebar. Using your strategy it makes all sidebars get the same image. Perhaps I’m missing a setting in the setup…not sure how to go about doing this. Any advice would be appreciated.

    • Cathy Tibbles says

      If you want separate images in each page, you need to install a ‘widget logic’ plugin. then add a new widget to the sidebar for each page. And using the logic plugin, select which page that widget should be shown on.

      Hope that helps!

Leave a Reply

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