WPBeginner

Beginner's Guide for WordPress

  • Blog
    • Beginners Guide
    • News
    • Opinion
    • Showcase
    • Themes
    • Tutorials
    • WordPress Plugins
  • Start Here
    • How to Start a Blog
    • Create a Website
    • Start an Online Store
    • Best Website Builder
    • Email Marketing
    • WordPress Hosting
    • Business Name Ideas
  • Deals
    • Bluehost Coupon
    • SiteGround Coupon
    • WP Engine Coupon
    • HostGator Coupon
    • Domain.com Coupon
    • Constant Contact
    • View All Deals »
  • Glossary
  • Videos
  • Products
X
☰
Beginner's Guide for WordPress / Start your WordPress Blog in minutes
Choosing the Best
WordPress Hosting
How to Easily
Install WordPress
Recommended
WordPress Plugins
View all Guides

WPBeginner» Blog» Plugins» How to Add Social Media Icons to WordPress Menus

How to Add Social Media Icons to WordPress Menus

Last updated on November 21st, 2018 by Editorial Staff
523 Shares
Share
Tweet
Share
Pin
Free WordPress Video Tutorials on YouTube by WPBeginner
How to Add Social Media Icons to WordPress Menus

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.

How to Add Social Media Icons in Menu

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.

Video Tutorial

Subscribe to WPBeginner

If you don’t like the video or need more instructions, then continue reading.

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.

New social 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.

Set menu icon

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.

Social icon size

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.

Menu title position

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.

Menu display location

Now you can visit your website to see the social media icons in your WordPress menu.

Social media 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.

Social menu in widget

In the Select Menu dropdown, you should select the social menu that you created above and click on the ‘Save’ button.

Social menu in sidebar

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.

523 Shares
Share
Tweet
Share
Pin
Popular on WPBeginner Right Now!
  • How to Properly Move Your Blog from WordPress.com to WordPress.org

  • Revealed: Why Building an Email List is so Important Today (6 Reasons)

    Revealed: Why Building an Email List is so Important Today (6 Reasons)

  • Checklist

    Checklist: 15 Things You MUST DO Before Changing WordPress Themes

  • Google Analytics in WordPress

    How to Install Google Analytics in WordPress for Beginners

About the Editorial Staff

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi. Trusted by over 1.3 million readers worldwide.

The Ultimate WordPress Toolkit

49 Comments

Leave a Reply
  1. Vicki says:
    Feb 1, 2021 at 9:53 am

    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?

    Reply
    • WPBeginner Support says:
      Feb 2, 2021 at 9:46 am

      You would want to check with your theme’s support to see if this is due to the design of the theme itself.

      Reply
  2. Danielle says:
    Oct 14, 2020 at 11:01 pm

    I added the social media menu but it’s not showing on my site. What can I do?

    Reply
    • WPBeginner Support says:
      Oct 15, 2020 at 10:31 am

      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.

      Reply
  3. Lisa Jackson says:
    Sep 30, 2020 at 5:55 am

    Love this, but the icons are displayed in a column rather than next to each other. How can I fix this?

    Reply
    • WPBeginner Support says:
      Sep 30, 2020 at 9:38 am

      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.

      Reply
  4. andi moss says:
    Sep 21, 2020 at 7:13 pm

    What? No icons? Find our own?

    Reply
    • WPBeginner Support says:
      Sep 22, 2020 at 10:09 am

      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.

      Reply
  5. Bob Wright says:
    Sep 10, 2020 at 3:25 pm

    Setting up a social link on my site does not match the images in this article (perhaps our parent organization’s customization blocks that).

    Reply
    • WPBeginner Support says:
      Sep 11, 2020 at 10:57 am

      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/

      Reply
  6. Ankit says:
    Jul 24, 2020 at 4:58 pm

    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?

    Reply
    • WPBeginner Support says:
      Jul 27, 2020 at 11:41 am

      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.

      Reply
  7. Jonathan says:
    Jun 9, 2020 at 12:35 pm

    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!

    Reply
    • WPBeginner Support says:
      Jun 10, 2020 at 8:47 am

      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/

      Reply
  8. Elder Designer says:
    May 20, 2020 at 11:22 pm

    amazing tutorial keep it up

    Reply
    • WPBeginner Support says:
      May 21, 2020 at 8:54 am

      Glad you found our guide helpful :)

      Reply
  9. Stephanie Strand says:
    Apr 15, 2020 at 9:40 am

    Thank you! Very clear instructions. Helped this newbie enormously.

    Reply
    • WPBeginner Support says:
      Apr 16, 2020 at 8:39 am

      Glad our guide was helpful :)

      Reply
  10. Rupali Tripathi says:
    Apr 2, 2020 at 2:18 pm

    Thank you so very much for this video.

    Reply
    • WPBeginner Support says:
      Apr 3, 2020 at 9:14 am

      You’re welcome :)

      Reply
  11. Debbie Serjeant says:
    Mar 1, 2020 at 1:44 pm

    Icons are appearing without color … wonder what I did wrong?

    Reply
    • WPBeginner Support says:
      Mar 2, 2020 at 11:45 am

      You may want to check with the support for your specific theme to ensure there isn’t theme-specific CSS changing your colors.

      Reply
  12. Isaac says:
    Nov 12, 2019 at 5:52 pm

    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

    Reply
    • WPBeginner Support says:
      Nov 13, 2019 at 10:34 am

      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/

      Reply
  13. Sam Simson says:
    Aug 19, 2019 at 2:46 pm

    I tried to hide the title from being shown on the menu. Seems like that function didn’t work. the title is still visible.

    Reply
    • WPBeginner Support says:
      Aug 20, 2019 at 10:37 am

      You would want to check with the support for your specific theme to see if that would be overriding your customizations

      Reply
  14. Tracy says:
    Aug 12, 2019 at 11:11 pm

    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?

    Reply
    • WPBeginner Support says:
      Aug 13, 2019 at 10:13 am

      You may want to ensure the plugin was fully installed and activated for the select image to appear

      Reply
  15. Lea says:
    Aug 6, 2019 at 10:48 am

    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?

    Reply
    • WPBeginner Support says:
      Aug 7, 2019 at 9:51 am

      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.

      Reply
  16. Larry Hilton says:
    May 7, 2019 at 3:49 pm

    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

    Reply
    • WPBeginner Support says:
      May 8, 2019 at 10:54 am

      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

      Reply
  17. Michele A says:
    Mar 25, 2019 at 11:02 pm

    Thank you for this wonderful tutorial!! It has helped me beyond words. Thank you!

    Reply
    • WPBeginner Support says:
      Mar 26, 2019 at 11:35 am

      Glad our guide could help :)

      Reply
  18. Muneeb says:
    Feb 6, 2019 at 12:30 pm

    Icons are currently on the site but don’t work even link is added. whats the reason?

    Reply
    • WPBeginner Support says:
      Feb 7, 2019 at 10:57 am

      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.

      Reply
  19. Mr. Debtsmith says:
    Jan 8, 2019 at 8:49 pm

    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!

    Reply
    • WPBeginner Support says:
      Jan 9, 2019 at 11:19 am

      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.

      Reply
  20. ARPIT says:
    Dec 29, 2018 at 7:59 am

    Thank You Very Much for Essential Information that I was Seeking on the Internet.
    Highly Appreciated.

    Reply
    • WPBeginner Support says:
      Dec 31, 2018 at 3:14 pm

      Glad our article could be helpful to you.

      Reply
  21. Dan says:
    Dec 23, 2018 at 3:02 pm

    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?

    Reply
    • WPBeginner Support says:
      Dec 25, 2018 at 12:48 am

      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.

      Reply
  22. David Cornish says:
    Dec 2, 2018 at 10:59 pm

    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?

    Reply
    • WPBeginner Support says:
      Dec 3, 2018 at 10:14 pm

      Hi David,

      Please see our list of the best social media plugins for WordPress.

      Reply
  23. Rob Lilley says:
    Nov 22, 2018 at 1:31 pm

    Is there a way to add a target attribute, so the social page opens in a new tab/window?

    Reply
    • Editorial Staff says:
      Nov 28, 2018 at 8:29 am

      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.

      Reply
  24. Umarbhatti says:
    Nov 22, 2018 at 7:27 am

    Hi,
    This plugin looks awesome. Thanks!

    Reply
  25. Aman Singh says:
    Nov 22, 2018 at 1:49 am

    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.

    Reply
    • WPBeginner Support says:
      Nov 22, 2018 at 7:22 am

      Hi Aman,

      You can just use your browser’s Inspect tool to copy the HTML code and CSS.

      Reply

Leave a Reply Cancel reply

Thanks for choosing to leave a comment. Please keep in mind that all comments are moderated according to our comment policy, and your email address will NOT be published. Please Do NOT use keywords in the name field. Let's have a personal and meaningful conversation.

Over 1,320,000+ Readers

Get fresh content from WPBeginner

Featured WordPress Plugin
WPForms Logo
WPForms
Drag & Drop WordPress Form Builder Plugin. Learn More »
How to Start a Blog How to Start a Blog
I need help with ...
Starting a
Blog
WordPress
Performance
WordPress
Security
WordPress
SEO
WordPress
Errors
Building an
Online Store
Useful WordPress Guides
    • 7 Best WordPress Backup Plugins Compared (Pros and Cons)
    • How to Fix the Error Establishing a Database Connection in WordPress
    • Why You Need a CDN for your WordPress Blog? [Infographic]
    • 30 Legit Ways to Make Money Online Blogging with WordPress
    • Self Hosted WordPress.org vs. Free WordPress.com [Infograph]
    • Free Recording: WordPress Workshop for Beginners
    • 24 Must Have WordPress Plugins for Business Websites
    • How to Properly Move Your Blog from WordPress.com to WordPress.org
    • 5 Best Contact Form Plugins for WordPress Compared
    • Which is the Best WordPress Popup Plugin? (Comparison)
    • Best WooCommerce Hosting in 2021 (Comparison)
    • How to Fix the Internal Server Error in WordPress
    • How to Install WordPress - Complete WordPress Installation Tutorial
    • Why You Should Start Building an Email List Right Away
    • How to Properly Move WordPress to a New Domain Without Losing SEO
    • How to Choose the Best WordPress Hosting for Your Website
    • How to Choose the Best Blogging Platform (Comparison)
    • WordPress Tutorials - 200+ Step by Step WordPress Tutorials
    • 5 Best WordPress Ecommerce Plugins Compared
    • 5 Best WordPress Membership Plugins (Compared)
    • 7 Best Email Marketing Services for Small Business (2021)
    • How to Choose the Best Domain Registrar (Compared)
    • The Truth About Shared WordPress Web Hosting
    • When Do You Really Need Managed WordPress Hosting?
    • 5 Best Drag and Drop WordPress Page Builders Compared
    • How to Switch from Blogger to WordPress without Losing Google Rankings
    • How to Properly Switch From Wix to WordPress (Step by Step)
    • How to Properly Move from Weebly to WordPress (Step by Step)
    • Do You Really Need a VPS? Best WordPress VPS Hosting Compared
    • How to Properly Move from Squarespace to WordPress
    • How to Register a Domain Name (+ tip to get it for FREE)
    • HostGator Review - An Honest Look at Speed & Uptime (2021)
    • SiteGround Reviews from 4464 Users & Our Experts (2021)
    • Bluehost Review from Real Users + Performance Stats (2021)
    • How Much Does It Really Cost to Build a WordPress Website?
    • How to Create an Email Newsletter the RIGHT WAY (Step by Step)
    • Free Business Name Generator (A.I Powered)
    • How to Create a Free Business Email Address in 5 Minutes (Step by Step)
    • How to Install Google Analytics in WordPress for Beginners
    • How to Move WordPress to a New Host or Server With No Downtime
    • Why is WordPress Free? What are the Costs? What is the Catch?
    • How to Make a Website in 2021 – Step by Step Guide
Deals & Coupons (view all)
LiveChat logo
LiveChat Inc Coupon
Get a 30 day free trial and 30% OFF LiveChat, one of the best live chat service providers for WordPress users.
LearnDash
LearnDash Coupon
Get the lowest price on the best learning management system (LMS) plugin for WordPress.
Featured In
About WPBeginner®

WPBeginner is a free WordPress resource site for Beginners. WPBeginner was founded in July 2009 by Syed Balkhi. The main goal of this site is to provide quality tips, tricks, hacks, and other WordPress resources that allows WordPress beginners to improve their site(s).

Join our team: We are Hiring!

Site Links
  • About Us
  • Contact Us
  • FTC Disclosure
  • Privacy Policy
  • Terms of Service
  • Free Blog Setup
  • Free Business Tools
  • Growth Fund
Our Sites
  • OptinMonster
  • MonsterInsights
  • WPForms
  • SeedProd
  • Nameboy
  • RafflePress
  • Smash Balloon
  • AIOSEO

Copyright © 2009 - 2021 WPBeginner LLC. All Rights Reserved. WPBeginner® is a registered trademark.

Managed by Awesome Motive | WordPress hosting by SiteGround | WordPress Security by Sucuri.