adding some custom html code to the wp_nav_menu function

by

I would like to implement some custom html code to the wp_nav_menu function in WordPress so that I can add a bootstrap modal box to a navigation menu link but I am unsure how to go about it. The post https://stackoverflow.com/questions/12250866/how-to-add-custom-html-to-wp-nav-menu goes some way to explaining how to do so by extending the walker class.

My goal is to create the following markup using the help of the walker class to create the custom html code at the end.

<div class="menu-primary-navigation-container">
    <ul id="navigation" class="clearfix">
        <li id="menu-item-275" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-273 current_page_item menu-item-275">
            <a href="http://sandpit.jonathanbeech.co.uk/">Home</a>
        </li>
        <li id="menu-item-17" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-17">
            <a href="http://sandpit.jonathanbeech.co.uk/about/">About</a>
        </li>
        <li id="menu-item-191" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-191">
            <a href="http://sandpit.jonathanbeech.co.uk/portfolio-two/">Portfolio</a>
        </li>
        <li id="menu-item-269" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-269">
            <a href="http://sandpit.jonathanbeech.co.uk/articles/">Articles</a>
        </li>
        <li>
            <a href="#myModal" role="button" data-toggle="modal">Contact</a>
        </li>
    </ul>
</div>

I’m having difficulty figuring out how to modify the start_el and end_el code to achieve the code in the last list item as my php skills aren’t good.

Any suggestions?

class Custom_Walker_Nav_Menu extends Walker_Nav_Menu {
    function start_el ( &$output, $item, $depth = 0, $args = array(), $id = 0 ) {
        // Copy all the start_el code from source, and modify
    }

    function end_el( &$output, $item, $depth = 0, $args = array() ) {
        // Copy all the end_el code from source, and modify
    }
}

1
1

To add that last list item, you don’t need a custom Walker. There is a hook that will allow you to tack that on.

function add_last_nav_item($items) {
  return $items .= '<li><a href="#myModal" role="button" data-toggle="modal">Contact</a></li>';
}
add_filter('wp_nav_menu_items','add_last_nav_item');

It wouldn’t be start_el and end_el that you’d need to edit anyway. Those generate the individual list items. It isn’t the place to add another item. I think you would probably need to go up to Walker_Nav_Menu‘s parent Walker class to get to a place where you can add new items but it isn’t worth the effort just to add items.

Leave a Comment