How to add social media icons to WordPress website?

The Ultimate Guide to Add Social Media Icons in WordPress

Do you want to grow your brand’s social media following? If the answer is yes, then you should add social media icons to tell users how to follow your brand. But how do you add social media icons to your website?

In this post, I am going to show you multiple ways to add social media icons to your WordPress website.

How to Use WordPress widgets to Add Social Media Icons?

There are various WordPress social media icon plugins which you can use to add social icons to your site. However, in this post, I am going to discuss only 2 of my favorite plugins that I have used on my sites.

1. Social Icons Widget by WPZOOM

Simply, install the plugin by searching for Social Icons Widget by WPZOOM. For more details please check our tutorial on how to install a WordPress plugin.

Now, log into your WordPress site and go to Appearance > Widgets. Find out “Social Icons by WPZOOM” widget from the sidebar. Drag and drop it in any widget area. Add all your social page links.

Select any icon from the list of hundreds of social icons. After that, enter your social page URL. You can also add a widget title and description to tell users to follow your brand.

Moreover, you can add rel="nofollow" attribute to your links so Google won’t follow them.

Social Icons by WPZOOM Widget

You can change icon colors as you like according to your website’s design. On our website, we also use the WPZOOM social widget icon plugin.

2. Simple Social Icons

This plugin is developed by StudioPress for the Genesis framework but, it also works with other WordPress themes.

Simply download and install the plugin by typing Simple Social Icons in the WordPress plugins directory. Once installed, click on the activate button.

Go to Appearance > Widgets and find Simple Social Icons widget under Available widgets area, then drag and drop it to the widget section where you would like to install it.

Simple Social Icons Widget by StudioPress

Add all your social media page links. This plugin only offers popular social media icons. For most people, it will get the job done.

You can change icon colors according to your site’s design. Once you make all the changes, make sure to press the “Save” button.

How to Manually Add Social Media icons in WordPress

If you don’t want to install another WordPress plugin for any reason then this is a method that you should try.

You need basic HTML and CSS knowledge to place icons manually to your website.

Step 1: Download any social icons pack by searching for “free social icons pack” on Google. Once you have those icons downloaded, you need to upload them to your website.

Here are some cool social icon packs which you can download for free.

Step 2: Go to Media and click on the Add New link. Now, select all the social icon images, and upload them.

Copy image URL

Step 3: Copy icons image URL by going to Media > Library. Click on the social icon image and copy the URL. Keep all image URLs to your notepad because we’ll use them in the next step.

Step 4: Go to Appearance > Widgets and find the Custom HTML widget. Manually add images and link them to your social media pages by using HTML.

Here’s an example of the code:

<div class="social-icons">
    <a href="instagram page URL here"><img src="your image URL here" height="45" width="45" alt="Instagram" /></a>
    <a href="Facebook page URL here"><img src="your image URL here" height="45" width="45" alt="Facebook" /></a>
    <a href="Twitter page URL here"><img src="your image URL here" height="45" width="45" alt="Twitter" /></a>

After that don’t forget to save your changes.

How to Add social media icons to WordPress Menu?

You need to install a new plugin to add social media icons inside a navigation menu. Here’s how to do it:

Download Menu Image, Icons made easy plugin and activate it. Now before we set up this navigation menu we need social icons pack.

I have discussed some free social icon packs above, download any of them and unzip them to your computer.

Create a new menu and give it any memorable name

Go back to the WordPress dashboard and then go to Appearance > Menus. Click on Create a new Menu link and give it any memorable name of your choice.

Add Custom Links to menu

Add your social media page link as Custom Links. Click on the Add to Menu button. This will add your custom link to the menu.

Repeat this process to add all your social media page links. Once you have added them, click on each URL individually.

Add a social icon

You will notice that there’s an option Set Image. Clicking on that will bring your media library. Now you need to upload an image from the social pack we downloaded earlier.

Set the image icon size as appropriate to your design requirements from the drop-down menu. Select ‘Hide’ under Title Position. Repeat this process until all the social icons are uploaded.

Once you are done, don’t forget to click on the Save Menu button.

I hope you found this post useful. Let us know in the comments if you face any problem. Also, if you want to grow your business online then get access to our subscribers-only guide from down below.

Leave a Comment

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