Customized wp_nav_menu()

I’m sure you have a reason, but I am not seeing it as to why to NOT use the default html output when using wp_nav_menu()?

Which I think is like:

<ul>
  <li>Top Level Menu Item</li>
     <ul>
        <li>Sub Menu Item</li>
        <li>Another submenu Item</li>
     </ul>
  <li>Another Top Level Menu Item</li>
 </ul>

Unless you are trying to do something for SEO, which I am not sure is the best idea, the default output is great and very usable with CSS. Also it is easier and would be more portable.

If there is a specific styling issue (which there could be), this article may help.

Hope that helps

You should NEVER EVER use h1 tags for anything other than the page title, and it should only be used once per page. I’d recommend using the default output and styling it.

You should NEVER EVER use h1 tags for anything other than the page title, and it should only be used once per page…

Unless you’re using HTML5 markup, there you can have as many H1-tags as you like:

<section class="articles">
  <article>
    <h1>Title #1</h1>
  </article>
  <article>
    <h1>Title #2</h1>
  </article>
</section>

However, I would also recommend using the default HTML-output that the wp_nav_menu(); gives you

Hello,

Can you just explain why is it so bad to override wp_nav_menu HTML output ?
The core WordPress coding team offers you that opportunity, I don’t see the pont of avoiding it, HTML markups do not hurt ??

For example, how can you add a custom “sub-menu” CSS class to a second level menu ?

<ul class="menu">
    <li>
      <ul class="sub-menu">
        <li></li>
      </ul>
    </li>
  </ul>

How can you add a custom CSS class to an LI item to tell it that it has a child menu :

<li class="has-child">
    <ul>
      <li></li>
    </ul>
  </li>

(well, for this one, you can do it with a hook).

My point is, if you know what you are doing, you can do anything with core libraries overrides ( and I don’t say hack ?? )

Cheers
jeFFF

in function.php

add_action( 'after_setup_theme', 'td_setup' );
function td_setup() {
	register_nav_menus( array(
		'menu_top' => 'Menu TOP' ,
		'menu_bot' => 'Menu BOT'
	) );
}

in theme’s file

<div class="menu-title">Title TOP</div>
<?php wp_nav_menu( array( 'container_class' => 'menu01', 'theme_location' => 'menu_top' ) ); ?>
<div class="menu-title">Title BOT</div>
<?php wp_nav_menu( array( 'container_class' => 'menu02', 'theme_location' => 'menu_bot' ) ); ?>

set your menus
https://DOMAIN/wp-admin/nav-menus.php

Just wanted to say I enjoyed the post.I have to speakyour web site is very cool I really like your theme! I’ll bookmark it and come back later.
[link removed]

Hello everybody,

It seems like the Original Poster went MIA after his/her question.
IMHO, the answer to the OP’s problem seems to rely on a custom nav walker, since the changes to the default walker that are necessary in order to generate his/her desired output are very minimal and pretty straightforward.
@wp_oulu: if you get back to me on this, I’ll tell you how to do it.

I simply didn’t write because nobody answer what I have asked. If you have the solution, please post it.

Thank you and best regards.

That makes sense, ??

This custom nav walker should do the trick. Please note that I have only included the start_el function in the custom walker because it is the only function that needed changing, but if you wish to do further modifications, you might have to include other functions from the default walker as well. You can see the complete default walker code inside [wp_root]/wp-includes/nav-menu-template.php.

Edit: I almost forgot to mention that if you don’t want any container divs wrapping your menu, pass a false value to the wp_nav_menu’s container argument.

Edit 2: The custom nav walker will output smth like this:

<ul>
   <h1 id="nav-item-1">
      <a href="link-1">
      </a>
   </h1>
   <h1 id="nav-item-2">
      <a href="link-2">
      </a>
      <ul class="sub-menu">
         <li id="sub-item-1">
            <a href="sub-link-1">
            </a>
         <li id="sub-item-2">
            <a href="sub-link-2">
            </a>
      </ul>
   </h1>
</ul>

This is not valid HTML, because you can’t place a heading tag, which is a block tag, inside a ul tag, another block tag. If you want your code to be valid, you will have to use the undocumented items_wrap argument and pass the following value to it: %3$s when calling wp_nav_menu. That will get rid of the wrapping
<ul> tag.

Hi,
A small edit to previous poster.
To avoid including submenu inside h1 tag, change:

$output .= $indent . '<h1' . $id . $value . $class_names .'>';
to
$output .= $indent . '<div' . $id . $value . $class_names .'>';

;

$item_output .= '<a'. $attributes .'>';
$item_output .= $args->link_before . apply_filters( 'the_title', $item->title, $item->ID ) . $args->link_after;
$item_output .= '</a>';

to

$item_output .= '<h1><a'. $attributes .'>';
$item_output .= $args->link_before . apply_filters( 'the_title', $item->title, $item->ID ) . $args->link_after;
$item_output .= '</a></h1>';

and

function end_el(&$output, $item, $depth) {
	$output .= "</h1>\n";
}

to

function end_el(&$output, $item, $depth) {
	$output .= "</div>\n";
}

p.s. Why have you chosen so difficult way to get penalty in google?

I want to ask a question, not creating another thread: I use

<?php wp_nav_menu( array( 'container' => false ) ); ?>

why could be this pringing me with a div?

<div class="menu"><ul><li class="current_page_item"><a href="https://localhost/wordpress/" title="Home">Home</a></li><li class="page_item page-item-4"><a href="https://localhost/wordpress/resume/" title="Resume">Resume</a></li><li class="page_item page-item-2"><a href="https://localhost/wordpress/sample-page/" title="Sample Page">Sample Page</a></li></ul></div>

?

<?php wp_nav_menu( array( 'container' => ' ' ) ); ?>

works better than false for me

works better than false for me

Does not for me ?? it still puts in div container.

Odd… here’s mny output

<nav id="access" role="navigation">
	<h3 class="assistive-text">Main menu</h3>
	<div class="skip-link"><a class="assistive-text" href="#content" title="Skip to primary content">Skip to primary content</a></div>
	<div class="skip-link"><a class="assistive-text" href="#secondary" title="Skip to secondary content">Skip to secondary content</a></div>

	<ul id="nav" class="menu"><li id="menu-item-688" cla

You can see there is no div in there…..

<nav id="access" role="navigation">
	<h3 class="assistive-text"><?php _e( 'Main menu', 'rvoodoo' ); ?></h3>
	<div class="skip-link"><a class="assistive-text" href="#content" title="<?php esc_attr_e( 'Skip to primary content', 'rvoodoo' ); ?>"><?php _e( 'Skip to primary content', 'rvoodoo' ); ?></a></div>
	<div class="skip-link"><a class="assistive-text" href="#secondary" title="<?php esc_attr_e( 'Skip to secondary content', 'rvoodoo' ); ?>"><?php _e( 'Skip to secondary content', 'rvoodoo' ); ?></a></div>

	<?php wp_nav_menu( array( 'theme_location' => 'primary', 'container' => '', 'menu_id' => 'nav' ) ); ?>

Is how I call it

thanks for the answer, but I already changed the css styling according to the html which is printed by wordpress.