Adding custom <li> to WordPress navigation menu

5 Views

I just cant fully understand how custom walkers work in worpress:

Code in theme’s home.php (actually all code is included from other file to not mess HTML) looks like this:

Read More
/**
 * Contains wordpress function with array with parameters
 * @return string HTML output
 */
function show_main_navigation() {
    return wp_nav_menu(
        array(
            'theme_location' => 'header-menu',
            'echo' => false,
            'depth' => '-1',
            'walker' => new Last_Item_Walker()
        )
    );
}

Walker looks like this: 

class Last_Item_Walker extends Walker_Nav_Menu { 

    function end_lvl( &$output, $depth = 0, $args = array() ) {
        $indent = str_repeat("t", $depth);
        $output .= '<li class="spec"><a href="#" title="title">title</a></li>'; // my custom <li>
        $output .= "$indent</ul>n";
    }
}

Overwritten method just does not work.

If I try to overwrite another method, for example: 

class Last_Item_Walker extends Walker_Nav_Menu { 

    function end_el( &$output, $item, $depth = 0, $args = array() ) {
            $output .= "<br>"; // for demonstration
        $output .= "</li>n";
    }
}

This one works, adds br tag but this is not what i want, i want to customize last li before /ul.

Can somebody help me with this?

Post Views: 5

Related posts

Leave a Reply

2 comments

  1. Ok it was easier to do with filters. 

    /**
 * Hardcodes shop item in navigation
 * @param string $items HTML with navigation items
 * @param object $args navigation menu arguments
 * @return string all navigation items HTML
 */
function new_nav_menu_items($items, $args) {
    if($args->theme_location == 'header-menu'){
       $shop_item = '<li class="spec"><a href="#" title="title">title</a></li>';
       $items = $items . $shop_item;
    }

    return $items;
}
add_filter('wp_nav_menu_items', 'new_nav_menu_items', 10, 2);

  2. If you’re not too worried about IE8 and less, you can use the :last-child selector.

    li.spec:last-child{
    color: red;
}

    If you are bothered about IE8 and less you can use a polyfill to make it work.