WP SITES

2952 Tutorials & 191 Plugins

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.

[plugit]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.[/plugit]

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

7 responses to “Adding Social Media Buttons To The Genesis Navigation Menu”

  1. peaksmedia Avatar
    peaksmedia

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

    1. Brad Dalton Avatar
      Brad Dalton

      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.

      1. peaksmedia Avatar
        peaksmedia

        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,

        1. Brad Dalton Avatar
          Brad Dalton

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

  2. Debora Crosby Avatar
    Debora Crosby

    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!

  3. Frank Grimes Avatar
    Frank Grimes

    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.

    1. Brad Dalton Avatar
      Brad Dalton

      Hi frank

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

Was This Tutorial Helpful?