Javascript in WordPress Menus URL

By default wordpress don’t allow you to put JavaScript function in its menu URL

There are few steps to insert Javascript in WordPress Menus URL with jQuery without editing wordpress core.


Javascript in WordPress Menus URL

many users need add onclick event on wordpress menu and wordpress does not recognize javascript:void(0) or any other javascript function.
here is the step to put javascript in wp menu..

Step 1. Put # in your wordpress menu url  in which you want the JavaScript Function.

Javascript in WordPress Menus URL

Step 2. Track this menu url (li ID) link from source code or Firebug or Developer Tool.

in this case li id is menu-item-1002 .

this id is auto generated by wordpress and always unique. So the every wordpress menu url id is unique

javascript in wordpress

Step 3. Place the following code before the end of head tag (open header.php find </head>)  of current theme and put you menu id in highlighted area.
the wordpress menu url id is always unique for every wordpress menu.so we can use javascript easy.

Javascript in WordPress Menus URL

put your javascript code in section
//Your javascript Code here.
in this way you can execute any javascript code on wordpress menu
Enjoy.

Here Is the script that you need to add in header.php of your wordpress current theme, before the end of head tag (</head>).

[js]
jQuery.noConflict();
jQuery(document).ready(function(){
var menuID = jQuery(‘#your menu id’);

findA = menuID.find(‘a’);

findA.click(function(event){
// Your Javascript Code Here
});
});
[/js]

For Plugin see: Updated Post [ onclick on Wordpress Menu- Plugin  ]

Download Plugin Version

  • Nick

    Hi Rohit. I am not very experienced with javascript, and have been playing with this for a while without success. I think in your code you forgot a ‘ at the end of  ‘#your menu id. Also, if this is the javascript I want to use — javascript:wazala_widget.show(); — how do I go about writing that in your code? Where you write menuID, do I have to change that at all? Thanks!

    • buffernow

      hi Nick.
      i didn’t forget a
      the line
              findA = menuID.find(‘a’); is for  ‘a’
       you can call this function where line
      // Your Javascript Code Here
      remove this line and paste
      wazala_widget.show();

      • Actually yes, on the code above there is a typo, the line:

         var menuID = jQuery(‘#your menu id); 

        is missing the closing apostrophe.

        • buffernow

          OMG
          Thank You So Much
          Elike for correction

  • Nick

    Hi Rohit. I am not very experienced with javascript, and have been playing with this for a while without success. I think in your code you forgot a ‘ at the end of  ‘#your menu id. Also, if this is the javascript I want to use — javascript:wazala_widget.show(); — how do I go about writing that in your code? Where you write menuID, do I have to change that at all? Thanks!

    • buffernow

      hi Nick.
      i didn’t forget a
      the line
              findA = menuID.find(‘a’); is for  ‘a’
       you can call this function where line
      // Your Javascript Code Here
      remove this line and paste
      wazala_widget.show();

      • Actually yes, on the code above there is a typo, the line:

         var menuID = jQuery(‘#your menu id); 

        is missing the closing apostrophe.

        • buffernow

          OMG
          Thank You So Much
          Elike for correction

  • I am having trouble getting this to work.  I have a link in my menu bar that I want to load a function that I have setup to popup a new smaller window where my users can choose a way to listen to our radio webstream.  Here is what i have.
    jQuery.noConflict();jQuery(document).ready(function(){var menuID = jQuery(‘#menu-item-9’);findA = menuID.find(‘a’);findA.click(function(ShoutcastPlayer (c)){window.open(c,’window’,’width=350,height=150,scrollbars=no,status=yes,resizable=no,location=no’);}});});

    However my link still stays as a # and nothing seems to happen.  I tried using just your example of the alert to say hi but that did not work either.  Any help would be greatly appreciated.

    • buffernow

      Hello Dex,
      Please use firebug console to view the error.
      if it alert function is working ,then it will be problem of
      ShoutcastPlayer.
      please check the error with firebug and let me know if the problem is solved.
      Thanks.

  • I am having trouble getting this to work.  I have a link in my menu bar that I want to load a function that I have setup to popup a new smaller window where my users can choose a way to listen to our radio webstream.  Here is what i have.
    jQuery.noConflict();jQuery(document).ready(function(){var menuID = jQuery(‘#menu-item-9’);findA = menuID.find(‘a’);findA.click(function(ShoutcastPlayer (c)){window.open(c,’window’,’width=350,height=150,scrollbars=no,status=yes,resizable=no,location=no’);}});});

    However my link still stays as a # and nothing seems to happen.  I tried using just your example of the alert to say hi but that did not work either.  Any help would be greatly appreciated.

    • buffernow

      Hello Dex,
      Please use firebug console to view the error.
      if it alert function is working ,then it will be problem of
      ShoutcastPlayer.
      please check the error with firebug and let me know if the problem is solved.
      Thanks.

  • I’ve got it to work. Thanks!!!

    At this time, I only need it to work for one menu id. But the plan is for the menu to include more items, with each unique item (menu id) executing a specific action. Would it be possible to run multiple menu id’s through this using if-else or switch statements? or would I need to do multiple scripts, each one for the unique menu field?

  • John

    I’ve got it to work. Thanks!!!

    At this time, I only need it to work for one menu id. But the plan is for the menu to include more items, with each unique item (menu id) executing a specific action. Would it be possible to run multiple menu id’s through this using if-else or switch statements? or would I need to do multiple scripts, each one for the unique menu field?

  • graphicd00d

    Hi Rohit,
    I’m trying to use your code for a prompt linking to an external site. The prompt gives them the choice after reading the prompt to proceed to the external site or to cancel all together. Suffice to say I’m not having much luck. If you go to http://wdccu.org/ and look at the “CUNA Mutual” link under the “Useful Links” in the sidebar, this is what I want to accomplish with the sublink called “CUNA” under the “Loans” mainnav.

    • buffernow

      Hi Grapicd00d
      Sorry for late response,well its quit tricky.
      when you will create submenu under CUNA then use # in url . wp will generate some unique ID at front end.For ease i aatached image.
      suppose id is “menu-item-777”

      then use this javascript code

      jQuery.noConflict();
      jQuery(document).ready(function(){
      var menuID = jQuery(‘#menu-item-777’);

      findA = menuID.find(‘a’);

      findA.click(function(event){
      if(confirm(“THIRD PARTY LINK DISCLOSURE” + ‘n’ + “” + ‘n’ + “You are about to enter a site furnished by a third party provider in which West Denver Community Credit Union makes no representation concerning and is not responsible for the contents of the site.” + ‘n’ + “” + ‘n’ + “West Denver Community Credit Union does not endorse or represent the third party provider nor does West Denver Community Credit Union accept any responsibility of the content or reliability of the site you are entering.” + ‘n’ + “” + ‘n’ + “In no event shall West Denver Community Credit Union be responsible for your use of an external site.”))
      {
      window.open(‘http://www.cunamutual.com/’,’_blank’);
      }

      });
      });

    • buffernow

      Hi Grapicd00d
      Sorry for late response,well its quit tricky.
      when you will create submenu under CUNA then use # in url . wp will generate some unique ID at front end.For ease i aatached image.
      suppose id is “menu-item-777”

      then use this javascript code

      jQuery.noConflict();
      jQuery(document).ready(function(){
      var menuID = jQuery(‘#menu-item-777’);

      findA = menuID.find(‘a’);

      findA.click(function(event){
      if(confirm(“THIRD PARTY LINK DISCLOSURE” + ‘n’ + “” + ‘n’ + “You are about to enter a site furnished by a third party provider in which West Denver Community Credit Union makes no representation concerning and is not responsible for the contents of the site.” + ‘n’ + “” + ‘n’ + “West Denver Community Credit Union does not endorse or represent the third party provider nor does West Denver Community Credit Union accept any responsibility of the content or reliability of the site you are entering.” + ‘n’ + “” + ‘n’ + “In no event shall West Denver Community Credit Union be responsible for your use of an external site.”))
      {
      window.open(‘http://www.cunamutual.com/’,’_blank’);
      }

      });
      });

  • graphicd00d

    Hi Rohit,
    I’m trying to use your code for a prompt linking to an external site. The prompt gives them the choice after reading the prompt to proceed to the external site or to cancel all together. Suffice to say I’m not having much luck. If you go to http://wdccu.org/ and look at the “CUNA Mutual” link under the “Useful Links” in the sidebar, this is what I want to accomplish with the sublink called “CUNA” under the “Loans” mainnav.

    • buffernow

      Hi Grapicd00d
      Sorry for late response,well its quit tricky.
      when you will create submenu under CUNA then use # in url . wp will generate some unique ID at front end.For ease i aatached image.
      suppose id is “menu-item-777”

      then use this javascript code

      jQuery.noConflict();
      jQuery(document).ready(function(){
      var menuID = jQuery(‘#menu-item-777’);

      findA = menuID.find(‘a’);

      findA.click(function(event){
      if(confirm(“THIRD PARTY LINK DISCLOSURE” + ‘n’ + “” + ‘n’ + “You are about to enter a site furnished by a third party provider in which West Denver Community Credit Union makes no representation concerning and is not responsible for the contents of the site.” + ‘n’ + “” + ‘n’ + “West Denver Community Credit Union does not endorse or represent the third party provider nor does West Denver Community Credit Union accept any responsibility of the content or reliability of the site you are entering.” + ‘n’ + “” + ‘n’ + “In no event shall West Denver Community Credit Union be responsible for your use of an external site.”))
      {
      window.open(‘http://www.cunamutual.com/’,’_blank’);
      }

      });
      });

    • buffernow

      Hi Grapicd00d
      Sorry for late response,well its quit tricky.
      when you will create submenu under CUNA then use # in url . wp will generate some unique ID at front end.For ease i aatached image.
      suppose id is “menu-item-777”

      then use this javascript code

      jQuery.noConflict();
      jQuery(document).ready(function(){
      var menuID = jQuery(‘#menu-item-777’);

      findA = menuID.find(‘a’);

      findA.click(function(event){
      if(confirm(“THIRD PARTY LINK DISCLOSURE” + ‘n’ + “” + ‘n’ + “You are about to enter a site furnished by a third party provider in which West Denver Community Credit Union makes no representation concerning and is not responsible for the contents of the site.” + ‘n’ + “” + ‘n’ + “West Denver Community Credit Union does not endorse or represent the third party provider nor does West Denver Community Credit Union accept any responsibility of the content or reliability of the site you are entering.” + ‘n’ + “” + ‘n’ + “In no event shall West Denver Community Credit Union be responsible for your use of an external site.”))
      {
      window.open(‘http://www.cunamutual.com/’,’_blank’);
      }

      });
      });

  • Scott Bernadot

    This was exactly what I needed. Thanks a million for your help! – Scott

  • Scott Bernadot

    This was exactly what I needed. Thanks a million for your help! – Scott

  • Gwyneth Llewelyn

    It worked wonderfully for me as well; thank you very much for your tip!

  • It worked wonderfully for me as well; thank you very much for your tip!

  • Michael

    Hi. Nice article

    I’m trying to insert the virtual pageview code for analytics. But it doesn’t seem to work. Have you tried that and do you have a solution. I’m not certain how the code should look like in your fix. I how tried everything, without a good result.

    • buffernow

      sorry Michael i havent tried somthing like this
      if you have problem with code you can use pluginjin menu

  • Michael

    Hi. Nice article

    I’m trying to insert the virtual pageview code for analytics. But it doesn’t seem to work. Have you tried that and do you have a solution. I’m not certain how the code should look like in your fix. I how tried everything, without a good result.

    • buffernow

      sorry Michael i havent tried somthing like this
      if you have problem with code you can use pluginjin menu

  • Jose Rojas

    A think a more tidy approach that doesn’t involve the direct post ID/element ID (which could possibly change as you edit your pages) is using ‘wp_nav_menu_object’ filter. Cheers.

    //Add popup to wp nav menu
    function my_nav_menu_objects( $items, $args ) {
    foreach ($items as $item)
    {
    if ($item->title == ‘popuplink’)
    {
    $item->url = “javascript:window.open(‘$item->url’,’_blank’);”;
    }
    }
    return $items;
    }

    add_filter( ‘wp_nav_menu_objects’, ‘my_nav_menu_objects’, 0, 2 );

  • Jose Rojas

    A think a more tidy approach that doesn’t involve the direct post ID/element ID (which could possibly change as you edit your pages) is using ‘wp_nav_menu_object’ filter. Cheers.

    //Add popup to wp nav menu
    function my_nav_menu_objects( $items, $args ) {
    foreach ($items as $item)
    {
    if ($item->title == ‘popuplink’)
    {
    $item->url = “javascript:window.open(‘$item->url’,’_blank’);”;
    }
    }
    return $items;
    }

    add_filter( ‘wp_nav_menu_objects’, ‘my_nav_menu_objects’, 0, 2 );

  • echo boomer design

    Can I use this to add an onclick function for google analytics cross domain tracking? I need to add

    onclick=”_gaq.push([‘_link’, ‘http://websitehere.com’]); return false;”

    to one of my menu items…

    • buffernow

      yes sure.
      go ahead (y)

  • echo boomer design

    Can I use this to add an onclick function for google analytics cross domain tracking? I need to add

    onclick=”_gaq.push([‘_link’, ‘http://websitehere.com’]); return false;”

    to one of my menu items…

    • buffernow

      yes sure.
      go ahead (y)

  • Vincen

    Thx very much !!
    A french programmer 😉

  • Vincen

    Thx very much !!
    A french programmer 😉

  • slck

    Hi,

    I just tried it here but unfortunately it didn’t work: http://tinyurl.com/nfqxg3v

    Do you have any idea? The wordpress version maybe?