Do you want to add social media icons in your WordPress site? While WordPress does not come with a social media profiles section, you can easily use WordPress navigation menus to add and display social media icons. In this article, we will show you how to add social media icons to WordPress menus.
The biggest advantage of adding social media icons using WordPress menus instead of another plugin is that you have the ability to change the order they appear with a simple drag-and-drop interface. You can also display them just about anywhere such as your sidebar or another menu location.
Video Tutorial
If you don’t like the video or need more instructions, then continue reading.
Adding Social Media Icons to WordPress Menus Using a Plugin
This method was suggested to us by our founder, Syed Balkhi, who has a simple custom menu showing social media icons.
First thing you need to do is install and activate the Menu Social Icons plugin. After activation, you need to visit Appearance » Menus in your WordPress dashboard area to start adding social icons.
Before you start adding links, you will need to create a new menu by clicking on the create new menu link. You can give your menu an appropriate title such as Social Menu.
Next, click on the custom links tab on the left side, and you will see the social media icons below the link text and URL fields. All you need to do is click on a social media icon and enter your social profile URL. When you’re done, click on add to menu button. Repeat this process for all social media profiles that you want to add.
Once you have added your social media profile icons to the menu, you need to choose a menu location. Depending on your theme, you may have multiple menu locations where you can display your social icons menu.
If you do not have menu locations, then you can always show the social media icons in your WordPress sidebar.
Adding Social Media Icons Menu in Sidebar
You can display your social icons menu in any WordPress sidebar or widget-ready area by going to Appearance » Widgets in your WordPress admin area. Once there, simply drag-and-drop a custom menu widget to your sidebar.
In the widget settings, select the social menu you just created and then click on save button. You can now preview your site to see the social icons menu in action.
If your WordPress theme has multiple widget areas on different locations, then you can add social menu icons in those locations such as WordPress footer, header, below the post, etc.
Using FontAwesome Icons in WordPress Menus
The best part about Menu Social Icons plugin is that uses the beautiful FontAwesome library to add social media icons. While the plugin comes with the entire FontAwesome library, it only loads selected social media icons in your WordPress menus.
If you would like to use any other icon from FontAwesome, then you can do that as well.
First visit the FontAwesome library and select the icon that you want to use. For this example, we will add a RSS icon to social icons. Once you have selected your icon, you would need to add this code in your theme’s functions.php file or a site-specific plugin:
add_filter( 'storm_social_icons_networks', 'storm_social_icons_networks');
function storm_social_icons_networks( $networks ) {
$extra_icons = array (
'/feed' => array( // Enable this icon for any URL containing this text
'name' => 'RSS', // Default menu item label
'class' => 'rss', // Custom class
'icon' => 'icon-rss', // FontAwesome class
'icon-sign' => 'icon-rss-sign' // May not be available. Check FontAwesome.
),
);
$extra_icons = array_merge( $networks, $extra_icons );
return $extra_icons;
}
For adding other icons, you need to replace /feed with the URL of social network you are trying to add. Also replace rss with the name of the icon you want to add.
If you want to use FontAwesome in your WordPress posts, then check out our tutorial on how to use icon fonts in WordPress post editor.
Adding Your Own Social Media Icons in WordPress Menus
Menu social icons plugin uses FontAwesome icons in WordPress menus, but what if you wanted to use your own icon images? It’s definitely possible. Here is how you can add any custom image icons to WordPress menus.
First you need to install and activate the Menu Image plugin. Upon activation, you need to visit Appearances » Menus page where you will notice the menu image buttons under each menu item. Simply upload your icon image there.
See our article on how to add image icons with navigation menus in WordPress for more detailed instructions.
We hope this article helped you learn how to add social media icons to WordPress menus. You may also want to take a look at our tutorial on how to style WordPress navigation menus.
If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.
please do another tutorial for a recent version of WP. your directions are very user friendly but non of the plugins work! please help.
I downloaded the plugin for “Menu Social Icon” but it’s not working.
On the custom links tab on the left side, i didn’t get the social media icons below the link text and URL fields. All I can see is the ‘URL’ and “Link text’ boxes and an ‘Add to menu’ button as before installing the plugin.
Re-installing the plugin also didn’t work .Can you please help …
Thanks in advance
I’m noticing this plugin has not been updated in over 2 years. Is there another plugin that can be used to do this?
My question too.
Menu Social Icons is also untested on the latest WordPress (right now: 4.7.3).
How can i add them to the top right on header?
Hi there,
How can I insert these social media profiles into my blog posts?
Please answer.
Thanks for the article!
One problem — how do I make my custom menu items appear inline? Before finding your article I tried setting up my icons as an unordered list and then setting the list elements to display inline, but in a text widget, this doesn’t seem to work.
Any ideas?
This worked great,one question though, how do i get it to open in a new tab? instead of navigating off my blog to my social media pages.
I was wondering the sale thing! I need them to open in a new tab!
I hope there is a workaround for this.
These were the easiest instructions I’ve seen for wordpress thus far. I downloaded the plugin for “Menu Social Icon” and it was a breeze. Thanks for the tip!
How can I Add Social Media Icons to my illustrations?
I have found that I really like the Add To Any plugin. It has a ton of social media site icons and it lets you customize the layout as above or below the post and gives you an option for a floating social icon bar.
Thanks for the tutorial! Is it possible to open the social media sites in a new tab?
Thank you very much in advance.
Please take a look at our tutorial on how to add nofollow and link target to links in menus.
Please correct typo “display social media media icons” (double media). Thanks for the article!
Thanks, fixed it.
I followed these instructions but my icons appear vertically on the sidebar. How do I change that to horizontally? Thanks!
You can try using CSS to display menu items inline. Try this CSS to get started (paste it in your theme’s stylesheet):
li.menu-item-type-custom { display: inline; padding: 10px; margin: 10px 0px 10px 0px; text-align: left; float: left; }I had the same problem and using this CSS worked. Thanks a million for this wonderful tut.
I don’t see how to get to Theme stylesheet?
I like the plugin. Gives a bit more control over where things end up. A pretty wide swath of themes have this feature packaged already, but very few of them actually let you decide where you want them to go.
Either way, pretty simple to do.