WordPress.org

Support

Support » WP-Advanced » Customized wp_nav_menu()

Customized wp_nav_menu()

  • wp_oulu
    Member

    @wp_oulu

    <div class="example">
    <h1>Menu</h1>
    <ul>
        <li>sub-menu</li>
        <li>sub-menu</li>
        <li>sub-menu</li>
    </ul>
    </div><!-- end of example -->
    
    <div class="example>
    <h1>Menu</h1>
    <ul>
        <li>sub-menu</li>
        <li>sub-menu</li>
        <li>sub-menu</li>
    </ul>
    </div><!-- end of example -->

    I’m trying to make a menu with wp_nav_menu() and I want to achieve a clean code like this. I’m trying to do it with a custom walker but I don’t have experience with this. I think I have to overwrite a class but …

    My idea is using h1 tags to menu items and and unordered list to submenu items.

    Coud you help me with the code?? Thanks for all

Viewing 15 replies - 1 through 15 (of 34 total)
  • ahuggins
    Member

    @ahuggins

    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

    Mitchell Bundy
    Member

    @mitchbundy

    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

    jeFFF
    Member

    @jefff

    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
    http://DOMAIN/wp-admin/nav-menus.php

    davidcancool
    Member

    @davidcancool

    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]

    Marventus
    Member

    @marventus

    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.

    Marventus
    Member

    @marventus

    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?

    Speed_FANat1c
    Member

    @speed_fanat1c

    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="http://localhost/wordpress/" title="Home">Home</a></li><li class="page_item page-item-4"><a href="http://localhost/wordpress/resume/" title="Resume">Resume</a></li><li class="page_item page-item-2"><a href="http://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

    Speed_FANat1c
    Member

    @speed_fanat1c

    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

    Speed_FANat1c
    Member

    @speed_fanat1c

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

Viewing 15 replies - 1 through 15 (of 34 total)
  • The topic ‘Customized wp_nav_menu()’ is closed to new replies.