WordPress.org

Ready to get started?Download WordPress

Forums

Customized wp_nav_menu() (35 posts)

  1. wp_oulu
    Member
    Posted 2 years 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 2 years 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 Bundy
    Member
    Posted 2 years 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 2 years 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 2 years 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 2 years 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 2 years 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 2 years 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 2 years 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 2 years 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 2 years 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 2 years 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 2 years ago #

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

    works better than false for me

  14. Speed_FANat1c
    Member
    Posted 2 years ago #

    works better than false for me

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

  15. Rev. Voodoo
    Volunteer Moderator
    Posted 2 years 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 2 years ago #

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

  17. Jeff Clark
    Member
    Posted 2 years 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 years 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 2 years 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 2 years 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 2 years ago #

    Found an answer to my question here.

  22. Marventus
    Member
    Posted 2 years 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!

  23. lionheart2308
    Member
    Posted 2 years ago #

    hi,
    anyone knows or can suggest where to post the following request:
    i have Wp 3.3.2, from my admin Dashboard on the top left corner side (located under http://mydomain.com/wp-admin/index.php), there is this Icon "W"
    mouse over will display 5 different links:
    - About wordpress, WordPress.org, documentation, support forums, feedback).

    how can i remove/rename or disable these linsk with their menus?
    i don't want my customer to see these unwanted links.

  24. Einder
    Member
    Posted 2 years ago #

    @liaonheart2308 - you should be able to go to links and simply remove the links. After that, they should be gone, if not, let us know.

    I actually have a question of my own. I'm working with the mantra theme and want a horizontal bar type sub-menu for pages, instead of the drop down menu it currently has for pages. There are a great many examples of this type of menu, one such is Webhostingtalk

    Of course, I would have to make sure it matched my current theme, but that's pretty much what I want, and the closest thing I've found is from Darren Hoyt but it doesn't work with my theme and I would personally like to stick with using the wp_nav_menu() if possible.

  25. lionheart2308
    Member
    Posted 2 years ago #

    hi,
    i deleted some links but they are not relative to the menu:
    About wordpress, WordPress.org, documentation, support forums, feedback).

    the above menus & links are still there.

  26. Marventus
    Member
    Posted 2 years ago #

    @Einder and @Lionheart:
    None of your posts have anything to do with the OP's question. Please create separate threads and I will try to help you out.

  27. Einder
    Member
    Posted 2 years ago #

    Sorry Marventus..mine is now posted elsewhere (couldn't post in this section of the forums). Will remember next time to try and directly reflect the OP.

  28. Marventus
    Member
    Posted 2 years ago #

    No worries. I try to help out organize threads because that way solutions are way easier to find.
    I'll take a look at your other thread.
    Thanks!

  29. Shaikh Salman
    Member
    Posted 2 years ago #

    <style>
    #menu ul li:current_page_item a
    {
    color:#666;
    }
    </style>

    current_page_item will be active your menu
    in style.css

    <div id="menu">
    <ul>
    <?php wp_nav_menu('menu=main_menu'); ?>
    </ul>
    </div>

    in header.php
    1: menu = our own custom menu
    2: main_menu = is the name of register menu you can change it (top_name, bottom_menu,sidebar_menu,etc) if you want.

  30. Arie Putranto
    Member
    Posted 2 years ago #

    I prefer to clean up the output using regexp than using walker, and faster.

Topic Closed

This topic has been closed to new replies.

About this Topic