WordPress.org

Support

Support » WP-Advanced » Customized wp_nav_menu()

Customized wp_nav_menu()

  • <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 - 16 through 30 (of 34 total)
  • 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.

    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

    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.

    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!

    Found an answer to my question here.

    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!

    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.

    @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.

    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.

    @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.

    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.

    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!

    <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.

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

    Faster? yes, but also, more resource-intensive. Plus, Regex’s are not recommended for parsing HTML code.
    My 2 cents.

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