WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. Join them; it only takes a minute:

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

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 http://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
share|improve this question
up vote 5 down vote accepted

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.

share|improve this answer

Your Answer


By posting your answer, you agree to the privacy policy and terms of service.

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