WordPress.org

Ready to get started?Download WordPress

Forums

How to display specific items on wp_nav_menu (10 posts)

  1. marcomilic
    Member
    Posted 1 year ago #

    Hello,

    I need to break a one wp menu into several position on a template, something like this.

    [Item1 Item2 Item3] Logo [Item4 Item5 Item6]

    All items are from one WP menu.

    Is there any solution how dynamically to display specific array of menu items, from first to third or for forth to sixth item?

  2. keesiemeijer
    moderator
    Posted 1 year ago #

    If you want to show an image logo after the third item you could create a "Custom Link" for the fourth item and give it a class "nav_menu_logo". This in your theme's functions.php will show the image linked to your home page in the place of the "Custom Link":

    add_filter( 'walker_nav_menu_start_el', 'add_text_to_nav_menu', 10, 4);
    
    function add_text_to_nav_menu( $item_output, $item, $depth, $args) {
    
      if(isset($item->classes) && !empty($item->classes)){
        if(in_array('nav_menu_logo', (array) $item->classes)){
    
          // the link to the logo image
          // src="yoursite.com/wp-content/themes/images/logo.php"
    
          $item_output = '<a href="'.home_url().'"><img src="'.get_template_directory_uri().'/images/logo.jpg" /></a>';
    
        }
      }
    
      return $item_output;
    }

    You'll also need to put the image file (logo.jpg) in a folder called images in your theme folder or change the image url to the correct one in:

    $item_output = '<a href="'.home_url().'"><img src="'.get_template_directory_uri().'/images/logo.jpg" /></a>';
  3. marcomilic
    Member
    Posted 1 year ago #

    @keesiemeijer thank you for reply. Problem is that I have specific demand like this one:

    [Item1 Item2 Item3] Logo [Item4 Item5 Item6]
    Logo
    Logo
    [Item7 Item8 Itme9] Logo [Itmem10 Item11 Item12]

    In footer, I must have all elements of that menu. I just need to get from-to elements of the wp_nav_menu and post them in 4 different <div>

  4. keesiemeijer
    moderator
    Posted 1 year ago #

    Are all Logo items the same? What is the html you would like for the Logo elements?

    Another solution could be to use 4 nav menus. Very basic example:

    <?php  wp_nav_menu( array('menu' => 'Nav 1' )); ?>
    <div>Logo</div>
    <?php  wp_nav_menu( array('menu' => 'Nav 2' )); ?>
    <div>Logo</div>
    <div>Logo</div>
    <?php  wp_nav_menu( array('menu' => 'Nav 3' )); ?>
    <div>Logo</div>
    <?php  wp_nav_menu( array('menu' => 'Nav 4' )); ?>

    http://codex.wordpress.org/Function_Reference/wp_nav_menu
    http://codex.wordpress.org/Function_Reference/register_nav_menu

    Or maybe with wp_get_nav_menu_items():
    http://codex.wordpress.org/Function_Reference/wp_get_nav_menu_items

  5. marcomilic
    Member
    Posted 1 year ago #

    There is a just one Logo image between 4 <div> I have already menage 4 Nav menus but I am looking for more elegant solution, with one menu and function which can be used to show specific elements. I need to show in first <div> first 3 elements of menu, in second <div> second 3 elements of menu... I am not sure if this is posible in wp_nav_menu?

    Thank you very much for second link, It can halp me even more.

  6. keesiemeijer
    moderator
    Posted 1 year ago #

    Ah, I think you want a structure like this:

    <div>
      <ul>
        // 1-3 li items
      </ul>
    </div>
    Logo
    <div>
     <ul>
        // 4-6 li items
     </ul>
    </div>
    Logo
    Logo
    <div>
     <ul>
    <!-- etc... -->

    Am I correct?
    Are these all top level menu items?

  7. marcomilic
    Member
    Posted 1 year ago #

    Yes, something like that, focus is on separated
    <ul> created from one wp_nav_menu.

  8. keesiemeijer
    moderator
    Posted 1 year ago #

    Are these all top level menu items?

  9. marcomilic
    Member
    Posted 1 year ago #

    Yes, all items are top level, but some of them have a child <ul> which must be showed on :hover.

  10. keesiemeijer
    moderator
    Posted 1 year ago #

    Sorry for the late reply. With this in your functions.php you can display a nav menu with a range of top level menu items (and their child items): http://pastebin.com/vKvWhy6s

    Use wp_nav_menu() with the new parameters "menu_item_start" and "menu_item_end". Examples:

    /* example 1 - nav menu with (top level) menu items 1 to 3 */
    $args = array(
      'theme_location' => 'primary',
      'menu_item_start' => 1,
      'menu_item_end' => 3
    );
    wp_nav_menu($args);
    
    /* example 2 - nav menu with only (top level) menu item 5 */
    $args = array(
      'theme_location' => 'primary',
      'menu_item_start' => 5,
      'menu_item_end' => 5
    );
    wp_nav_menu($args);
    
    /* example 3 - nav menu with all (top level) menu items from 7 and onward */
    $args = array(
      'theme_location' => 'primary',
      'menu_item_start' => 7
    );
    wp_nav_menu($args);

Topic Closed

This topic has been closed to new replies.

About this Topic