Adding images in WordPress using Text widget

Posted: November 26, 2009 in blogging, website design, Wordpress
Tags: , , , ,

There are a number of image plug-ins you can download and install for your WordPress (WP) powered website to allow you to insert images into your sidebar, but as you may find out (as i did) not all of them work the way you want – especially if the latest WP update breaks them.

I was frustrated by this recently and decided to use a different way to get the image into the sidebar and was pleasantly surprised how easy it is to do it just using the text widget that you should already have as part of your WP install.  The same process works for images used as links and also for tables.

For those of you who are used to coding your own websites you may as well move along, this is beginner stuff, but i wanted to explain it in simple terms for those just starting out or those who really don’t want to learn much code but still want the functionality.

Basically, drag the Text widget into your sidebar wherever you want it and then click on the arrow to open the widget for editing.  You can add a title if you want, but you don’t have to – for me i decided not to since it was just going to be a place to drop my logo.  The widget will be a blank version of this screenshot below.

image-textimage-widget

As you can see, i’ve already filled in the text necessary to load the image i want.  Let me break it down for you.

The first part (between the less-than and greater-than symbols) is aligning the image to be centered in the space available – this is going in the sidebar so instead of giving it an absolute value, i just center it.  The next part is the name and locations of the file which i have already uploaded to my website hence the complete URL (the stuff after and including the http)  You need to start with a less-than symbol, then you tell it that you are putting an image in there (img) and give it the source (src=)  The exact location should also tell it the type of file – hence the jpeg at the end.  After that its a simple case of telling it a width and close the expression with a slash and a greater-than symbol.  The last slash p just closes the paragraph, which in this case is the entire expression but if you were doing this as part of a larger design the paragraphs become more important.

 all that results in this:

image-sidebar-logo

Thats it.  Simple as that you have the basic knowledge now to insert an image into your blog sidebar, or really anywhere on your site.  The same basic principal can be applied to many different items you want to display with a bit of tweaking to the code.  Simple is always good.

tcg

Advertisements

Please Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s