How to Add Social Media Icons to Your WordPress Footer or Navigation Menus?

How to Add Social Media Icons to Your WordPress Footer or Navigation Menus?

Adding social media icons is a great way to enhance blog’s share-ability and accessibility. Following are two different ways of performing this task – one is through the inbuilt “Text” widget, while another is via a simple plugin named “Menu Social Icons”.

This post mainly introduces adding social media icons inside WordPress footer and navigation menus. Note that, a large number of WordPress themes support this social functionality, but you’re allowed to use a different replacement or icon to fit WordPress header.

Approach 1 > Add Social Media Icons Manually

It’s pretty simple to display sharing buttons onto your WordPress footer using a few of HTML code and a Text widget. As shown, the whole process only takes two simple steps:

Search and Upload Your Icon Images

You might have several icons to be used, but you can still search “free social icons” within Google chrome. There will be all kinds of results, but be sure that you won’t violate any copyright. If done with that selection, just save them to the local computer.

Upload Icons Image

After that, log onto your WordPress dashboard and go directly to “Media” tab and click “Add New”. Drag and drop all your icon images into this browser uploader.

Create a New Text Widget and Style It

Next, navigate to “Appearance” and click “Widgets” so as to locate this “Text” widget. As usual, drag it to the right-hand “Footer” widget area. From here, give it a title and embed some HTML code as below:

    <a href="[Entire Link to Facebook]"><img src="[image URL of Your Facebook icon]" title="Facebook" alt="Facebook" width="48" height="48" /></a>
    <a href="[Entire Link to Twitter]"><img src="[image URL of Your Twitter icon]" title="Twitter" alt="Twitter" width="48" height="48" /></a>
    <a href="[Entire Link to LinkedIn]"><img src="[image URL of Your LinkedIn icon]" title="LinkedIn" alt="LinkedIn" width="48" height="48" /></a>
    <a href="[Entire Link to RSS feed]"><img src="[image URL of Your RSS icon]" title="RSS" alt="RSS" width="48" height="48" /></a>
    <a href="mailto:[email address]"><img src="[image URL of Your Email icon]" title="Email" alt="Email" width="48" height="48" /></a>

Replace the “Image URL” with your own information, but keep the quotation marks to the defaults. As for the “Entire Link”, just use the link of your sharing button. Be sure that each link starts with https:// or http://.

Note: The mentioned “Image URL” can be found within your media library. Taking the example of Facebook icon here, you can click “Edit” button and paste its “File URL” as follows.

Edit Facebook Icon Images

If you wish to display those buttons, simply edit the above code. Also, you might want to tweak the height and width variables that are 48×48 in our example. Just change that to your liking and the “Text” widget would look like this:

Text Widget Appearance

Approach 2 > Add Social Sharing Buttons with a Plugin

This method relies on this simple plugin – Menu Social Icons. It supports over 30 popular social networking websites and also comes free of cost through the following URL. Note that, WordPress 3.4v or a higher version is required.

Download URL:

Menu Social Icons

Select Preferred Social Media Icons

To install and activate this “Menu Social Icons” plugin, you can use three different methods documented in this plugin installation guide. Upon activation, move to “Appearance” and click “Widgets” in order to select preferred icon images. Make a hit on this “create a new menu” link and name this menu like “Social Media Menu”.

Create New Social Menu

Hit the left-side “Links” tab and many different social media icons will show up beneath the “Link Text” area. Then, click an icon and add social profile URL of your own. If done, click “Add to Menu” to take effect. Just repeat this process for each social media profile.

Choose Menu Locations

Note: Meanwhile, you still need to select a menu location. As shown, there are several menu locations, and these icons will be displayed in sidebar if you don’t choose any menu locations.

Add Your Custom Menu to WordPress Sidebar

Go back to “Appearance” > “Widgets” to display your custom menu within WordPress sidebar or other widget-enabled area. Drag it from right to the left side and then enter a title. Be sure to select the above “Social Media Menu” before clicking “Save” button.

Add Your Custom Menu

Use More FontAwesome Icons (Optional)

The good thing of this “Menu Social Icons” plugin is that it comes with many FontAwesome icons. That is, you can find more beautiful icons in the FontAwesome Library, but only selected ones will be loaded in WordPress menus. Assuming that you prefer to add an RSS icon, just add those code snippets suggested by this plugin developer to the functions.php file.

FontAwesome Icons

For other icons, this /feed should be replaced with the specific URL of your social network. Also, this rss should be changed to the icon name that you want to add.

Add Personalized Icon Images

This requires you to enable this Menu Image plugin within dashboard. After activation, go to “Appearance” > “Menus” and you will see menu image “Upload Button”, “Size” and “Position” below the menu item.

Add Personalized Icons