Adding Content to Genesis Navigation

Genesis comes with a feature called Primary Navigation Extras, which let’s you stick the following at the end of the primary navigation: Date, RSS Feed, Search, or Twitter link. But for a project I’m working on now, I wanted something more custom.

This tutorial will show you how to customize the navigation area. I’ll be sticking a “Follow” section at the end of the navigation with links to an RSS feed and Twitter profile. You can use this technique to do almost anything to the navigation – stick something before it, after it, or modify the navigation’s output itself.

I’m going to walk you through the code, so skip to the end if you just want the functioning code.

Setting up the Filter

The best way to modify Genesis (and any other theme framework for that matter) is with functions attached to actions and filters.  If you’d like a review, take a look at the Plugin API in the Codex.

I’m going to create a function called follow_icons() and attach it to two different filters, genesis_nav_items and wp_nav_menu_items. Which filter is actually used depends on what type of menu you select in the Genesis Options, so include them both for compatibility.

<?php
add_filter( 'genesis_nav_items', 'be_follow_icons', 10, 2 );
add_filter( 'wp_nav_menu_items', 'be_follow_icons', 10, 2 );
/**
* Follow Icons in Menu
* @author Bill Erickson
* @link http://www.billerickson.net/genesis-wordpress-nav-menu-content/
*
* @param string $menu
* @param array $args
* @return string
*/
function be_follow_icons($menu, $args) {
return $menu;
}
view raw gistfile1.aw hosted with ❤ by GitHub

This code isn’t really doing anything yet. It’s pulling in the content of the nav menu and sending it right back out. The first condition of the add_filter specifies the filter you want to work with. The second is the function you want attached to that filter. The third is the priority (10 is default), and the fourth is the number of arguments used (I’m only using 1).

Add your Changes

Once you have the basic filter set up, you can jump in and add your modifications.

<?php
add_filter( 'genesis_nav_items', 'be_follow_icons', 10, 2 );
add_filter( 'wp_nav_menu_items', 'be_follow_icons', 10, 2 );
/**
* Follow Icons in Menu
* @author Bill Erickson
* @link http://www.billerickson.net/genesis-wordpress-nav-menu-content/
*
* @param string $menu
* @param array $args
* @return string
*/
function be_follow_icons($menu, $args) {
if ( 'primary' !== $args['theme_location'] )
return $menu;
$follow = '<li id="follow">Follow: RSS and Twitter</li>';
return $menu . $follow;
}
view raw gistfile1.aw hosted with ❤ by GitHub

In the first line I’ve created a variable called $follow which will contain the code I’m adding, and the second line sticks my new code to the end of the existing navigation content. This just contains static text right now, which I’ll be replacing next with some more code.

<?php
add_filter( 'genesis_nav_items', 'be_follow_icons', 10, 2 );
add_filter( 'wp_nav_menu_items', 'be_follow_icons', 10, 2 );
/**
* Follow Icons in Menu
* @author Bill Erickson
* @link http://www.billerickson.net/genesis-wordpress-nav-menu-content/
*
* @param string $menu
* @param array $args
* @return string
*/
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;
}
view raw gistfile1.aw hosted with ❤ by GitHub

I’ve turned the static RSS and Twitter text into links and images. Here’s what each one means:

  • get_bloginfo('rss_url'); – This is the link to the RSS feed. The reason I didn’t hardcode an RSS feed link in is if you change your RSS feed using the Genesis Options, this will automatically be updated. This code also works on any site now, not just the one I built this for (always try and make your code easily reusable for future projects).
  • get_bloginfo('stylesheet_directory'); – This is the link to your child theme’s directory. I have an image for the RSS feed and Twitter uploaded in the images directory of the child theme.
  • esc_url() – Any time you’re using data created by a person, you want to escape it. Escaping it ensures that untrusted text can’t do damage to your site (more info here). I have to thank Aaron Brazell for teaching me this.
  • genesis_get_option('nav_extras_twitter_id') – In the Genesis Options panel, inside Primary Navigation Extras is a box to type your twitter username. This function pulls the content of that box.

From there, you can use CSS to style it how you want.

This technique can be used to do anything to the navigation. You could stick something to the beginning or modify the $output to change the navigation itself.

Bill Erickson

Bill Erickson is the co-founder and lead developer at CultivateWP, a WordPress agency focusing on high performance sites for web publishers.

About Me
Ready to upgrade your website?

I build custom WordPress websites that look great and are easy to manage.

Let's Talk

Reader Interactions

Comments are closed. Continue the conversation with me on Twitter: @billerickson

Comments

  1. Brad Dalton says

    Hi Bill

    I’ve just published a post about how to add genesis search to any Genesis nav menu using some PHP code which is different to yours.

    You could also use the code to add Google custom search in the nav menu.

  2. Jason Saeler says

    Is this code supposed to place a menu item in the Genesis theme options for primary navigation extras, or do we just set that to none? Asking, because the latter is what I am seeing and if not set to none, it’s loading both your code and the original extra.

    In case needed; I’m using a relatively un-modified version of Associate with the newly released Genesis 2.0

    • Bill Erickson says

      This code simply adds content to the navigation (as the title says). It does not remove existing extras being added to the navigation, nor does it add an option to the Theme Settings page.

      If you don’t want the Genesis navigation extras showing up in the menu alongside your code, set them to “None”.

  3. Steve says

    Good tutorial, I am working on a genesis framework, was trying to add custom menu with custom option in the backend, I am working on it , and your code of menu helped to acheive some of the options, now working on the rest!
    Thanks for sharing these!

  4. Daniel says

    Bill, I am trying to do something a bit different from what you are doing here. For my purposes, I want to be able to add an image UNDER the navigation bar, so that I can conditionally insert different images depending on which page is being displayed. How can I do this? It looks like your code here can be adjusted for such a purpose…

  5. Brady says

    Thanks Bill, I’ve been looking all over for this. It would be awesome if this was a plugin, but I guess I’ll just have to go set it up in the theme manually for now. Either way, a big help, thanks again.

  6. Jack Tummers says

    I’m looking for a way to add the search form at the end of a custom form in the Header Right region of Genesis. There is no way to choose Primary Nav, because that will add it above or below the header. I created a custom menu, added it to the Header Right region, and now I would like to have the search form at the end.

    Any idea’s on this?

    http://www.jacktummers.nl

  7. Kevin says

    Hi, I am trying to get woocommerce search area to appear at the end (to the right) of the secondary menu. What would be the best way to do this?

    This is what i read and tried.. but it is missing some step i think.

    add_filter( ‘genesis_nav_items’, ‘search_field, 10, 2 );
    add_filter( ‘wp_nav_menu_items’, ‘search_field’, 10, 2 );

    function search_field’($menu, $args) {
    $args = (array)$args;
    if ( ‘secondary’ !== $args[‘theme_location’] )
    return $menu;
    ob_start();
    dynamic_sidebar(‘Search Menu’);
    $search= ob_get_clean();
    return $search . $menu;
    }

    I read this should make an extra widget area where I could put this search button widget to make it appear next to the secondary menu .. but nothing shows up. Do you see something that is off?

  8. Nathan says

    May I just ask why if you use one argument in the filter, you implement an integer of ‘2’ in the filter call? I’m just trying to wrap my head around filters a little better. I seem to understand actions a bit better than filters—I’m having difficulty understanding the difference between what arguments do, and what conditionals do.