If your WordPress theme doesn’t offer a feature to add social icons in your widgets, like in your footer or sidebar, and it doesn’t even have Font Awesome integrated, then you’re on your own. You’ll have to either add social icons manually or use a plugin.

Whenever possible, I like adding things manually, so I won’t add another plugin to the cluster (the less plugins, the better), but it can be a hassle for some people, especially for beginners.

So, let’s start with the manual part first, and then we’ll get to the plugin part.

How to manually add social icons in a WordPress widget

1. Get the icons

Let’s take Facebook as an example.

Go to their official Brand Resource Center, read their guidelines and then choose what icon would you like to use. For our example, I picked the one that’s usually used for social icons, the “f” logo.

To download that, scroll down a bit until you see Download Asset, on the right side. Choose the Media Type, accept their guidelines and press Download.

Facebook brand resources download

You’ll receive a .zip file with the logo. You’ll have .png, Adobe Illustrator (.ai) and Adobe Photoshop (.psd) files. We’ll just need the .png logo for our example.

Facebook f logo

They come in different sizes and styles.

I’ll choose the blue one that’s 50x50px in size.

2. Add the icons in a widget

What you need to do here is to:

  • Upload your social icon(s) in the Media Library;
  • Go to Appearance -> Widgets;
  • Add a Text widget in your sidebar or footer;
  • Add a Title, if you wish;
  • Then paste the below HTML code in the Text tab of the widget, not the Visual one.

<a href="https://www.facebook.com/your-page-name/" target="_blank"><img src="https://yourdomain.com/wp-content/uploads/2017/08/FB-f-Logo__blue_50.png" alt="" width="50" height="50" class="alignleft size-full wp-image-154" /></a>

In that code, you need to replace http://yourdomain.com/wp-content/uploads/2017/08/FB-f-Logo__blue_50.png with your actual image link. Here’s how you can find and copy an image’s URL.

And, of course, also change https://www.facebook.com/your-page-name/ with your actual Facebook page link.

Here’s how it should look like in the back-end, in the widget area:

Social icon in WordPress widget

And here’s how it looks in the front-end, on the website:

Facebook social icon in a WordPress sidebar widget

Now I’ll also add Twitter and YouTube icons, so you can see how it looks when you add more than one.

Here’s the back-end again:

Social icons in a WordPress sidebar widget

Make sure you add the codes inline, one after another, like you see in the image, otherwise the icons won’t stay aligned well.

Here’s the front-end:

WordPress widget social icons

They look pretty neat, huh?


How to get the code yourself

If you’re not familiar with HTML and you wonder how can you get that code yourself, well, there’s an easy and fast way to do it:

  • Create a Draft post or page;
  • Click the Add Media button, like you normally would when adding an image;
  • Select the social icon;
  • Add a Title and Alt Text, if you wish;
  • Choose Left for Alignment;
  • Choose Custom URL for Link To and add the URL of your social page;
  • Choose Full Size for Size (make sure you add proper sized icons);
  • Press Insert into page.

Add facebook social icon

Now the code will be displayed in the Text tab of your post or page.

The only extra thing that you need to do is to add target="_blank" (highlighted with yellow) to the code, because you don’t have that option in WordPress by default.

Insert linked image in wordpress

What that does is to open your social page in another browser tab when the user clicks on it, otherwise it will load in the very same tab, and the user will have to click “Back” to see your website again, if they’ll click “Back”, and not just forget about your website.

Now you can copy the code and add it in a Text widget, like you saw above.

Adding social icons in a WordPress widget using a plugin

An easier route is to use a plugin, of course, and that plugin is called Social Icons Widget by WPZOOM.

The plugin has a lot of cool features, which you can see in their video and on their website.

Here are some of them:

  • It offers 4 Icon Sets (Rounded Corners, Round Icons, Square Icons, Icon-only) from which you can choose more than 400 icons;
  • It has a Global Color Picker, which allows you to set custom colors for your icons;
  • It allows you to set the padding and size for the icons;
  • It allows you to add links to your icons.

It pretty much covers anything that you’ll need when it comes to social icons.

That’s a wrap

Hope you found the post useful and comprehensive!

Don’t forget to share it with your friends and subscribe to our newsletter!

If you have any questions or thoughts, please drop a comment, contact us, or message us on Facebook.


 



Leave a Comment