How To Add Social Buttons To Genesis Primary Navigation Bar

You might find it easy to display the search box, the current date or your RSS feed in the primary navigation bar of any Genesis theme with the options provided in the Genesis Theme settings page. But trying to display your custom widgets in the primary navigation, such as custom social buttons could be a little tricky in the framework unlike usual wordpress themes where you can easily input your codes in the header.php file of your theme.

In this guide, I’ll show you how you can add whatever custom code into your Genesis Child Theme’s primary navigation bar by simply adding a little code into your theme’s function.php file.

Adding Social Media Icons To Genesis Nav Bar

1. Edit the functions.php file of your Genesis Child Theme and add the below code in the very last line.

** Adding Social Buttons To Primary Navigation */
add_filter( 'genesis_nav_items', 'be_follow_icons', 10, 2 );
add_filter( 'wp_nav_menu_items', 'be_follow_icons', 10, 2 );
function be_follow_icons($menu, $args) {
$args = (array)$args;
if ( 'primary' !== $args['theme_location']  )
return $menu;
$follow = '<li id="follow">Follow: <a rel="nofollow" class="rss" href="'.get_bloginfo('rss_url').'"><img src="'.get_bloginfo('stylesheet_directory').'/images/feed.png" /></a> <a rel="nofollow" class="twitter" href="'.esc_url( 'http://twitter.com/' .genesis_get_option('nav_extras_twitter_id') ).'"><img src="'.get_bloginfo('stylesheet_directory').'/images/twitter.png" /></a></li>';
return $menu . $follow;
}

2. Then Save.

Here is how the code works.

1. You have to upload your feed.png and twitter.png images (icons) into the image directory of your child theme. These icons would display in the navigation bar.

2. An option for your twitter details would be displayed in the Genesis settings page of your theme.

Now Your Turn

You can make use of this same process to add other social icons such as facebook, google Plus and more.

I hope these helps.