• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

WP SITES

2787

Original Genesis & WooCommerce Tutorials & 6000+ Guaranteed Code

Snippets

  • Try Premium
  • Log in

Adding Social Media Buttons To The Genesis Navigation Menu

I’ve already written about how to add social media buttons to the Thesis nav menu but how about if you’re using Genesis or a Studiopress theme?

Note: A better option is to add a new widget area in your nav menu. See the related links at the end of the post

That’s what this tutorials about.

A really simple way to add the buttons after creating new custom menu items.

No real coding needed as we’re going to use a plugin to handle all the heavy lifting.

First step is to install the Genesis Social Profiles Menu Plugin. You can download the plugin or search for it in the WordPress plugin directory.

Once you’ve activated the plugin, its simply a matter of creating new menu items.

Go to Appearance > Menus and add a custom link for each social button you want to add.
Custom Menu Items

Screen Options > Advanced Menu Properties

Next step is to display  CSS classes for your custom menu items.

Go to Screen Options > and check the CSS classes box as shown in the image below.

css classes

Now add the link to your social profile.

Also add one of the css classes from the list below.

These include the size of the button which will be displayed.

Keep the Navigation label short so it only takes up a small section of your menu.

In this example, i’ve used one letter for each nav label.

Twitter in Nav Menu

CSS Classes & Social Button Sizes

  • Feed: feed-prl-s16 / feed-prl-s24 / feed-prl-s32
  • Twitter: twitter-prl-s16 / twitter-prl-s24 / twitter-prl-s32
  • Facebook: facebook-prl-s16 / facebook-prl-s24 / facebook-prl-s32
  • Flickr: flickr-prl-s16 / flickr-prl-s24 / flickr-prl-s32
  • Google Plus, black version: google-prl-s16 / google-prl-s24 / google-prl-s32
  • Google Plus, red version: google2-prl-s16 / google2-prl-s24 / google2-prl-s32
  • Pinterest: pinterest-prl-s16 / pinterest-prl-s24 / pinterest-prl-s32
  • LinkedIn: linkedin-prl-s16 / linkedin-prl-s24 / linkedin-prl-s32
  • YouTube: youtube-prl-s16 / youtube-prl-s24 / youtube-prl-s32

This is the easiest way to add your social links so they display in your menu on every page.

You could also create conditional menus so your social buttons only display on a nav menu used on specific pages or posts.

Related Tutorials

  • Add Twitter Button To WP Nav Menu
  • Add Widget in Nav Menu

Reader Interactions

Comments

  1. peaksmedia says

    January 17, 2016 at 2:08 am

    I can’t seem to find this plugin? Searched for “Genesis Social Profiles Menu” but no luck. Has the plugin been removed?

    Log in to Reply
    • Brad Dalton says

      January 17, 2016 at 2:23 am

      Looks like they have removed it from WordPress.org. Try this https://github.com/wp-plugins/genesis-social-profiles-menu

      Or

      You can create a widget area in your nav menu and use the Simple Social Icons plugin.

      Log in to Reply
      • peaksmedia says

        January 17, 2016 at 7:07 am

        Thanks Brad, sadly it didn’t work., downloaded and installed but all I get is the letter F, no icon.

        I was trying to take the easy way out but will have to give the link for creating a widget area a try. Thank you,

        Log in to Reply
        • Brad Dalton says

          January 17, 2016 at 7:09 am

          Yes. I think the plugin developer has lost interest in future development however you’ll find the widget very easy to add.

          Log in to Reply
  2. Debora Crosby says

    April 2, 2014 at 9:59 pm

    Fantastic post. So easy to do! Thank you! Just one thing –
    Where can I find the custom CSS for Yelp?

    Thanks again for this tutorial!

    Log in to Reply
  3. Frank Grimes says

    July 11, 2013 at 12:13 am

    Great article, Brad. After reading this, I installed the plugin, and it works great. One question though, how can I change or add custom icons? There’s a couple that I would really like to substitute with icons I’ve designed.

    Log in to Reply
    • Brad Dalton says

      July 11, 2013 at 9:32 am

      Hi frank

      Yes but they have to be sprites. You can see them in the plugin files.

      Log in to Reply

Leave a Reply Cancel reply

You must be logged in to post a comment.

Primary Sidebar

Code written by Brad Dalton specialist for Genesis, WooCommerce & WordPress theme customization. Read More…

Advertise · WPEngine · Genesis · Log in

  • Access Problems
  • Account Details
  • Consulting
  • Tags
 

Loading Comments...
 

You must be logged in to post a comment.