Adding Social Media Buttons To The Genesis Navigation Menu

Jun 20, 2012

—

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.

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.

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.

Comments

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

peaksmedia

January 17, 2016

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
1. Brad Dalton
  
  January 17, 2016
  
  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
  1. peaksmedia
    
    January 17, 2016
    
    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
    1. Brad Dalton
      
      January 17, 2016
      
      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
Debora Crosby

April 2, 2014

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
Frank Grimes

July 11, 2013

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
1. Brad Dalton
  
  July 11, 2013
  
  Hi frank
  
  Yes but they have to be sprites. You can see them in the plugin files.
  
  Log in to Reply