WordPress: Placing images in text widgets

copyright

I have noticed that many new users have difficulty with placing images in text widgets. IMO the easiest way to do this is to create a draft post first, then copy and paste the data into a text widget, and delete the draft post after you see the image display correctly in your sidebar. Prior to trying to insert an image into a text widget I recommend reading these two FAQs entries:
Put an image in your sidebar
Using the text widget
I hope they will provide enough background information so that the walk through below will simply function as a guide.

Walk through – Insert an Image into a text widget

–> New Post –> upload image into the post –> send image to editor –> click the image and position it using icons 7, 8, or 9->  switch to the code tab (HTML) on the visual rich text editor and copy the entire image code to your clipboard –> save the draft post (you can delete it later)

->Appearance –>  Widgets –> drag a text widget out of the available widgets box and drop it into the sidebar box –> open text widget and paste in the image code –> click ‘Save’ then -> click ‘Close’  -> now view your site (it should be there) -> go back delete the draft post.

Walk through – Linking a sidebar graphic to external link:

-> New Post ->  browse for your image and click ‘upload’ (this will take you to a new page) -> select the size (usually ‘thumbnail’)  and click ‘insert into post’. Switch from visual mode in the editor to code (HTML) and your HTML will appear there.

In the first portion of the HTML is the link reference page. You will change this to link to the url for the site you want to link to, instead of the long text so make sure you leave in the image code {img scr} and then copy all of the code with your cursor and save the draft post.

-> Appearance -> Widgets’ and drag a ‘Text’ widget from the Available widgets box and drop it into the sidebar box -> click on the  the ‘text’ widget in the right hand corner and it will open -> paste the code from the draft post you’ve copied in there and click  ‘Save’ and ‘Close’.  Click ‘view your site’ and make sure everything went accordingly and then delete the draft post.

Example: Copyright Notice or License

Here is an example for placing a text widget in your sidebar for displaying a copyright license or notice.

official copyright symbol

You can simply place “Copyright © 20__All Rights Reserved”  in a text widget.

Or you  can register copyright licenses see: creativecommons.org as described here > How to copyright your digital  works and then display these license images in your blog’s sidebars in  a text widget.

Or if you prefer you can create a static page for displaying your copyright and then link to it from “Copyright © 20___ All Rights Reserved ” placed in text widget in your sidebar by following the walk through below.

1. Copy the HTML code or the phrase “”Copyright © 20__ All Rights Reserved “.
2. Dashboard > Appearance > Widgets
3. Drag a Text widget out of the Available widgets box
4. Drop the Text widgets into the Sidebar box
5. Click the top right hand corner of the Text widget to open it.
6. Paste the HTML code or the phrase “”Copyright © 20__ All Rights Reserved “” into the Text widget.
7. Click “Save” and Close” at the bottom of the Text widget.
8. View the front page of your blog and the copyright symbol/notice should be there.

Related posts found in this blog:
8 Hot Widget Tips
Working with wordpress widgets
Copyright basics for bloggers

 

66 thoughts on “WordPress: Placing images in text widgets

  1. Thanks for the workaround.

    I have generated the table with HTML Tablemaker II but, unfortunately, I got a table with blue background and blue borders – no matter if I set white/none background color for the table in HTML Tablemaker. Is there any way to fix the problem? Thanks. My theme is Retro-fitted.

  2. Hi Timethief
    I really found your post helpful but i have got one problem
    My side bar is static and it does not scroll down… I dont know why.
    When i try to add more text images, it just displays the recent one and
    I am getting upset over this. I am using the Ari theme
    Hope to hear from you

  3. When I put an image in the text widget there seems to appear a white border around the image. Any idea what the problem could be?

  4. i know how to add icons in a text widget but i have problems trying to get an icon beside the text widget title like you see in the footer with the twitter, news envelope icons in this link [link redacted] i have tried everything! If you have the answer please let me know. Greatly appreciated!

    • The only way to include and icon ie. an image in a widget title field that’s not coded to accomodate anything other than a title is by CSS editing.

  5. Timethief, you are the best thing that ever happened to wordpress! I spent hours driving myself nuts trying to add an image to a text widget. I stumbled upon your blog and bang, I found what I was looking for. Thank you, thank you, thank you. Your website has been bookmarked. You brought tears to my eyes. Tears of relief that is! Have a nice day

  6. hi, the sidebar widget you have with the photo left justified and the text right justified.. i’m trying to do that in my widget. I tried using a draft post as you suggested, copying the code and pasting into the widget but the text ends up under teh image and not beside it, as it shows in the post visual editor.. would i have to set it up in a table? seems too difficult to just have my text on the right of my picture!

    • What size was the image and text? Sidebars are narrow so a single 150 x150 px thumbnail takes up most of the space. The image and text you set up in a draft post will be automatically made to fit into the narrower widget space. In the Twenty Ten theme the sidebar width is 200 px.

  7. Pingback: » Blog Archive » Images on the side bar

  8. TimeThief, I’ve got to tell you – your blog is keeping me online too much!! (That’s a compliment). I find myself reading post after post…

    I’ve been using your first tip from this page for months now – putting an image into a draft post and then copying and pasting the HTML for a text widget. It’s the only way really that my slightly dyslexic brain can get it to work!

    Thanks.
    :)

      • TT – your comment with this link has just got you a very very big HUG!! Thank you so much!
        I’ve been hunting for the guide to theme side panel widths for weeks now as I want to put some small images in my side panel in one or two of my blogs, in place of the lists. (And yes, don’t worry – I will take into consideration the loading time.)
        :)

  9. I’ve been trying to f igure out how to put multiple images in my sidebar text-widget, in a gallery style, such as three in a row, then three below those, etc. But I can never get the images to display that way. They only stack one a-top the other, which takes up a lot of space (I’m not code-savvy). Do you have any tutorials that explain how to do this (how to display the sidebar images in a gallery style using the text widget)?

    Thanks,
    Rachel

  10. What a great idea, to format everything in a post draft first! I’ve been messing around with this off and on for the past day, trying to create a horizontal space between my image and my text, and this fixed the problem in minutes. Thanks!

  11. @francetoast
    I’m happy to hear you found this post to be useful. I winess many visitors reading the post but rarely recive a comment. Thanks for yours and best wishes for happy blogging.

  12. I’m delighted to here that you like this blog because you find helpful information in it. Thanks for the compliment which I will accept on Richard’s behalf too.

  13. Thank you, Thank you! I am completely mad about your blog. I’ve found other pointers in other sites, but I find your site the easiest to read and absorb quickly. I finally inserted my text widget image–no problem.

    You really have blogging down. I appreciate you sharing your expertise!

  14. This isn’t the only way to do this, but it is probably the easiest. If you look at the img src code in the text widget (or in the post for that matter) you will find height and width sections toward the end of the code. To keep things proportional, change those to percentages such as: width=”50%” height=”50%” /> . I’ve only shown the relevant part of the code or this theme will strip it out.

  15. Thanks for this great “why didn’t I think of that!” post. It was a lifesaver. I’ll hunt around on your site now, but how about some advice as to resizing the image? I fumbled with WordPress’s facility for doing it, and got my image to look good, but some expert guidance would be great!

  16. You’re welcome and thanks for spreading the word. In my sidebar you will find under “troubleshooting images” a collection of posts that deal with the specific issues that may arise when using wp 2.5. :)

  17. Thank you so much. You provided me with a very simple way to do something that was driving me crazy. I will be coming back often and letting others know. :)

  18. I was researching some wordpress help and I bumped into your site! Well done Timethief! Thanks for this great site!

  19. Thanks for creating this informative blog! I’m still trying navigate the blogosphere and your blog is a true gem. I’ll be checking back again and again I’m sure!

Comments are closed.