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 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 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 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>
            <a href="#myModal" role="button" data-toggle="modal">Contact</a>

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 Answer 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>';

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.


Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.