1

I have a shortcode that (among other things) echoes out a menu using wp_nav_menu like so

if ( ! function_exists( 'foundationPress_main_nav' ) ) {
    function foundationPress_main_nav() {
        wp_nav_menu(array( 
            'container' => false,                           // remove nav container
            'container_class' => '',                        // class of container
            'menu' => '',                                   // menu name
            'menu_class' => '',                             // adding custom nav class
            'theme_location' => 'main-nav',                 // where it's located in the theme
            'before' => '',                                 // before each link <a> 
            'after' => '',                                  // after each link </a>
            'echo' => true,
            'link_before' => '',                            // before each link text
            'link_after' => '',                             // after each link text
            'depth' => 2,                                   // limit the depth of the nav
            'fallback_cb' => false,                         // fallback function (see below)
            // 'walker' => new FoundationPress_top_bar_walker()
        ));
    }
}

The menu is registered register_nav_menus(array('main-nav' => 'Main Navigation',)); and set up within the Wordpress admin.

Here's where it's behaving oddly: it doesn't render within the element I'm echoing it in. So for example if the code in the shortcode is something like:

<nav>
<?php foundationPress_main_nav(); ?>
</nav>

Instead of the menu appearing within the <nav> element (around the middle of the page, below the fold) it appears at the top of the page, and is the first element nested within div.entry-content.

Any ideas why it's sort of hooking to the top of the page this way instead of rendering within the element it's actually nested in?

(I'm using the FoundationPress framework to build the theme and I've made plenty of menus before, not sure if I'm missing something apparent)

For more detail, here's the entire shortcode, although only the last few lines are relevant to the issue:

function rvr_cards_carousel( $atts ) {
     $atts = shortcode_atts( 
          array(

               'background'   => '',
               'load'         => '10',

          ), $atts, 'rvr_cards' );

     $args = array(
          'post_type'         => 'cards',
          'posts_per_page'    => $atts['load'],
          'order'           => 'ASC',
     );

     $cards_query = new WP_Query( $args );

     $output = '';

     if( $cards_query->have_posts() ) : 

          if( ! empty( $atts['background'] ) ) {

               $output .= '<div class="cards-carousel-container row full-width" style="background: url('.$atts["background"].') no-repeat left top / cover;">';

          } else {
               $output .= '<div class="cards-carousel-container row full-width">';
          }

          $output .= '<ul class="cards-carousel" data-equalizer>';

     while( $cards_query->have_posts() ) : $cards_query->the_post();

          $output .= '<li>';
          $output .= '<div class="inner" data-equalizer-watch>';
          $output .= get_the_content();
          $output .= '<div class="card-divider"></div>';
          $output .= '<h6 class="card-author">'.get_the_title().'</h6>';
          $output .= '<div class="card-symbol"></div>';
          $output .= '</div>';
          $output .= '</li>';

     endwhile;
     endif;
     wp_reset_postdata(); 

          $cardnav = "enabled";
          $output .= '</ul>';
          if ($cardnav = "enabled") { 
               $output .= '<div class="four columns"></div>';
               $output .= '<nav class="contain-to-grid eight columns primary-nav" id="home-card-nav">';
               $output .= foundationPress_main_nav();
               $output .= '<div id="card-nav-overflow"></div></nav>';
          }
          $output .= '</div>';

     echo $output;

}
add_shortcode( 'rvr_cards', 'rvr_cards_carousel' );

Here's an image depicting the shortcode, where the menu should be and where it is. You can also access the live page here.image of wp nav issue where menu is not contained by parent element

  • Where is the code for your shortcode? You can't echo in a shortcode, so if your shortcode is just using foundationPress_main_nav function then its not going to work. – ngearing Sep 8 '15 at 5:09
  • I've added more details with the specific shortcode code and an image as well as a link. I will try it without the echo parameter. – Orun Sep 8 '15 at 13:46
  • Doesn't seem to matter if I return the output or echo it, either way the navigation does not contain within the parent – Orun Sep 8 '15 at 14:35
  • Thanks for updating. On the live page it looks fine to me. Either you have fixed it or its a browser/css issue. – ngearing Sep 9 '15 at 0:49
  • Hi Nath, I did fix it by enabling it as a theme option that is included in a page template, but I still don't know what exactly caused it. I tried returning every which way, but no matter what I did as long as the function was in the shortcode it wouldn't contain within the parent. As soon as I took it out of the shortcode and put it somewhere else (page template) it loaded correctly. – Orun Sep 9 '15 at 21:32
3

'echo' => true needs to be 'echo' => false in your wp_nav_menu array for it to nest. From the docs you'll find

'echo' (bool) Whether to echo the menu or return it. Default true.

so what's happening is the wp_nav_menu isn't being returned but just echoed, so doesn't nest.

1

In shortcode use "return" instead of "echo".

Shortcode with "echo" display the content in the moment it's parsed - before the post content, that's why it displays on top.

With "return" it will display the menu in the place where shortode is called.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.