Create a Widget Area in the Navigation Bar for the Genesis Theme Framework?

2 Views

(Moderator’s note: The original title was “How can I create a widget area in the navigation bar (Genesis specific)?”(

I’m trying to create a widget area in my navigation bar. I’m attempting to adapt this from Bill Erickson’s excellent tutorial here on adding static content to the navigation bar.

Read More

This is the code I’ve added to my functions.php file to register and place the widget area: 

    genesis_register_sidebar(array(
    'name'=>'Nav Right',
    'description' => 'This is the right section of the navbar.',
    'before_widget' => '<div id="%1$s" class="widget %2$s">', 'after_widget'  => '</div>',
    'before_title'=>'<h4 class="widgettitle">','after_title'=>'</h4>'
));

//Adding the widget area to the navbar
add_filter('genesis_nav_items','navbar_widget',10,1);
add_filter('wp_nav_menu_items','navbar_widget',10,1);
function navbar_widget() {
    ?>
    <div class="nav_right">
    <?php if (!dynamic_sidebar('Nav Right')) : ?>
            <div class="widget">
            <h4><?php _e("Nav Right", 'genesis'); ?></h4>
            <p><?php _e("This is a widgeted area which is called Nav Right.", 'genesis'); ?></p>
        </div>
    <?php endif; ?>
    </div><!-- end .nav-right -->
    <?php
}

However, what I end up with is this:

alt text

With the widget area outside of the navigation bar (and the links removed from the navigation bar – there should be a Home and About link there).

This is the html (when I view source of the page): 

<body class="home blog logged-in content-sidebar"> 
 <div id="wrap"> 
<div id="header"><div class="wrap"><div id="title-area"><h1 id="title"><a href="http://travisnorthcutt.com/gateway/" title="Research Valley International Gateway">Research Valley International Gateway</a></h1><p id="description">Just another WordPress site</p></div><!-- end #title-area --><div class="widget-area"></div><!-- end .widget_area --></div><!-- end .wrap --></div><!--end #header--> 
   <div class="nav_right">
                <div class="widget">
            <h4>Nav Right</h4>
            <p>This is a widgeted area which is called Nav Right.</p>
        </div>
        </div><!-- end .nav-right -->
  <div id="nav"><div class="wrap"></div></div>

Any suggestions on how to get the new widget area that is created to be within <div id="nav"></div>?

Post Views: 2

Related posts

Leave a Reply

1 comment

  1. You are adding filter, not an action. I don’t know how Genesis hook works, but native wp_nav_menu_items passes (and expects back) markup of custom menu items.

    Instead of echoing your additional stuff you should append it to input and return.

    This is clearly how it’s done in tutorial you linked to:

    add_filter('wp_nav_menu_items','follow_icons',10,1);
function follow_icons($output) {
    $follow = 'some stuff';
    return $output.$follow;
}

    Upd. Forgot to add about sidebar part. Since sidebars are echoed by definition you will likely have to buffer its output to use in such fashion. Maybe instead of making widget ares literally inside menu it is better to look for hook that allows to do this nearby?