Close Menu
My SiteMy Site
  • Home
  • Reviews
  • Computers
  • How Tos
  • Travel & Lifestyle
  • Phone ROMs
  • Contact
    • Advertise
    • About Us
Facebook X (Twitter) Instagram
My SiteMy Site
  • Home
  • Reviews
  • Computers
  • How Tos
  • Travel & Lifestyle
  • Phone ROMs
  • Contact
    • Advertise
    • About Us
My SiteMy Site
Home»Web Design Tips»Wordpress»How To Add Social Buttons To Genesis Primary Navigation Bar
Wordpress

How To Add Social Buttons To Genesis Primary Navigation Bar

Oscar FrankBy Oscar Frank2 Mins Read
Share
Facebook Twitter LinkedIn WhatsApp Pinterest Email

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.

Genesis webdesign Wordpress

Related Posts

WordPress Blog Hosting made easy with SeekaHost Blog Hosting Control Panel

December 4, 2020

How to Create a Website with Elementor Page Builder in WordPress

April 1, 2019

Tomcat Based Java Hosting: A Beginner’s Guide

December 5, 2018
View 2 Comments

2 Comments

  1. Steve Breeze on May 17, 2014 2:33 am

    This is cool. From what I see, I guess the code filters the original primary navigation code and adds up a new version from scratch. Thanks Oscar, it’s quite intelligent.

    Reply
    • Oscar Frank on May 17, 2014 2:44 am

      You are right Steve, that’s how the code works. Thanks for coming by.

      Reply
Leave A Reply Cancel Reply

Recent Posts
  • 6 Sports Apps You Must Have On Your Phone
  • Valencia Travel Guide: All You Need to Know About This Spanish Gem
  • TikTok Faces Unexpected Ban in Senegal, Sparks Global Curiosity
  • The Apple GPT & Apple’s Chatbot Mysterious Debut
  • Triller Takes on TikTok: Filing for Public Listing
Get Exclusive Tech Insights!
My Site
Facebook X (Twitter) Instagram YouTube
© 2025 Oscarmini Co. Designed by illBytes.

Type above and press Enter to search. Press Esc to cancel.