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>
8 comments
nishark
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;
}
Yara Georgia
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.
vinay
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
Neil Gee
I can’t believe you even commented that.
vinay
Hi .
How multiple Id add in this ?????????????????????????????
Neil Gee
You should only have one unique id
Stefano
Lifesaver! Thank you for this great piece of code!
Jill
Thank you so much for this!! You totally made my day :)