Adding js to wordpress for css activemenu highlight

Question

I want to add a simple highlight to my active menus in wordpress. To do this I have this i have tracked down some pieces of code that might be useful (if they worked.) I am a complete rookie when it comes to js, but i know so much as to put this snippet of code inside my functions.php

// Enqueue JavaScripts
function theme_scripts() {
    wp_enqueue_script('cartrawler', get_template_directory_uri() . 'https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js', array(), '20120802', '1');
    wp_enqueue_script('cartrawler', get_template_directory_uri() . '/js/jquery.colorbox-min.js', array(), '20120802', '1');
    wp_enqueue_script('cartrawler', get_template_directory_uri() . '/js/activemenu.js', array(), '30120802', '1');
}
add_action('wp_enqueue_scripts', 'theme_scripts');

I have refered to this link in helping me out on the small script that makes this possible: http://jsfiddle.net/K6F8m/

I know i have no need for colorbox, but I thought I might have a need for it down the road :) — Rift
– Rift, Commented Sep 11, 2012 at 22:35

John Conde · Accepted Answer · 2012-09-30 16:04:51Z

1

If you create your menu using the function wp_nav_menu() function Wordpress automatically adds classes that allow you to create the "active menu highlight" effect that you are looking for.

A few of these classes are .current-menu-item, .current-menu-parent, .current-{object}-parent, .current-{type}-parent, etc.

Here is the official documentation.

edited Sep 30, 2012 at 16:04

John Conde

220k100 gold badges464 silver badges504 bronze badges

answered Sep 11, 2012 at 22:44

Kenny Kaye

111 silver badge1 bronze badge

Sign up to request clarification or add additional context in comments.

2 Comments

Rift Over a year ago

What if i have previously made a working menu on top of a sandbox theme, and i want to keep that menu? Can i still implement it, and how? Here's how the site looks right now. lufter.dk/test/wordpress/?page_id=21

Kenny Kaye Over a year ago

Do you mean that you would like to use your sandbox theme (with the menu) to be incorporated into your new theme? If so you should research the parent-child theme relationship. You can create your new theme as a child to your sandbox theme. This way your menu will automatically be loaded (i assume in the sandboxes functions.php file.) link Does this answer your question?

Mark · Accepted Answer · 2012-09-11 22:41:49Z

0

Your first wp_enqueue_script line is bad. You're using a fully qualified URL (https://ajax.googleapis.com...) but preceding it with your theme's URL. Try replacing the first wp_enqueue_script line with:

wp_enqueue_script('cartrawler', 'https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js', array(), '20120802', '1');

If that doesn't fix your problem outright, please elaborate on what the actual problem you're having is. Are the scripts not showing up in the HTML? Are they in the HTML but not working?

answered Sep 11, 2012 at 22:41

Mark

1,16710 silver badges19 bronze badges

Comments

Rift · Accepted Answer · 2012-09-14 15:17:04Z

0

Okay so by looking a bit more upon the DOM I noticed that wordpress has already made a class for unknown menu items:

div#menu li.current_page_item a{
color:#000;
}
div#menu li.current_page_item a:hover{
color:#662D91;
}

My problem now is that all the children of that parent also becomes highlighted in black, when I enter the parent page. :( I can't remember how to fix this!!

answered Sep 14, 2012 at 15:17

Rift

434 bronze badges

Collectives™ on Stack Overflow

Adding js to wordpress for css activemenu highlight

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related