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.

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.

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.

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.

chat49 Comments

  1. chad says

    Hi Bill,

    I would not really be exaggerating to say you have saved my life. Your tutorials and snippets are amazing and I can’t say enough how much I appreciate and benefit from them.

    I have used but modified the code above and have achieved what I need plus an unusual twist. There is now a ‘1’ in my navigation bar. I can’t figure it out for the life of me and would really appreciate it if you could have a look here – git://gist.github.com/1786595.git

    Thanks a ton for everything

    • Bill Erickson says

      I believe the issue is that dynamic_sidebar() echos the sidebar and then returns “true” if it worked. When you echo a variable that is set to “true” it shows up as 1.

      If you must use a sidebar, you’ll need to output buffer it. Try this: https://gist.github.com/1794879

      • chad says

        Thank a lot Bill. The code you supplied almost did the trick. A little tweaking and it is now perfect. Code posted with yours…

  2. says

    Hi Bill,
    Thanks for sharing this code. To me, as a novice it seems that in order to implement this code one would need to know how to make a plug in. I was wondering if making a plug in available so that it would be easy to implement would be difficult for this type of application. If it is not, I would greatly appreciate it.
    Thanks

    • Bill Erickson says

      This code can be added directly to your theme files, but could also be done by a plugin. Unfortunately I don’t have the time to turn it into a plugin (or to support that plugin), but you could hire a developer to do it for you.

  3. Chris says

    Hi Bill,

    This was amazingly helpful. I’ve implemented the code you recommended for chad above on my site.

    Quick question: is there a way to do the same thing chad did but also for the subnav? I’m pretty new at this and haven’t yet been able to figure it out. Any help is greatly appreciated!

    Thanks!
    Chris

  4. says

    Some might found this one helpful:

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

    function sws_social_icons($menu, $args) {
    $args = (array)$args;
    if ( ‘primary’ !== $args[‘theme_location’] )
    return $menu;
    ob_start();
    dynamic_sidebar(‘Social Menu’);
    $social = ob_get_clean();
    return $social . $menu;
    }

    It just makes an extra widget area in the primary navigation :)

  5. says

    Getting the following error:

    Fatal error: Cannot use object of type stdClass as array in /home/clicktruemedia/peytonwilliamsforcongress.com/va/wp-content/themes/politica/functions.php on line 31

    Referenced line is:

    if ( ‘secondary’ !== $args[‘theme_location’] )

    Have changed from ‘primary’ to ‘secondary’ b/c I need modification to appear in sub-nav.

    Does ‘theme_location’ need to be specified? I pasted it into my functions.php exactly as shown, but is this a placeholder for the actual path to the theme?

    • Bill Erickson says

      Hmm, it looks like the error is that your $args is an object, not an array. Try doing print_r( $args ); exit; to see what’s in the args, and then find the theme location. You might need to use $args->theme_location.

      I’ve never seen that issue before.

      • says

        Hi Bill,

        Thanks for the great tutorial, but when I pasted your code into my functions.php file, it gave me the same error that Jonah was getting:

        Fatal error: Cannot use object of type stdClass as array in /home/livephil/public_html/thetimoroustimes.com/wp-content/themes/child/functions.php on line 43

        Line 43 is:
        if ( ‘primary’ !== $args[‘theme_location’] )

        I did the print_r($args), and got the following:

        stdClass Object ( [menu] => [container] => [container_class] => [container_id] => [menu_class] => menu menu-primary superfish [menu_id] => [echo] => 0 [fallback_cb] => wp_page_menu [before] => [after] => [link_before] => [link_after] => [items_wrap] =>
        %3$s
        [depth] => 0 [walker] => [theme_location] => primary )

        Any tips on troubleshooting?

        Thanks!
        BJorn

        • Bill Erickson says

          It’s been a while since I’ve used this technique, but it looks like you’re getting an object, not an array, back. Try using $args->theme_location instead of $args[‘theme_location’]

          • says

            That was it, thanks! And I should have figured that out from your reply to Jonah, I wasn’t sure where to place the $args->theme location. Thanks again!

  6. Sabine says

    Thank you very much for sharing this Bill. As a Genesis newbie I was completely lost but thanks to your piece of code I was able to create a submenu drop down layer.

  7. Robert says

    This looks like the start of what I want to do. Seems a common request but I can find little help.
    I want to add the search form to the right side of the secondary nav. I tried the plugin Genesis Nav Menu Amplified but it breaks my template. Any help on this would be appreciated.

    • Robert says

      So here is what I did. I added a new widget section to the same position as the secondary nav and with css aligned the search form to the right of the navbar. Seems to work and is more flexible than coding this into the nav.

  8. Tiffany says

    “Genesis comes with a feature called Primary Navigation Extras” – where do I find this? I just want to add a search at the end of my nav bar.

    • Bill Erickson says

      Go to Genesis > Theme Settings > Navigation Settings. Make sure “Include Primary Navigation” is checked, then check “Enable Extras on the Right Side”, and select “Search Form”.

  9. says

    Hi Bill

    is there any way i can change where this ends up in the menu, at the moment it outputs the …etc as the first list item in the menu

    is it possible to have it so it becomes the last list item in the menu?

    • Jamie says

      hey guys…

      does anyone know the answer to this, getting our custom ‘li’ at the end of the menu instead of the beginning?

      really stuck on this one.

      • Bill Erickson says

        At the bottom of the code snippet you’ll see: return $menu . $follow;. Simply switch to the variables to make your custom code show at the beginning: return $follow . $menu;

        • Jamie says

          Ha ! GENIUS !!!

          and so simple. it was for a client, so was really important too..

          thanks champ, hugely appreciated :)

  10. says

    Hello Bill,I am looking forward to using the code you’ve offered here, but I am really new to all of this and don’t understand it fully.

    Do I simply paste this code at the bottom of the functions.php area? Also I would like to simply add a search bar on my secondary nav, do you have the code to make that work?

    Thanks in advance for your help!

    John

  11. says

    I’m so sorry, but even though I have been using Studio Press themes for over three years and modifying them mostly through CSS and slightly through modifying the functions.php file, I am not knowledgeable enough in PHP to understand your solution above. I want to add a Like Us on Facebook link to the right side of the primary navigation. Facebook provides the code. Is it possible to add this code the right side of the navigation bar?

    • Bill Erickson says

      Yes, it is possible to add that, but writing the code for you is outside the scope of free support I provide through my blog.

  12. says

    Hey! This is awesome, thx!

    2 Things:

    1. I used the code, and changed the links and images. It’s putting my three images to the right of the primary nav bar, which I want, but they’re stacked vertically. If I put “display: inline” one each on the “a” tags, I can get them to line up horizontally. However, for some reason, it doesn’t seem to be paying any attention to the class on my “a” tags. When I use the debugger in Chrome, it’s not showing the class elements on the right, even though it’s showing it in the HTML on the left. Any ideas?

    2. What’s the best way to insert an external URL into the “a” tag? (e.g. http://www.google.com)

  13. says

    Hi, I’m currently working on developing a child theme for genesis. You’re code was VERY helpful in getting what I wanted faster, however I wanted to take it a step further and add many other social media icons. I would like to be able to input the specific page urls for various social media sites (not just twitter) in the wp genesis admin and have a function pull that content into the function you wrote here, so that I (or others) could interact with the admin (and not have to mess with the functions.php file) to turn on and off various social icons, and input their individual urls. I guess what’d I’d like to do is “genericize” it further – the way you can input the twitter handle… Is this possible? Where would I even start? Is an explanation outside the scope of this comment section? It would be really great to know how to do this.
    Thanks in advance!

  14. Kearin says

    I used this method to add a menu-toggle button (needed to make the navigation a toggle button for smaller devices) inside the and right before . It is required that the toggle button be directly above the ul.

    Think this is the best approach or can I add an action that could place my toggle button Menu inside the add the custom nav action described above?

    To sum it up my code has to look like this:

    Menu

    Thanks.

  15. says

    Wow this is exactly what I was looking for, thanks Bill! And so simple too! I added it to my secondary nav and it works like a charm :) Just wanted to show my appreciation!

  16. Guido says

    (new comment, botched the link in the last one)

    Hi Bill,

    Thanks for writing this blog post.

    The first version of the code (that technically does nothing)… does nothing. So that’s good.
    The second and third code samples break my Studiopress Outreach child theme.

    After a bit of digging, I came across this post:
    http://www.billerickson.net/customizing-wordpress-menus/#extra-code
    Although that sample code did nothing either.

    However, by merging the two (replacing filters and renaming the function within the new filters), I came up with this code that actually works for me: http://codebin.org/view/073ef4cc

    I’ll try pasting it below, but I’m not sure if that will work. Either way, I hope this helps someone else!

  17. says

    Hi Bill

    It was a nice article. Actually I am developing a menu where I need to add div under sub menu.
    Here is the code which I am using

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

    function custom_sbmenu($menu, $args) {
    $args = (array)$args;
    if ( ‘primary’ !== $args[‘theme_location’] )
    return $menu;
    $follow = ‘Some Text and Images';
    return $menu . $follow;
    }

    The result is:
    —————–

    Menu Item 1
    Menu Item 2

    Menu Item 1
    Menu Item 2

    Menu Item 3
    Some Text and Images

    What I want to achieve is:
    ———————————-

    Menu Item 1
    Menu Item 2

    Menu Item 1
    Menu Item 2
    Some Text and Images

    Menu Item 3

    Please let me know what changes I need to do in my code? Looking forward to hear from you soon.

    Thanks.

  18. 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.

  19. 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”.

  20. 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!

  21. 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…

  22. 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.

  23. 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

Leave a Reply

If you'd like to include code in your post, please post it to http://gist.github.com and include a link.