Adding an attribute and value to a WordPress Menu Item

October 14, 2014 -

Recently I had to add a Bootstrap modal trigger from a WordPress Menu item, the modal trigger requires an attribute of data-toggle with a value of modal. There is no facility to add this to a Menu Item in a menu in WP Dashboard, however their are 2 solutions on how this can be done.

Their is a filter available to add this nav_menu_link_attributes

add_filter( 'nav_menu_link_attributes', 'filter_function_name', 10, 3 );

function filter_function_name( $atts, $item, $args ) {
    // Manipulate attributes
    return $atts;
}

In the Dashboard add in a Custom Link give it the modal link like href=”#MyModal”

Get the ID in the code using Web Inspector tools, add the ID as a variable, once that ID is matched add in the new attribute and value, in the case below data-toggle and modal

add_filter( 'nav_menu_link_attributes', 'themeprefix_menu_attribute_add', 10, 3 );
function themeprefix_menu_attribute_add( $atts, $item, $args )
{
  // Set the menu ID
  $menu_link = 1215;
  // Conditionally match the ID and add the attribute and value
  if ($item->ID == $menu_link) {
    $atts['data-toggle'] = 'modal';
  }
  //Return the new attribute
  return $atts;
}

 

 jQuery Way

This is also achievable via jQuery

<script>
jQuery(document).ready(function($){
    $(".menu-item-1215").click(function(){
        $("#myModal").modal('show');
    });
});
</script>

 

Related Posts:

Categorized WordPress Tagged , , ,

8 Comments

  1. nishark on August 21, 2016 at 7:15 pm

    Thanks a bunch. Works with Foundation/FoundationPress as well.

    Added the following to navigation.php in FoundationPress. Voila!


    add_filter( 'nav_menu_link_attributes', 'themeprefix_menu_attribute_add', 10, 3 );
    function themeprefix_menu_attribute_add( $atts, $item, $args ) {
    // Set the menu ID
    $menu_link = 25;
    // Conditionally match the ID and add the attribute and value
    if ($item->ID == $menu_link) {
    $atts['data-open'] = 'nameOfModal';
    }
    //Return the new attribute
    return $atts;
    }

    Reply
  2. Yara Georgia on August 13, 2015 at 6:18 pm

    God, thanks. Just what I needed.
    I also added this line
    $atts['data-target'] = '#webmail-form';
    after the data-toggle attribute in the $atts array because Bootstrap asks us to use this attribute in the a tag too. It was a breeze :D
    Thank you very much.

    Reply
  3. vinay on May 20, 2015 at 1:31 pm

    Hello sir,
    i have one problem facing these days
    how to convert contact form 7 into pdf file and sending a pdf file through mail
    in wordpress
    Please help me

    Reply
    • Neil Gee on May 20, 2015 at 11:41 pm

      I can’t believe you even commented that.

      Reply
  4. vinay on May 14, 2015 at 5:48 am

    Hi .
    How multiple Id add in this ?????????????????????????????

    Reply
    • Neil Gee on May 15, 2015 at 1:21 am

      You should only have one unique id

      Reply
  5. Stefano on May 5, 2015 at 8:29 am

    Lifesaver! Thank you for this great piece of code!

    Reply
  6. Jill on March 31, 2015 at 9:42 pm

    Thank you so much for this!! You totally made my day :)

    Reply

Leave all Comment