Wordpress. Adding menu item manually in wp_nav_menu

Question

In my theme there is a function for nav menus

function ct_nav() {
  <nav>
     <?php wp_nav_menu( array( 'container_id' => 'nav', 'theme_location' => 'primary') ); ?>
  </nav>
}

How could i add more item manually? using this function alone.

Solution 1

here is an example by changing the items_wrap.

wp_nav_menu( array( 'items_wrap' => '<ul id="%1$s" class="%2$s"><li><a href="http://www.google.com">go to google</a></li>%3$s</ul>' ) );

just took the default value and added the href.

Solution 2

function add_last_nav_item($items) {
  return $items .= '<li><a href="#myModal" role="button" data-toggle="modal">Contact</a></li>';
}
add_filter('wp_nav_menu_items','add_last_nav_item');

Solution 3

Just for the case someone needs this:

Menu items can be added manually by applying filters:

• wp_nav_menu_items - for all menus
• wp_nav_menu_{$menu->slug}_items - for menu with particular slug

Also by changing items_wrap, e.g., by removing <ul> and adding it explicitly in the theme - this way you will be able to add own items.

Solution 4

None of the above answers worked for me. This is a jquery type of workaround I used. I needed to add an image to the end of my menu.

Use wp_nav_menu() as per normal, be sure to specify a class in menu_class or you can specify an ID.

$items = array(
    'theme_location'  => 'header-menu',
    'menu'            => '',
    'container'       => 'div',
    'container_class' => 'menu-{menu slug}-container',
    'container_id'    => '',
    'menu_class'      => 'menuContainer', /* important, since we're targetting it with jquery*/
    'menu_id'         => '',
    'echo'            => true,
    'fallback_cb'     => 'wp_page_menu',
    'before'          => '',
    'after'           => '',
    'link_before'     => '',
    'link_after'      => '',
    'depth'           => 0,
    'walker'          => ''
);
wp_nav_menu($items);

$( document ).ready(function() {
            $(".menuContainer ul").append("<li><img src='<?php echo  get_template_directory_uri(); ?>/img/menuImage.png'></li>");
        });

View more solutions

Comments

[Joseph Silber]

Why don't you just add the markup yourself after the function call?

[csilk]

Yeah I don't understand what you mean, you can manually add items within the markup you have above? What are you trying to add exactly?

[ejntaylor]

This requires a menu to already be assigned to the menu_location. Is there a way to do this without a menu being assigned (in Appearances > Menus). This would be helpful for multisite work I am doing.

[Edward]

Wow that's a dirty hack. Works, though 🙈

[Preetham Hegde]

Can someone help me how to appear same on mobile menu only? thanks in advance

[Said Erraoudy]

Hi, Can you explain more what you want to appear in mobile ?

[Said Erraoudy]

@PreethamHegde Generally If you want to get something appear in mobile in wordpress you can use : <?php if ( wp_is_mobile() ) { /* Include/display resources targeted to phones/tablets here / } else { / Include/display resources targeted to laptops/desktops here */ } ?>

[klewis]

@SaidErraoudy with your example, how can we target a specific item by its title? rather than by the entire html line? I would like to setup a condition inside of your function.

[jave.web]

@Edward sadly, that is not a hack, neither is Said Erraoudy soultion, it's providing a template - nothing hacky about that, WP just chose here a very, VERY unfortunate way of how to do that - this part and whole nav-menu.php is a very "legacy" code of WP...

[AdamJones]

What about something more complex... ? I have 4 main menus each with child (2nd level items). I need to add an entry to the bottom of the 3rd menu.

[Engin]

For those who getting following error Uncaught ArgumentCountError. Extend the parameter of add_filter with 10 and 2. So it'll look like this. add_filter('wp_nav_menu_items','add_last_nav_item', 10, 2);