fbpx

Insert an Image into Your WordPress Sidebar the Easy Way

Sometimes you just need to get something done FAST and dirty, this will help with one of those moments….

You need to Insert a Linked Image into Your Conference or Event Website’s Sidebar

Let’s say that your conference website or event blog has a side bar like this site. You need to get an image, banner or sponsor’s logo embedded into that sidebar quick. This image needs to link to an outside site. This image must also have some text underneath. Oh crap.

Now let’s say that you are all alone, stranded with no outside help other than this post (it could happen)….or perhaps, you are just sick of waiting on everyone else and just want it done (more likely)..

Now let’s say that you have NO idea how to get the HTML code to make this happen.

Well, you can open up your image editor to get the text inserted, you could then Google HTML insert picture code and find a site that would help you out and then you could manually type it all out so that it is perfect and then you could insert it only to find out you made a mistake and then you would scream and then go back to the drawing board and try again, maybe getting it right, maybe not and then you can Google another solution…

OR you can use this little trick that will get it correct every time and will only take about 2 Minutes.

I am going to show you a real world example. We are now an affiliate of the Event Leadership Institute (Shameless Plug) and I need to put a logo and some text in the sidebar of this website.

Here are the simple steps to insert an image into your sidebar

Step 1:

Resize your image using an image editor (here is a link to my post on easy online image editors). Most side bars are between 200 and 300 pixels wide, so I always go with about 225 or 250.

Sidebar image insert image

Step 2:

Log into your WordPress site and open a new post…really, stop laughing, this shit works.

This is not a post that you are ever going to publish so you could name it Photo Code Generator and save it as a draft to use forever.

Insert Image into Sidebar Step 2
Step 2

Step 3:

Insert a photo into the post using the tried and true method, the old insert picture button:

Step 3 Insert Image Sidebar

Step 4:

Fill out all of the relevant items including the alternate image text, the link where you would like site visitors to go, make sure that you have clicked insert full size and that it is centered….pretty much all of the spaces. I love the red arrows in this image, they make it look really complicated.

Step 4 Insert Image Sidebar
Step 4

Step 5:

Now, insert the image into the post and it should look like this, now I want you to click on the HTML button as pictured.

Step 5 Insert Image Sidebar
Step 5

Step 6:

Copy the code, but only the part between the < a> < /a> tags:

insert image sidebar step 6
Step 6

Step 7:

Save your draft, coast over to your sidebar widgets and insert a text widget, insert your code and click save.

Step 7 Insert Image Sidebar

The Final Product: A perfect image in the sidebar of you WordPress site.

Step 8, insert image into wordpress sidebar

How does it work?

I could explain it,  but no one wants to hear it and they don’t care anyway, they just need something that works!

–A note, this little trick will actually work with most web and blogging platforms like Blogger, TypePad or Weebly…

Yep. We use cookies. Just like everybody else. Cool? Click OK.