free hit counters
If you are using Internet Explorer as your browser please be running at least IE 7 or above. This site does not support IE 6 or below. Go here for the latest free version including easy download and installation instructions If you want to make it real easy on yourself, download Firefox , the most popular browser in the world. It's free and simple. You'll be so glad you did.
Apr
22
2009

Add an image with a widget

You can easily add images to your sidebars, or wherever you have a widget, with a text widget. Here’s how…

Go to your Dashboard —->Appearance —->Widgets….

Pick where you want to place the image from the drop down list…

145

Next, from the available widgets column go to the text widget and click the “add” button…

146

Next, open the widget…

147

Now you can simply type your html code in the box provided. Here’s an example of the code you could input. Obviously you would have to adjust the image path to where you have your image. You can give your image a class name so you can style it in your custom.css

<img class=”name your class” src=”http://www.your path to your image”>

After you’re done, make sure you hit the “save changes” button!

Leaving a comment with code in it...

If you would like to leave a comment and you have examples of code you want to show, you must "escape the code". This allows the entire code to show correctly by inserting certain variable around certain tags to make them show. If you don't "escape the code" your code will show up broken, mangled, and it won't be able to be seen correctly. "Escaping the code" is very simple...

  1. Copy your code you want to show
  2. Click here to go to the site to escape the code
  3. Follow the directions, it's so easy
  4. Once you have the escaped code copied, paste it in the comments area where you want
  5. Now you can enjoy life


Go ahead, leave a comment...

{ 5 comments… read them below or add one }

Frank Pipolo April 24, 2009 at 10:17 am

Big thanks as I was trying for a while on to get my LinkedIn profile with image on side bar!

Reply

Kelly April 25, 2009 at 5:28 pm

Can you explain this a little more detailed for the Thesis dummy?? Thanks!!
“Obviously you would have to adjust the image path to where you have your image. You can give your image a class name so you can style it in your custom.css”

Reply

Nasty April 25, 2009 at 5:52 pm

When you insert an image in html you use this basic code:

<img src="http://path to your image">

I don’t know where your image is but find it’s path. It will look something like this….

<img src="http://www.somewebsite.com/a folder/ another folder/the name of the image. jpg or png or gif or tif">

Now you can add a class to it like this….

<img class="the class name" src="http://www.somewebsite.com/a folder/ another folder/the name of the image. jpg or png or gif or tif">

Now you can go into your custom.css file and style the image with your class name like this…

.custom .the class name { your styles here }

That’s about as simplified as I can make it. Did it help?

Reply

Mark May 22, 2009 at 10:39 am

I put the code in the text sidebar but I get a box with a red x instead of my image. Did I leave out a step? Thanks.

Reply

Nasty May 22, 2009 at 4:52 pm

There’s something wrong with the path to your image. I can’t view your code but make sure your image is in..

…/wp-content/themes/thesis/custom/images/yourimage

Reply

Leave a Comment

Previous post: Add avatar to wordpress default

Next post: Add different widgets to different pages