Do you want to add social media icons on your WordPress menu? 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 on any widget-ready area in WordPress. In this article, we will show you how to add social media icons to WordPress menus.
Why You Should Add Social Media Icons to Menus?
The biggest advantage of adding social media icons using WordPress menus is that you have the ability to change the order they appear in with a simple drag and drop interface.
While you can use third-party plugins to display social media icons in your sidebar, most of those solutions aren’t as flexible.
Aside from the easy drag & drop interface, when you add social media icons to WordPress menus, you can display it on any widget-ready area on your site including your sidebar, footer area, below posts, etc.
That being said, let’s take a look on how to easily add social media icons to WordPress menus.
Adding Social Media Icons to WordPress Menus
First thing you need to do is to install and activate the Menu Image plugin. For more details, see our step by step guide on how to install a WordPress plugin.
Upon activation, you need to visit Appearance » Menus page and create a new menu.
Next, you need to add custom links for each social media channel separately in your new social menu.
You will notice that there is a menu image button option under each menu item. You can use it to upload your social media icon here.
It allows you to upload a different icon on hover with the main icon image to display on mouseover.
After that you can select a size for the social icon. There are multiple options for the image size. Make sure that you select the same size for all your social menu icons, so it doesn’t break the menu area.
Next, you need to select a position to display the name of each social channel with your icon. If you only want to display the social icon without any label, then you need to select the ‘Hide’ option under the Title position setting.
Simply repeat the same to add as many social icons as you need.
Once you are done adding menu items, you need to select the display location for your social menu and click on the ‘Save Menu’ button.
Now you can visit your website to see the social media icons in your WordPress menu.
You can also add the social icon menu in your WordPress sidebar. Simply go to Appearance » Widgets page and drag the ‘Navigation Menu’ widget in the sidebar widget area.
In the Select Menu dropdown, you should select the social menu that you created above and click on the ‘Save’ button.
Note: The above image is displayed for example purposes only. To get the widget to look exactly like that, you will need to add custom CSS.
That’s all. We hope this article helped you learn how to add social media icons to WordPress menus. You may also want to see our guide 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.
Thank you for this wonderful tutorial!! It has helped me beyond words. Thank you!
Glad our guide could help
Icons are currently on the site but don’t work even link is added. whats the reason?
If the urls are structured properly then you would want to let the plugin’s support know about your error to take a look if the error is with the plugin itself.
Hi guys,
Installed the plug in. Added 3 social accounts and clicked “Main Nav” location box. The widget replaced the existing main menu instead of being added to it, and instead of the icons showing, the social account titles show instead. I’m looking forward to the benefits of this plug in. Hope you guys can help.
Thanks!
You would want to let the plugin’s support know: https://wordpress.org/support/plugin/menu-image and they should be able to see if this is an error with the plugin itself.
Thank You Very Much for Essential Information that I was Seeking on the Internet.
Highly Appreciated.
Glad our article could be helpful to you.
My current theme has social media icons on the main top header in the desktop version, but when switched to mobile version the social icons are gone. how can I get them to stay and possibly my header links also?
Hi Dan,
It seems like your theme hides them on the mobile version. Please contact your theme author and they will be able to help you with this.
Thanks for the advice, I use Simple Social Icons now and I like them very much. Any advice on what plugin to use to display a “share on twitter” or “share on facebook” button above and/or below a post, similar to what you have under the title of this article?
Hi David,
Please see our list of the best social media plugins for WordPress.
Is there a way to add a target attribute, so the social page opens in a new tab/window?
Yes, you can easily open the links in a new window. If you’re not seeing the option in your Custom Links by default, then you will have to click on the “Screen Options” tab on the top right of the screen and make sure that “Link Target” option is checked.
Hi,
This plugin looks awesome. Thanks!
Hello,
Can I get the custom code for the widget to look similar to what it is on WPbeginner?
I like the widget look for social media icons on WPBeginner so can I get the code.
Thank you.
Hi Aman,
You can just use your browser’s Inspect tool to copy the HTML code and CSS.