How to add clickable icons to your WordPress sidebar

You know how a lot of WordPress blogs have nifty icons in one of the sidebars, ones you can click on to go to, say, that blogger’s twitter or facebook page?  They’re really simple to add.

It’s essentially a 2-step process:

1. Upload the icon image(s) to your media library.  You can find a ton of free icons online.  Check out these sites for a few examples.
2. Add a “Text” widget to your sidebar and insert code similar to the following:

<a href=”http://twitter.com/bledsoe”><img src=”http://www.lancebledsoe.com/wp-content/uploads/2009/07/tweeter_48x48.png” /></a>
<a href=”http://www.facebook.com/lancebledsoe”><img src=”http://www.lancebledsoe.com/wp-content/uploads/2009/07/facebook_48.png” /></a>
<a href=”mailto:lance@lancebledsoe.com”><img src=”http://www.lancebledsoe.com/wp-content/uploads/2009/07/email_48x48.png” /></a>
<a href=”http://www.lancebledsoe.com/feed/”><img src=”http://www.lancebledsoe.com/wp-content/uploads/2009/07/rss_48x481.png” /></a>

Then just change the URLs in the code so that they point to your icons and links (instead of mine).  You may also need to adjust the width of your sidebar or the size of your icons so that they all fit.

And that’s it!  So find a few cool-looking icons and go nuts!

6 Responses to “How to add clickable icons to your WordPress sidebar”

1. Michel says:

   November 13, 2014 at 12:10 pm

   Awesome man! Worked like a charm.

2. bledsoe says:

   May 26, 2012 at 6:37 am

   Hi Dan,

   My first guess is that your icons are too wide to fit into the space you have in your sidebar, but you say your sidebar has enough room. My second guess would be that you have line breaks in your html code somewhere.

   Hope this helps.

3. Dan Carey says:

   May 23, 2012 at 9:30 am

   Hi Lance. A great post and a useful tip, thank you.
   I have followed your advice and it certainly worked, but the social media icons line up vertically instead of horizontally across the sidebar, which has enough room. have I missed something?
   Dan

4. Moustafa says:

   March 29, 2012 at 2:43 pm

   thank you.

5. bledsoe says:

   April 29, 2011 at 5:51 pm

   Hi Daraius,

   I like your site. A neat idea for travelers looking for deals.

   I *think* the RSS icon next to my menus is actually a default setting with the wordpress theme I’m using (Thesis, from http://diythemes.com/thesis/ ). It’s a great theme, though it’s not free and it has a TON of options and settings which may be a little much for a lot of blogs. (It’s actually a little much for my blog, but I’ve had it for a while and like it fine.)

   Note also that some (most? all?) browsers now put an RSS button in the address bar so people also have that way of subscribing to your blog.

   Hope this helps,

6. Million Mile Secrets says:

   April 29, 2011 at 5:23 pm

   Thanks for posting this – this is EXACTLY what I was looking for. However, I saw your website and like how you have the RSS icon next to your menus.

   How did you do that? I am beta testing my new site —-> http://millionmilesecrets.com/ and would appreciate your thoughts. Thanks!