How can I add onclick events to Wordpress Menus

Question

I'm trying to add an onclick event to a WordPress menu that uses a nav walker. While I understand code and php I'm not very experienced with the WordPress system nor would I could myself an experienced coder.

I have a menu item that I'd like to add an onclick event to it but I can't figure how to do this.

Normally I'd use code such as the following

<a href="tel:1300XXXXXX" onclick="__gaTracker('send','event','phone call','click');"></a>

The menu itself looks like this

<nav>
    <ul class="sf-menu">
        <li id="menu-item-2785" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-2785"><a href="tel:1300XXXXXX"><span class='icon-phone'></span>Call us today 1300 XXX XXX</a></li>
    </ul>
</nav>

While I can specific the link in the menu to be a tel: link there is no way from what I see to add an onclick to menu item itself.

I tried a plugin called the Jin Menus but for the life of me I couldn't it to work.

I also found these articles but haven't been smart enough to get them to work at this point

How to add an onclick function to wordpress menu item (For google cross domain tracking)

I would greatly appreciate any help you could provide.

I prefer `$('element').on('click', function(){})`, but the answer Kylar put is valid as well. [Read more](http://stackoverflow.com/questions/9122078/difference-between-onclick-vs-click) — dingo_d, Jun 08 '16 at 12:51

score 11 · Accepted Answer · answered Jun 08 '16 at 09:26

11

if you want it for all of the menu items, use a class to identify it or if it's different for each item use an id.

in your js file:

$( ".menu-item" ).click(function() {
  // your on click code here
});

change the .menu-item to whatever class/id you wish to target

answered Jun 08 '16 at 09:26

Kylar

424
11
16

1

Thanks so much for your help. So is this how it would look – byronjt Jun 08 '16 at 15:23
You're welcome. I'm glad you got it working. Can you mark the answer as correct so other users can search through and see that the answer works? Good luck in future projects. – Kylar Jun 11 '16 at 07:36

score 2 · Answer 2 · answered Apr 12 '17 at 14:03

On a one page site, for example, you'll want to track the click Events for each menu item as your navigation, so I like adding a function tracking the Anchor tag.

$('a').click(function(){
    ga('send', 'event', 'Navigation', 'Click', $(this).text());
});

For me, the more data on clicks the better, but you could do some conditional weeding if necessary.

score 0 · Answer 3 · answered Jun 09 '16 at 02:16

0

This is what I used in the end. Thanks everyone for your help.

<script>
     (function($){
         $( ".sf-menu" ).click(function() {
             __gaTracker('send','event','phone call','header');
         });
     })(jQuery);
</script>`

answered Jun 09 '16 at 02:16

byronjt

63
1
2
5

How can I add onclick events to Wordpress Menus

3 Answers3