jQuery code not firing on page despite registering and enqueuing scripts

by

I want to run this jQuery code I named service.js that I put into my theme’s js folder:

jQuery( document ).ready(function(){
jQuery("#tues").click(function(){
    jQuery(".servicecontent").fadeOut(800).hide();
    jQuery(".servicecontent3").fadeOut(800).hide();
    jQuery(".servicecontent2").fadeIn(800).show();
    jQuery(this).fadeIn(800).addClass("active");
    jQuery("#sunday").removeClass("active").addClass("day");
    jQuery("#wed").removeClass("active").addClass("day");
    });
jQuery("#wed").click(function(){
    jQuery(".servicecontent").fadeOut(800).hide();
    jQuery(".servicecontent2").fadeOut(800).hide();
    jQuery(".servicecontent3").fadeIn(800).show();
    jQuery(this).fadeIn(800).addClass("active");
    jQuery("#sunday").removeClass("active").addClass("day");
    jQuery("#tues").removeClass("active").addClass("day");
    });
jQuery("#sunday").click(function(){
    jQuery(".servicecontent2").fadeOut(800).hide();
    jQuery(".servicecontent3").fadeOut(800).hide();
    jQuery(".servicecontent").fadeIn(800).show();
    jQuery(this).fadeIn(800).addClass("active");
    jQuery("#wed").removeClass("active").addClass("day");
    jQuery("#tues").removeClass("active").addClass("day");
    });
})( jQuery );

I enqueued it in my functions.php folder as such:

$handle="NLBBC_styles";
wp_register_style( $handle, get_stylesheet_directory_uri().'/NLBBC_styles.css', array(), true );
wp_register_script('service', get_template_directory_uri() . '/js/service.js', array( 'jquery' ), true );
 if ( is_page_template( 'page-home.php' ) ) {
    wp_enqueue_style( $handle );
    wp_enqueue_script( 'service' );
}

Ignore the stylesheet lines

This won’t trigger for some reason on the page. What on earth is wrong here?

Maybe I’m missing something but is this correct here?

Do I need to deregister and then register the Google CDN of the jQuery library?

1 Answer
1

wp_enqueue_script() and wp_enqueue_style() should be called within a function attached to the wp_enqueue_scripts action:

// Register scripts and styles. They can be optionally enqueued later on.
add_action( 'wp_loaded', 'wpse245419_register_scripts' );
function wpse245419_register_scripts() {
    wp_register_style( 'NLBBC_styles', get_stylesheet_directory_uri() . '/NLBBC_styles.css', array(), true );
    wp_register_script( 'service', get_template_directory_uri() . '/js/service.js', array( 'jquery' ), true );
}

// Enqueue scripts and styles.
add_action( 'wp_enqueue_scripts', 'wpse245419_enqueue_scripts' );
function wpse245419_enqueue_scripts() {
    // Only enqueue scripts and styles when the page-home.php template is used.
    if ( is_page_template( 'page-home.php' ) ) {
        wp_enqueue_style( 'NLBBC_styles');
        wp_enqueue_script( 'service' );
    }
}

Leave a Comment