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
    Commented Nov 8, 2016 at 1:49
  • This is my first time trying to script in Wordpress. Am I missing the add action command??
    – Ethan
    Commented Nov 8, 2016 at 1:54

1 Answer 1

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
    Commented Nov 8, 2016 at 1:55
  • Only problem is now the stylesheets are not loading.
    – Ethan
    Commented Nov 8, 2016 at 2:03
  • @toscho interesting. Thank you! Updated answer accordingly. Commented Nov 8, 2016 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. Commented Nov 8, 2016 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
    Commented Nov 8, 2016 at 5:13

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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