3

I'm new to Wordpress so please be patient! I've created a template in html5/ccs3 and am in the process of trying to make a wordpress template out of it.

In my navigation menu (in html) I have a social menu that opens 3 different modals:

<social-icons>
  <div class="navbar-collapse collapse">
    <div class="btn-group nav navbar-nav navbar-right" role="group">
      <button type="button" class="btn btn-success navbar-btn facebook"><i class="fa fa-facebook-official btn-icon"></i></button>
      <button type="button" class="btn btn-success navbar-btn twitter"><i class="fa fa-twitter-square btn-icon"></i></button>
      <button type="button" class="btn btn-success navbar-btn instagram"><i class="fa fa-instagram btn-icon"></i></button>
      <button type="button" class="btn btn-success navbar-btn google"><i class="fa fa-google-plus-square btn-icon"></i></button>
      <button type="button" class="btn btn-success navbar-btn vine" data-toggle="modal" data-target="#vineModal"><i class="fa fa-vine btn-icon"></i></button>
      <button type="button" class="btn btn-success navbar-btn snapchat" data-toggle="modal" data-target="#snapchatModal"><i class="fa fa-snapchat btn-icon"></i></button>
      <button type="button" class="btn btn-success navbar-btn periscope" data-toggle="modal" data-target="#periscopeModal"><img src="assets/img/periscope.png" class="periscope-img"/></button>
      <button type="button" class="btn btn-success navbar-btn email"><i class="fa fa-envelope btn-icon"></i></button>
    </div>
  </div> <!-- nav -->
</social-icons>

I've created the menu structure in WP and allocated all of the css classes, but I can't figure out the way to add the other attributes, specifically the data-toggle and data-target attributes.

I've seen explanations that sound similar but nothing that I can get to work, and most of what I have found is several years old now.

If anyone could enlighten me I'd be very greatful! Thanks in advance

1 Answer 1

8

PHP way: Add the following to your functions.php file. Filter nav_menu_link_attributes:

add_filter( 'nav_menu_link_attributes', 'my_menu_atts', 10, 3 );
function my_menu_atts( $atts, $item, $args )
{
  // Provide the id of the targeted menu item
  $menu_target = 123;

  // inspect $item

  if ($item->ID == $menu_target) {
    // original post used a comma after 'modal' but this caused a 500 error as is mentioned in the OP's reply
    $atts['data-toggle'] = 'modal';
    $atts['data-target'] = '#myModal';
  }
  return $atts;
}

jQuery way:

<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script type="text/javascript">

    jQuery(document).ready(function() {
        jQuery('#menu-item-365').find('a').attr('data-toggle', 'modal');
        jQuery('#menu-item-365').find('a').attr('data-target', '#myModal');
    });
</script>
3
  • Fantastic thank you, I'll give that a go and see how I get on, quick question though, where I provide the id of the menu item, can I add multiple menu items, or do I add the entire filter multiple time? Commented Dec 1, 2015 at 22:42
  • Unfortunately @ShuvoHabib I can't get either to work! In the first piece of code I get a 500 error (I did change the #myModal and menu item number correctly), weirdly if I deleted either of the $atts lines the page loaded (no 500 error) but the modal didn't work, but with both lines in just the 500 error. Any idea where I'm going wrong? Commented Dec 2, 2015 at 20:23
  • Perhaps I should have mentioned I'm running this on a localhost MAMP server at the moment, dont think that should make any difference though! Commented Dec 2, 2015 at 20:27

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.