Add Javascript to Nav Menu?

I figured this out. In case anyone else is looking for the same thing, here’s the code that worked for me:

// Live Chat Utility Link
	add_filter( 'wp_nav_menu_items', 'live_chat_utility_link', 10, 2 );
	function live_chat_utility_link ( $items, $args ) {
	    if ( $args->theme_location == 'utility' ) {
	        $items .= '<li><a href="javascript:void(0);" onclick="olark(\'api.box.expand\')" class="livechat">Live Chat</a></li>';
	    }
	    return $items;
	}

Hello Mcography – Great post.

I’m trying to do exactly what you did w/olark.

I was able to add the code to the functions.php file, but I do not know what exact code to add to the WP menu.

Can you help?

Thanks!

Hi playpianotoday. I revised my approach a little bit so that it would be more in line with Javascript best practices. Here’s what you should do.

Create an item in your WordPress menu called ‘Live Chat’ or whatever you want it to be called. Direct the URL to ‘#’. Save the menu. Hover over the item and look at the little pop-up in the bottom left of your browser to find the ID of the menu item (or use Google Chrome dev tools). Note the ID.

Create a new javascript file called olark.js. Save it in your JS folder. Put the following code in it (be sure to replace #menu-item-38872 with the appropriate ID for the menu item you want to target).

jQuery(document).ready(function($) {
	$("#menu-item-38872").on("click", function(e){
	      e.preventDefault();
	      // olark code here
	      olark('api.box.expand');
	});
});

Then, in functions.php, enqueue the olark.js file by including the following code (be sure that the path to your olark.js file is correct).

// Enqueue Olark Script
	function olark_script() {
		wp_register_script( 'olark', get_stylesheet_directory_uri() . '/js/olark.js', array(), '1.0.0', true );
		wp_enqueue_script( 'olark' );
	}

	add_action( 'wp_enqueue_scripts', 'olark_script' );

That should do it. If you have any problems, let me know and I’ll try my best to help.

Glad I found you guys here… OK here’s my issue that you may be able to fix very quickly. I’m using events calendar plugin by tri.be. Created a script:

<script type="text/javascript">
function showLocation(position) {
  window.location.href ="https://www.wcsaddict.com/events/?action=tribe_list&tribe_paged=1&tribe-bar-geoloc-lat="+ position.coords.latitude +"&tribe-bar-geoloc-lng="+ position.coords.longitude;
}

function errorHandler(err) {
  if(err.code == 1) {
    alert("Error: Access is denied!");
  }else if( err.code == 2) {
    alert("Error: Position is unavailable!");
  }
}
function getLocation(){

   if(navigator.geolocation){
      // timeout at 60000 milliseconds (60 seconds)
      var options = {timeout:60000};
      navigator.geolocation.getCurrentPosition(showLocation,
                                               errorHandler,
                                               options);
   }else{
      alert("Sorry, browser does not support geolocation!");
   }
}
</script>

it grabs a users location and places it in the url to display events nearby. I created the menu area going to # (nowhere) and know the menu id, I don’t know how to make it all work, I tested the script by adding getLocation() at the end and it all worked great. How do I make my menu when I click “nearby” load this script?

Hey mcography

Thank you for your post, it kind of make sense but is not working for me and you might be able to help me out.

What I need to do is to add Google analytics event tracking to my menu items so I can know if people actually click on them or not.

So what i did was creating the js file as you say but changed your on click event for my code so it looks like this.

jQuery(document).ready(function($) {
	$("#menu-item-211").on("click", function(e){
	      e.preventDefault();
	      // event tracking code here
	      ga('send', 'event', 'category', 'action', 'label');
	});
});

I also changed the menu item Id.

Then I added the function to my function.php file and double checked that the path to the olark.js was correct

But this is not working!

What am i doing wrong? In theory, I should be able to see the onclick event on the menu item when I inspect the element.

Hope you can help,

Thank you

@gabolozano83 You do not need to add the Google Analytics code directly to the menu items, so the solutions in this thread will not help you. Google Analytics already tracks clicks on your website. All you need to do is copy and paste the tracking code provided by Google Analytics into your functions.php file.

Check out this article or this one for more information.

@mcography I wanted to install ajax code to the primary menu.
The code is a shopping bag (fixed mini cart).
how should I add this to the menu.
The code is

<div>
<script type="text/javascript" src="https://app.ecwid.com/script.js?1378155"></script>
<script type="text/javascript"> xMinicart("style=","layout=Mini");
</script>
</div>

also the item id of the menu is menu-item-76

Hi.
I have the same problem as Niranjannaulakha

I’m trying to put a Fastspring shopping cart icon into the nav menu but I’m having problems with the script Fastspring sent to me.

The script they send me is:

<script type="text/javascript" src="https://sites.fastspring.com/company-id/api/order.js"></script>
<a href="https://sites.fastspring.com/company-id/order/contents"><img class="alignnone size-full wp-image-4093" src="https://www.companyname.com/wp-content/uploads/2015/07/shoppingcart-white.png" alt="shoppingcart-white" width="25" height="25" /></a> <span style="color: #ffffff;"> View Cart (
<script type="text/javascript">
 document.write(FastSpringOrder.count);
</script> ) </a>

I really don’t know what to do with this code…
Any help would be much appreciated.

Thanks in advance