WordPress: Placing images in text widgets

Posted on February 28, 2008 by

57


Updated with an example April 22, 2010
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 © 2010 All Rights Reserved”  in a text widget.

Or you  can register copyright licenses with either creativecommons.org or MyFreeCopyright.com or creators.icopyright.com 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 © 2010 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 © 2010 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 © 2010 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 post: Working with wordpress widgets

add to del.icio.us:: Add to Blinkslist :: add to furl ::  :: add to ma.gnolia :: Stumble It! :: seed the vine :: :: :: TailRank

Tagged: