It’s no secret that I’m a giant nerd. My youth was spent operating our ham radio, entering science fairs, and learning HTML (so I could create webpages devoted to my computer games… Petz, anyone?). And my love of geeking out over science and technology has stayed with me to this day.

Sewbon.com :: Sewbon How to Add Custom Social Media Icons to WordPress.com Blog

Oh, memories… this is my ham radio QSL card and a pic of me with my first grade science project – a study of Ohm’s Law. 🙂

Technology has changed a lot since those days, but my HTML knowledge is miraculously current enough to do some little tweaks in this blog.

I wanted to add some social media buttons to this blog and the icons that came with my WordPress theme don’t have one for Instagram. So, I figured I would just create them myself.

Sewbon.com :: Sewbon How to Add Custom Social Media Icons to WordPress.com Blog

I found some adorable social media icons from Olivia at My Favourite Things. Check them out! Aren’t they so sweet? Note: I changed the colors using Photoshop and adjusted the dimensions to 45×45 pixels.

You can use Olivia’s icons or any other icons you want. You can even create your own.

Once you have the social media images you want to use saved, upload them to your Media Library in WordPress.

Sewbon.com :: Sewbon How to Add Custom Social Media Icons to WordPress.com Blog

Then, view each image and take note of the File URL. Copy and paste each one to a word document so you can easily plug it into your html code.

Sewbon.com :: Sewbon How to Add Custom Social Media Icons to WordPress.com Blog

Once you have your File URL’s noted, navigate to the Widgets screen (Appearance > Widgets) and locate the Text widget. Drag and drop the Text widget to the Sidebar.

Sewbon.com :: Sewbon How to Add Custom Social Media Icons to WordPress.com Blog

Click on the Text widget to open it.

Sewbon.com :: Sewbon How to Add Custom Social Media Icons to WordPress.com Blog

And this is where the magic happens. 🙂

The basic code for adding in a image link using HTML is:

<a href=”WEB ADDRESS OF LINK HERE” target=”_blank”><img src=”FILE URL OF IMAGE HERE”></a>

The =“_blank” is the code to direct the link to open in a new window or tab when a user clicks on the image. If you want the link to open in the existing window, you can leave this part off.

So, here’s an example of the HTML code for my Facebook icon:

Sewbon.com :: Sewbon How to Add Custom Social Media Icons to WordPress.com Blog

You can then repeat this code to add the rest of your social media icons. Just paste in the appropriate web address of the link and image File URL for each one.

Now, if you want it to be centered in your side bar, add the following code at the top:

<div align=”center”>

And add the following code at the bottom:

</div>

Taadaa! Now you’ve added your own custom social media icons to your WordPress.com blog!