WordPress Designer Secrets Revealed- How to add social media icons to sidebar

WordPress Designer

Eat, Pray, WordPress Designer Love…in that order. Maybe add some desk calisthenics in there. No, but seriously I wanna talk to you today about some of my secrets I use as a WordPress designer, and how I go about doing some of the little things I do. Sometimes I forget the simple things people want to do to their WordPress site, so hi ho cheerio let’s go.

#1 Adding social icons to your sidebar
Go download some social icons, 2 places I use: Iconsmysitemyway, and Iconspedia. *Tip: when downloading your icons, it is best to go ahead and download the size you are wanting to use, and download all in the same size so it saves you some time.

#2 Go to your WordPress dashboard, and go to the Media tab on the left, and select Add New.

#3 Click Select Files

#4 Browse your computers file and select the icons *Tip: To add more than 1 social icons at once make sure all icons are in the folder and hold shift+click icon and you can select more than one at once

#5 Click Show

#6 Copy File url

#7 Go to Appearance>Widgets *Tip: press Control+click to open this in a new tab so you still have those other file urls open in a separate tab

#8 In Widgets, select a text widget, drag and drop it into the sidebar

#9 Add the .html <a href=”http://yourlinklocation.com”><img src=”filerul”></a> *Tip: the href is where you want your social icon to link to and the img src is the path you just copied so you can paste it in there

#10 Save it, and go view your sidebar

#11 Rinse, wash, repeat and add each social icon, one right after another in your sidebar, and it will appear right next to one another. Like so: <a href=”http://yourlinklocation.com”><img src=”filerul”></a> <a href=”http://yourlinklocation.com”><img src=”filerul”></a> <a href=”http://yourlinklocation.com”><img src=”filerul”></a>

#12 This also applyies to ANY image you would like to appear in your sidebar, if you don’t want it linked just don’t use the ahref,

Thanks for joining me in my WordPress Designer Secrets Revealed- How to add social media icons to sidebar

Similar Phoenix SEO,Web Design Phoenix and WordPress Designer Tips:

  1. WordPress Designer Tip #2 How to Add a Facebook Like Box to Your Sidebar Hey guys! WordPress designer Rachael here giving you yet another...
  2. How to add Cool Floating Social Icons to Thesis WordPress Website In this tutorial I am going to show you how...
  3. WordPress Designer Tip #3 How to Add Pics to Your Thesis Teasers Section Hey everyone, long time no blog post. I sure have...
  4. Phoenix SEO Rachael Butts Link Building Tutorial Step 12 | Social Media Social Media for SEO can sometimes become overwhelming. Trust me...
  5. Customize WordPress Thesis Theme with Icons…I’ve gone icon crazy! I was searching around trying to find some really great...

{ 8 comments… read them below or add one }

Terry Thrower August 10, 2010 at 9:23 pm

Thanks Rachael, you always come through
Terry, Handyman phoenix Az

Rachael Butts August 11, 2010 at 2:24 am

Thanks Terry, you are the best!

patrick jackson August 30, 2010 at 5:52 pm

I am new to this wordpress and setting up blog sites. Where do you get the file url for the social media icons?

Rachael Butts September 3, 2010 at 3:04 pm

You will need to go grab your own icons and upload them under “media” in your dashboard.
Then where is says “link URL” after you upload it, then you copy that. :)

Caleb September 17, 2010 at 12:52 pm

I thought this stuff was basic knowledge, but then again I keep forgetting all the trials and errors i went through back in the day when I first started learning what i call “theme tweaking”.

p.s.
So you’re the one i keep hearing about? I finally found your blog and it’s real big and simple, one would have thought a designer like you would have had tons of widgets and Mashable like floating ads everywhere!

Rachael Butts September 17, 2010 at 1:47 pm

Ha, no I’d rather it be clean and easy to read for newbs.
I remember how I would just click away if I got all overwhelmed :)
Maybe I’m writing for the old me too much ;)

Karl October 21, 2010 at 8:28 pm

I got brain faded pretty good working with the css code and having it crash my Thesis pretty good. You came through with your blog post proving the simplest solutions continue to be the best!!! I appreciate the details and tweaks that got me what finished with that part…THANKS!

Rachael Butts October 22, 2010 at 2:32 pm

Thanks Karl! So glad I can help.
Let me know if you’d like to see a tutorial on something!

Leave a Comment

Previous post:

Next post: