Tims Minions WordPress Tip: Adding Images to Side Bar

11 Apr

Today I will share a quick and easy WordPress Tip that can make your site look a little more personal.

This is a little trick for adding extra pictures into the side bar widgets in WordPress. Giving your site that little bit more personalized feeling. You can of course use plugins for this, the plugin WP Photo Album gives you some funky little sidebar widgets that will incorporate slide shows and top ten picture etc. but if you want to just add a few pictures to the sidebar then it is simple enough.

The width of your picture will be determined by the width of the side bar on your WordPress theme, they are usually around 250 wide so I will use that as my example. Using free software like paint, open up a photo, go to the tab that says resize. Click on it and open up the re size box, check the ‘pixels’ radio button and make sure the ‘maintain aspect ratio’ button is also checked.

Tim Lowe Tims Minions

Type in the size you want in the box that says Horizontal (width) then press ok. The vertical (height) should automatically resize to suit the Horizontal. All you need to do is save the image.

The image is now the size you require, you now need to open up a new post box in the dashboard area of your WordPress site, you are not going to publish a new post however you will be inserting the image into the post as you would normally. Make sure that the image is set for centre of the post; it is advised to hit ‘None’ so the image URL is not accessible. (When you click on the picture it won’t open up in a separate window of its own). Then insert into post.

Tim Lowe Tims Minions 1

As you will already know, WordPress has a HTML and a Visual editor for creating posts. You need to upload the image in the Visual then click to go into the HTML editor where you will find the HTML code of the image that you need to add to the Text widget where your image will sit. Copy the code.

Tim Lowe Tims Minions 2

You now need to go to the widget are that is found under ‘Appearance’ you need to add a Text widget to the side bar to put your image code in.

Tim Lowe Tims Minions 3

Simply drag it from the widget area and drop it into your chosen side bar or footer. Once it has been dragged properly it will open up.

Tim Lowe Tims Minions 4

What is left for you to do now is paste the code into the box, hit save then close the box up. Done and dusted.

Tim Lowe Tims Minions 5

You should now have a picture in the side bar or footer depending on where you want it.

If you wanted to have the image clickable so that it sent people to an affiliate offer like an advert would then all you do when inside the Visual editor is add a link to the image which will automatically be added to the code that you will copy from the HTML editor.

Click on the image and click the Link icon ( it might appear different in your editor as I am using the CKEditor for WordPress plugin that gives me a bit more functionality when creating posts.)

Tim Lowe Tims Minions 7

Once the link icon is clicked a box will open where all you have to do is add the new destination URL into the URL bar (see image below) and hit ok. The image will now be linked to that site and when anyone clicks it they will go there.

Tim Lowe Tims Minions 8

As shown above all you need is to go into the HTML editor and copy the code and place it into the widget.

Tim Lowe Tims Minions 9

BIG BONUS TIP: Do it once, copy the code, save it to your desk top in a text file and in the future all you need to do is change the relevant URLs in the code then copy and paste that to wherever you want.

Tim Lowe Tims Minions 10

I hope you found this post useful – Andi the (trying to be useful) Minion 🙂

Advertisements

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

%d bloggers like this: