2

I'm trying to add a class to an element within the main menu, but nothing is happening. I'm using Underscores starter theme, which has this in the header.php:

<?php
    wp_nav_menu( array(
        'theme_location' => 'menu-1',
        'menu_id'        => 'primary-menu',
        'after'          => '<span class="fa fa-times"></span>',
    ) );
?>

I then put this in the navigation.js file (also tried inline in the footer.php):

$(".menu-item-has-children .span").click(function() {
    $(".menu-item-has-children .sub-menu").removeClass("toggled");
    $(this).next(".sub-menu").toggleClass("toggled");
});

But nothing happens. I've also tried a simple:

$('body').click(function() {
    alert("Yeah!");
});

And nothing happens there either. This does work:

window.onload = function() {
    alert("Yeah!");
}

jQuery is loading:

<script type='text/javascript' src='http://example.com/wp-includes/js/jquery/jquery.js?ver=1.12.4'></script>

navigation.js is enqueued in functions.php:

function themename_scripts() {

wp_enqueue_style( 'themename-style', get_stylesheet_uri() );

wp_enqueue_script( 'themename-navigation', get_template_directory_uri() . '/js/navigation.js', array(), '20151215', true );

wp_enqueue_script( 'themename-skip-link-focus-fix', get_template_directory_uri() . '/js/skip-link-focus-fix.js', array(), '20151215', true );

if ( is_singular() && comments_open() && get_option( 'thread_comments' ) ) {
    wp_enqueue_script( 'comment-reply' );
}
}
add_action( 'wp_enqueue_scripts', 'themename_scripts' );

...So what basic error have I made?

  • Are you getting any errors when you inspect the page (E.g $ is not a function)? Are you using/have you tried wrapping your jQuery code in a document ready function? Where is navigation.js being enqueued? – mrmadhat Nov 24 '17 at 21:56
  • Ah yes, I get $ is not a function. Wrapping in document ready function doesn't seem to help. navigation.js Is being enqueued in functions.php - I have edited my question to detail this. – user2265915 Nov 27 '17 at 14:47
  • WordPress loads jQuery in noConflict. You can switch all your $ with jQuery or read this answer for more information – Howdy_McGee Nov 27 '17 at 15:30
2

You haven't passed jquery as a dependency for your script, and you are using the dollar sign too, which is not directly supported in WordPress due to conflict.

First, pass jQuery as a requirement while enqueuing your navigation.js:

wp_enqueue_script( 
    'themename-navigation', 
    get_template_directory_uri() . '/js/navigation.js', 
    array('jquery'), 
    '20151215', 
    true 
);

Then, wrap your code in a self invoking function:

(function($){
    // You have access to $ here
})(jQuery);

Or even better, define the $:

var $ = jQuery.noConflict();

$('body').click(function() {
    alert("Yeah!");
});

Done.

  • I can't tell you how many times I've added jQuery to the header cause I couldn't figure out why it wouldn't work without it when it was supposed to be included already. Enqueing with navigation ... brilliant! – Keryn Gill Jun 8 '18 at 1:44

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.