Do you want to add social media icons to 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 at 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 the Menu Image page from your WordPress admin area.
After that, you can configure the image sizes that will show up in your menu. You can leave the sizes to the default settings or adjust them according to your needs. Don’t forget to click the ‘Save Changes’ button.
Once that’s done, you will need to go to Appearance » Menus from your WordPress admin area.
Then, click the ‘create a new menu’ option.
Next, you can give a name for your menu and click the ‘Create Menu’ button.
Once your menu is created, go ahead and click on the ‘Custom Links’ menu item on your left. Then enter the URL of your social media page, add a link text, and click the ‘Add to Menu’ button.
When that’s done, click the ‘Save Menu’ button.
Now, if you hover over your newly created menu, you’ll see an option that says ‘Menu Image’. Simply click on the Menu Image option.
After that, a popup window will appear with all the settings for your social media icon. You can choose whether to use an image or an icon for your social media channel.
If you select the Image option, then you can upload an image of the social media platform by clicking the ‘Set image’ option. Similarly, you can also upload an image that will appear on hover and set the image size.
On the other hand, you can choose the Icon option and select the social media icon from the given list.
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.
Once you’re done, you can click the ‘Save’ button. Simply repeat the same to add as many social icons as you need.
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.
How to show icons of social profiles in footer?
If your site has a widget area for your footer you could use one of the plugins from our list below:
https://www.wpbeginner.com/plugins/best-social-media-plugins-for-wordpress/
I’ve got the social media icons on my website. How do I link those icons to my social media profiles?
You would have the menu items be custom URLs
Thanks for this, I’ve managed to add the Goodreads logo to my Social Menu and chose the Social Menu location too. However when I view the page it shows the magnifying glass next to the new Goodreads logo, rather than just the logo on it’s own – why is this and how do I get rid of it?
You would want to check with your theme’s support to see if this is due to the design of the theme itself.
I added the social media menu but it’s not showing on my site. What can I do?
We would first recommend reaching out to the plugin’s support for them to take a look and ensure this isn’t a hiccup with the plugin.
Love this, but the icons are displayed in a column rather than next to each other. How can I fix this?
It would depend on your specific theme, you would first want to check with your theme’s support to ensure it is not an issue with how their menu is styled that could be causing that.
What? No icons? Find our own?
We do not have a specific set we would recommend at the moment but there are many different options available depending on the style you’re looking for.
Setting up a social link on my site does not match the images in this article (perhaps our parent organization’s customization blocks that).
You would want to ensure you are an admin user and the site is on WordPress.org for the most likely reasons. You can see our comparison in our guide below:
https://www.wpbeginner.com/beginners-guide/self-hosted-wordpress-org-vs-free-wordpress-com-infograph/
Hi,
Once again, a great and helpful tutorial. I’m just facing one issue, though. For the last step, when I try to select the menu location option, I can only see the primary menu option there. How do I get the social menu option as well?
Your specific theme may not have a social specific menu location. If you reach out to your theme’s support they can clarify and assist.
I’m trying to get my head round how to add social media accounts to my WordPress blogsite. Any assistance appreciated. If I’ve skipped an earlier step in setting up the site, my apologies in advance for a stupid comment!
No worries, it depends on what you’re looking for. For a starting point, we would recommend taking a look at our recommended plugins below:
https://www.wpbeginner.com/plugins/best-social-media-plugins-for-wordpress/
amazing tutorial keep it up
Glad you found our guide helpful
Thank you! Very clear instructions. Helped this newbie enormously.
Glad our guide was helpful
Thank you so very much for this video.
You’re welcome
Icons are appearing without color … wonder what I did wrong?
You may want to check with the support for your specific theme to ensure there isn’t theme-specific CSS changing your colors.
Hello, is there a way to space the icons farther apart from one another? Mine seem to be too close to each other…. Thank you
That would normally require changing CSS, for a starting point you may want to take a look at our article here:
https://www.wpbeginner.com/wp-tutorials/basics-of-inspect-element-with-your-wordpress-site/
I tried to hide the title from being shown on the menu. Seems like that function didn’t work. the title is still visible.
You would want to check with the support for your specific theme to see if that would be overriding your customizations
Hi! I tried using this method but I didn’t get the “select image” part. I only get to introduce the URL and Navigation Label… any ideas?
You may want to ensure the plugin was fully installed and activated for the select image to appear
Thank you! Seems to be a better working solution than with font awesome! Is it allowed though to just use a e.g. facebook icon picture from google pictures then for the image I upload?
You would want to be sure to check the image usage rights if you take an image off of Google but if you are allowed to use it you could upload it to your site.
I followed the directions for adding social images to my footer area and the Google & Yelp images aren’t visible. I did them the same way as those displayed. This does not appear to be browser related. Any suggestions
Start by reaching out to the plugin’s support to ensure there aren’t any known issues with those icons or how the menu is being added
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.