Add Javascript to WordPress Menu

Good that it works. If it’s for a client or if you just want a cleaner code, you can do it as @Tom J Nowell suggested.

Add a custom menu item, link it to nowhere or anywhere. Find out the menu item ID (every item has one), and then target that ID with jQuery.

$("#menu-item-num").on("click", function(e){ 
      e.preventDefault();
      // olark code here
});

This way, every time a user clicks on that menu-item the script above will be triggered. You can enqueue the jquery script via functions.php.

Update:

  1. Make sure your olark.js is loading. If you’re adding it to the footer or header, inspect your page and make sure the script is there. Also, make sure you’re not getting any errors in the browser’s console.

  2. Wrap your js with a document ready, so that the script executes at the right time:

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

The fact that the link is not loading means there’s something wrong with the script itself or the script is not loading at all.

Leave a Comment