WordPress: add HTML to a specific nav menu

Question

add_filter('wp_nav_menu_items', 'add_custom', 10, 2);
function add_custom($items, $args) {
  if ($args->theme_location == 'primary') {
    $items .= '<li class="custom"></li>';
  }
  return $items;
}

which produces:

<ul id="menu-top">
    <li></li>
    <li></li>
    <li></li>
    <li class="custom"></li> /* added custom HTML */
<ul>

but what if my WP menu doesn't have a "theme_location"? Can I target my menu by id/class instead of "theme_location", or how else can I add HTML to one specific menu?

Assuming you're using the Appearance -> Menu editor, you could add a page, add a specific class to the page and hide it and what not with CSS. I don't know what else you need from this though so that might not help. — Jacob Raccuia, Sep 07 '13 at 06:53
I have a specific case, so I can't do that. I simplified my question to avoid unnecessary complication, but more details of what I'm trying to do can be found here http://stackoverflow.com/questions/18658643/wordpress-add-empty-list-item-to-navigation-menu — Sunny, Sep 07 '13 at 07:34
I was wondering if I could just simply use the menu's id/class instead. I'd like to assign it a theme_location, so if I add ``register_nav_menu( 'primary', 'Primary Menu' );`` and assign my menu to 'Primary Menu', what else do I need to do? — Sunny, Sep 07 '13 at 08:01
I believe that would be all you have to do, but before that, have you tried checking the $args array to see if the id is included there? — omma2289, Sep 07 '13 at 08:34

Jacob Raccuia · Answer 1 · 2013-09-07T08:32:55.877

1

Can you use jQuery?

jQuery(document).ready(function($) {
    $('#menu-top').append('<li class="custom"></li>');
});

Or PHP + CSS - with this solution, you add it to every menu and hide it if need be via CSS.

add_filter('wp_nav_menu_items', 'add_custom', 10, 2);
function add_custom($items, $args) { 
   $items .= '';
   return $items;
}

li.custom { display:none; } // hide originally
ul#menu-top li.custom { display:inline; } // or whatever styles

edited Sep 07 '13 at 08:32

answered Sep 07 '13 at 07:53

Jacob Raccuia

1,666
1
16
25

@Sunny I clearly don't know the actual answer, but I provided another solution you could use. – Jacob Raccuia Sep 07 '13 at 08:33

score 0 · Answer 2 · answered Sep 07 '13 at 08:46

When there is no theme_location, then I guess, it falls back to wp_page_menu. So, in theory, you could filter into wp_page_menu and modify the output.

<?php
//Use this filter to modify the complete output
//You can get an argument to optionally check for the right menu
add_filter( 'wp_page_menu', 'my_page_menu', 10, 2 );
/**
 * Modify page menu
 * @param  string $menu HTML output of the menu
 * @param  array $args Associative array of wp_page_menu arguments
 *                     @see http://codex.wordpress.org/Function_Reference/wp_page_menu
 * @return string       menu HTML
 */
function my_page_menu( $menu, $args ) {
    //see the arguments
    //Do something with $menu
    return $menu;
}

//Use this filter to alter the menu argument altogether
//It is fired before creating any menu html
add_filter( 'wp_page_menu_args', 'my_page_menu_pre_arg', 10, 1 );
/**
 * Modify page menu arguments
 * @param  array $args Associative array of wp_page_menu arguments
 *                     @see http://codex.wordpress.org/Function_Reference/wp_page_menu
 * @return array       modified arguments
 */
function my_page_menu_pre_arg( $args ) {
    //Do something with $args
    return $args;
}

Hope it helps.

WordPress: add HTML to a specific nav menu

2 Answers2