Tutorial: Adding clickable social media buttons to your WordPress website or blog. Time it takes to implement: 5 minutes or less + search time to find the right icons.

There are several ways to insert social media icons into your WordPress.com and WordPress.org. For now, I'm going to focus on the EASIEST way to do this for my beautiful friend Heidi of Deep Fried Kale.

This is the NON-CODERS easy peasy way to add social media icons to your WordPress Blog or Website. You could also do this with a plug-in but I figured I'd start here first so that the plug-in shy peeps would also have an easy method to use.

First, you need to find graphic icons that you want to use for this occasion. Since I am a graphic artist, I tend to make my own but if I am in a pinch I just google 'free social media icons' and normally find a million. Keep in mind that if you are doing this for a commercial website, be sure the original artist says that is OK! Download the icons and save them to a folder where you will be able to easily find them.

Here area just a few sources you can use to download the icons:

Nifty Buttons

HongKiat

And something girly from Something Swanky (even includes code for some! )

Once you have the graphics you want to use all worked out, go ahead and start a new blog post - don't worry we really aren't going to post a blog.

There are two ways you can do this. I've circled them in red below.

 

 

Next, hit add media, as if you were going to add a photo to a blog post. Click select files and upload the icon:

 

 

Next select/upload the icon you want to use for the social media button and hit insert into post:

 

 

You can see how it looks uploaded to the blog here, this is just like adding a photo to a blog, only we are only doing this to grab the code not post the blog:

 

 

Next, click on the icon and go to add link on the editor (looks like a little chain link), insert your social media profile URL and click open in new window/tab. Then click update:

 

 

Next, flip from the visual editor over to the text editor and COPY the code you see in the editing box. I've highlighted this code in blue below.

(NOTE) I normally edit all of my blogs in the Text Editor so I am assuming you use the Visual Editor. And note that flipping back and forth between these two editors is NOT normally recommended as it causes WordPress to garble up the code of your page. In this case it's necessary to grab the code we need to insert into the sidebar widget.

 

 

Next, go over to the widgets section of your website. This can be found under Appearance> Widgets on the left side of your WordPress dashboard. Here you will need to drag and drop the text widget to your right sidebar primary widget section.

I mention primary widget section because some folks use WordPress themes that have multiple widget areas. You can drag and drop the text widget to whichever area you want the clickable social media icon to show up.

Also note that you can also just open an existing text widget and drop the code in there. I wrote this assuming you didn't want to add this social media icon to any other area but both ways work just fine.

Next, paste in the code you created and insert a title if you wish.

Click save + close and then view your website and test the button!

 

 

This is what your icon will look like!

You can actually do this for ANY graphic and make it clickable to a new link. You can also add static graphics ( graphics just for aesthetics and not clickable ).

When doing this note that there is other HTML coding you can use to do things like center the photo, so this isn't the end all be all. I will be writing a blog post in the future explaining the other options but this is the easy peasy way to add a social media icon to your WordPress blog or website.