WordPress.org

1. wp_oulu
   Member
   Posted 9 months ago #

   <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

2. ahuggins
   Member
   Posted 9 months ago #

   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

3. Mitchell
   Member
   Posted 8 months ago #

   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.

4. Steffen Jørgensen
   Member
   Posted 8 months ago #

   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

5. jeFFF
   Member
   Posted 8 months ago #

   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

6. timDesain
   Member
   Posted 6 months ago #

   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

7. davidcancool
   Inactive
   Posted 6 months ago #

   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]

8. Marventus
   Member
   Posted 5 months ago #

   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.

9. wp_oulu
   Member
   Posted 5 months ago #

   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.

10. Marventus
    Member
    Posted 5 months ago #

    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.

11. Oleg Dudkin
    Member
    Posted 5 months ago #

    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?

12. Speed_FANat1c
    Member
    Posted 5 months ago #

    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>

    ?

13. Rev. Voodoo
    Volunteer Moderator
    Posted 5 months ago #

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

    works better than false for me

14. Speed_FANat1c
    Member
    Posted 5 months ago #

    works better than false for me

    Does not for me :( it still puts in div container.

15. Rev. Voodoo
    Volunteer Moderator
    Posted 5 months ago #

    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

16. Speed_FANat1c
    Member
    Posted 4 months ago #

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

17. jclark32
    Member
    Posted 4 months ago #

    I am looking to add an image to the dropdown in the wp_nav_menu() using the walker class. I want to do it based on menu-item-id. Any thoughts on how to go about doing this?

    I know you can add <img> tags to the label using the custom menu item in the backend but I want to pull this image dynamically.

18. dlngle
    Member
    Posted 2 months ago #

    I did a bit of fiddling the other day and came up with this...
    I wanted just the sub menus to appear and show the parent page as a heading above it.
    If you are on a subpage the link stays active.
    I created a custom sidebar and made up my own css.
    Hope this helps.
    

    <?php
    global $wp_query;
    
    if( empty($wp_query->post->post_parent) ) {
    $parent = $wp_query->post->ID;
    }else{
    $parent = $wp_query->post->post_parent;
    }
    if( empty($parent)){
    $parent = wp_list_pages(title_li);
    }
    ?>
    <?php if(wp_list_pages("title_li=&child_of=$parent&echo=0" )): ?>
    <h2 class='left'><?=get_the_title($post->post_parent);?></h2>
        <hr />
    <nav id="side-nav">
    <ul class="navList">
    <?php wp_list_pages("title_li=&child_of=$parent" ); ?>
    </ul>
    </nav>
    <?php endif; ?>

    The output looks like this..
    

    <h2 class='my_custom_class'>page_parent</h2>
        <hr />
    <nav id="my_custom_class">
     <ul class="my_custom_class">
       <li class="page_item"><a href="#">page_item</a>
     <ul class='children'>
        <li class="page_item child"><a href="#">children</a></li>
     </ul>
       </li>
       <li class="current_page_item"><a href="#">current_page</a></li>
     </ul>
    </nav>

    Hope this helps,
    Matt

19. loremipsum
    Member
    Posted 1 month ago #

    I'm looking for a way to customize wp_nav_menu as follows:

    1 - remove auto-generated item IDs
    2 - remove auto-generated item classes, except for:
    2a - "current-menu-item"
    2b - the custom class added through "CSS Classes (optional)" field

    I was able to accomplish 1-2a using filters, like so:

    add_filter('nav_menu_item_id', 'custom_nav_menu_item_id', 100, 1);
    add_filter('nav_menu_css_class', 'custom_nav_menu_css_class', 100, 1);
    function custom_nav_menu_css_class($var) {
    	return is_array($var) ? array_intersect($var, array('current-menu-item')) : '';
    }

    But I'm having trouble separating custom class (2b) from other auto-generated classes.

    Any help would be appreciated.

20. Marventus
    Member
    Posted 1 month ago #

    Hi LoremIpsum,

    You could accomplish all your questions with a custom nav walker. You can look at the wp_nav_menu codex article, and use the following Google Search to get more details about how to actually create one.
    Cheers!

21. loremipsum
    Member
    Posted 1 month ago #

    Found an answer to my question here.

22. Marventus
    Member
    Posted 1 month ago #

    Glad you were able to find an answer to your question. In my personal experience, I have found that custom nav walkers are way more... "powerful" if you will to control the HTML output of nav menus, but that depends on your needs and preferences.

    To the OP (wp_oulu): it would be great if next time you could give feedback to people's replies and, if the answer(s) was(were) helpful, mark the thread as 'Resolved' so other people can benefit from the thread. Thanks!

Reply

You must log in to post.