Title: add a complex, jquery link in the WP default menu builder
Last modified: August 20, 2016

---

# add a complex, jquery link in the WP default menu builder

 *  [drkknght](https://wordpress.org/support/users/drkknght/)
 * (@drkknght)
 * [15 years ago](https://wordpress.org/support/topic/add-a-complex-javascript-link-in-the-wp-default-menu-builder/)
 * love using the new wordpress menu builder. it’s perfect for linking to everything,
   but… is it possible to create a jquery link? in other words, having one of my
   menu links toggle a div i’ve already built in? or do i have to ditch the WP menu
   alltogether?
 * i’ve tried using the XFN “rel” area, but it cuts out my brackets. ideally, i 
   need it to look like:
 * rel=”toggle[user-section-new]”
 * and WP auto-corrects it to
 * rel=”toggleuser-section-new”
 * any advice?

Viewing 6 replies - 1 through 6 (of 6 total)

 *  [Jonathan Goldford](https://wordpress.org/support/users/jg-visual/)
 * (@jg-visual)
 * [15 years ago](https://wordpress.org/support/topic/add-a-complex-javascript-link-in-the-wp-default-menu-builder/#post-2120282)
 * I would try using a jquery class selector for that link.
 * In the WordPress menu builder if you don’t see the option to add a custom class
   to a menu item you can turn it on under screen options in the menu admin area.
   Once you add a class you should be able to use jquery to select only that menu
   item.
 * Hopefully that’s helpful. Let me know if you have any trouble adding the extra
   css class.
 *  Thread Starter [drkknght](https://wordpress.org/support/users/drkknght/)
 * (@drkknght)
 * [14 years, 11 months ago](https://wordpress.org/support/topic/add-a-complex-javascript-link-in-the-wp-default-menu-builder/#post-2120729)
 * hi jonathan, thanks for the response! i see where the css class area is on the
   menu, just not entirely sure how to use the menu option’s css to call the div.
   can you give me an example of what you mean…?
 *  [Jonathan Goldford](https://wordpress.org/support/users/jg-visual/)
 * (@jg-visual)
 * [14 years, 11 months ago](https://wordpress.org/support/topic/add-a-complex-javascript-link-in-the-wp-default-menu-builder/#post-2120730)
 * [@drkknght](https://wordpress.org/support/users/drkknght/), maybe something like
   this:
 * `
    $('.your-added-css-menu-class').click(function() { $('#your-div-id').show();});
 * Let me know if that doesn’t make sense.
 *  Thread Starter [drkknght](https://wordpress.org/support/users/drkknght/)
 * (@drkknght)
 * [14 years, 11 months ago](https://wordpress.org/support/topic/add-a-complex-javascript-link-in-the-wp-default-menu-builder/#post-2120731)
 * hi jonathan – thanks again for following up
 * OK, i tried what you recommended, using the appropriate div tags and code – which,
   for the record, ends up looking like this:
 * $(‘.menu-cartoons’).click(function() {
    $(‘#toons-list’).show(); });
 * however, that resulted in the following:
    Parse error: syntax error, unexpected‘(‘,
   expecting T_VARIABLE or ‘$’ in /nfs/c03/h06/mnt/55017/domains/toonbarn.com/html/
   wordpress/wp-content/themes/arras/header.php on line 22
 * was i correct in placing this in the header file, between the actual head tags?
   and should i have wrapped the code in <?php and ?> or did i format that incorrectly
 *  [Jonathan Goldford](https://wordpress.org/support/users/jg-visual/)
 * (@jg-visual)
 * [14 years, 11 months ago](https://wordpress.org/support/topic/add-a-complex-javascript-link-in-the-wp-default-menu-builder/#post-2120732)
 * [@drkknght](https://wordpress.org/support/users/drkknght/), The code given there
   is actually the jQuery library and is JavaScript. You can put that either in 
   the head tag or in the footer, but it needs to be wrapped in a <script> tag.
 * It might be good for you to read a little about basic jQuery at [http://docs.jquery.com/Main_Page](http://docs.jquery.com/Main_Page).
   That will give you the basics on how to include jQuery on your pages.
 * Also, the div you have with the ID of #toons-list, do you have that hidden right
   now? If so, how did you go about that?
 * If you used CSS and display: none you don’t have to use show(). You can use choose
   between a bunch of jQuery effects at [http://api.jquery.com/category/effects/](http://api.jquery.com/category/effects/).
 * Let me know how it goes.
 *  [JohannaK](https://wordpress.org/support/users/lemonfig/)
 * (@lemonfig)
 * [14 years, 11 months ago](https://wordpress.org/support/topic/add-a-complex-javascript-link-in-the-wp-default-menu-builder/#post-2120740)
 * I am looking to do the same thing, but my knowledge in Jquery are quite small…
 * Did you manage to get what you were looking for drkknght?
 * I don’t really know where to start. Thanks!

Viewing 6 replies - 1 through 6 (of 6 total)

The topic ‘add a complex, jquery link in the WP default menu builder’ is closed 
to new replies.

## Tags

 * [java](https://wordpress.org/support/topic-tag/java/)
 * [javascript](https://wordpress.org/support/topic-tag/javascript/)
 * [menu](https://wordpress.org/support/topic-tag/menu/)
 * [menu-builder](https://wordpress.org/support/topic-tag/menu-builder/)
 * [REL](https://wordpress.org/support/topic-tag/rel/)
 * [toggle](https://wordpress.org/support/topic-tag/toggle/)

 * In: [Fixing WordPress](https://wordpress.org/support/forum/how-to-and-troubleshooting/)
 * 6 replies
 * 3 participants
 * Last reply from: [JohannaK](https://wordpress.org/support/users/lemonfig/)
 * Last activity: [14 years, 11 months ago](https://wordpress.org/support/topic/add-a-complex-javascript-link-in-the-wp-default-menu-builder/#post-2120740)
 * Status: not resolved

## Topics

### Topics with no replies

### Non-support topics

### Resolved topics

### Unresolved topics

### All topics