Teacher and coach

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:

    Awesome man! Worked like a charm.

  2. bledsoe says:

    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:

    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?

  4. bledsoe says:

    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,

  5. 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!

Leave a Reply

Your email address will not be published. Required fields are marked *

Powered by WordPress | Designed by Elegant Themes