2

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?

2
  • On what action do you enqueue the scripts?
    – fuxia
    Nov 8 '16 at 1:49
  • This is my first time trying to script in Wordpress. Am I missing the add action command??
    – Ethan
    Nov 8 '16 at 1:54
3

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' );
    }
}
13
  • 1
    But registration should happen on wp_loaded.
    – fuxia
    Nov 8 '16 at 1:55
  • Only problem is now the stylesheets are not loading.
    – Ethan
    Nov 8 '16 at 2:03
  • @toscho interesting. Thank you! Updated answer accordingly. Nov 8 '16 at 3:10
  • Hi Ethan, are you viewing the page-home.php template? Based on the way this code is set up, NLBBC_styles will only be enqueued on that template. If you want NLBBC_styles enqueued everywhere, move wp_enqueue_style( 'NLBBC_styles'); outside of the conditional statement. Nov 8 '16 at 3:12
  • 1
    @toscho - does wp_loaded conflict with what is stated on the codex? codex.wordpress.org/Function_Reference/wp_register_style - "Use the wp_enqueue_scripts action to call this function. Calling it outside of an action can lead to problems. See #17916 for details."
    – jgraup
    Nov 8 '16 at 5:13

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.