adding some custom html code to the wp_nav_menu function

All we need is an easy explanation of the problem, so here it is.

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/" rel="nofollow noreferrer noopener">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/" rel="nofollow noreferrer noopener">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/" rel="nofollow noreferrer noopener">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/" rel="nofollow noreferrer noopener">Articles</a>
        </li>
        <li>
            <a href="#myModal" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener" 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
    }
}

How to solve :

I know you bored from this bug, So we are here to help you! Take a deep breath and look at the explanation of your problem. We have many solutions to this problem, But we recommend you to use the first method because it is tested & true method that will 100% work for you.

Method 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" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener" 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.

Note: Use and implement method 1 because this method fully tested our system.
Thank you 🙂

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

Leave a Reply