How to conditionally enqueue a stylesheet only for a certain page(s)?

Question

Before I get started, I want to acknowledge that there are some really good articles that are targeted at how to conditionally enqueue scripts based on page/post content.

• WordPress Plugin Development - How To Include CSS and JavaScript Conditionally And Only When Needed By The Posts
• How to load JavaScript like a WordPress Master

These are great, but they're much more advanced than what I want to do.

I feel like the answer is using the built-in is_page() function (codex), but when I try to use it the site breaks, or just doesn't work.

I think I'm just executing the conditional logic in the wrong spot.

Here's what I've tried to add to my functions.php:

function wpse39130_register_more_stylesheets() {
    wp_register_style( 'stylesheet_name', get_stylesheet_directory_uri() . '/stylesheet.css' );
}
add_action( 'init', 'wpse39130_register_more_stylesheets' );

function wpse39130_conditionally_enqueue_my_stylesheet() {
    // only enqueue on product-services page slug
    if ( is_page( 'products-services' ) ) {
        wp_enqueue_style( 'stylesheet_name' );
    }
}
add_action( 'wp_enqueue_scripts', 'wpse39130_conditionally_enqueue_my_stylesheet' );

When I remove the conditional part of it, the stylesheet is successfully enqueued so I know that works.

Answer 1

I copy pasted your code into my dev environment, changed nothing but the page name, and it works just fine. Are you sure that it's not being enqueued and you just have it pointed wrong or that the page is not named incorrectly or something?

Answer 2

What you've got is right--you're just hooking it to the wrong action. Try the "wp" action instead of "init". When init runs, the is_page() won't work properly yet.

EDIT: I'm wrong. I thought you had add_my_stylesheet hooked to init, but you don't. is_page should work from the enqueue_scripts action. Sorry...carry on...

Answer 3

I was trying to follow the same code and see if I can get same result, what I noticed is_page() doesn't work as expected. so I followed global variable $post and checked the category name/slug and latter use simple text compare to decide the action.

    global $post;
    $postcat = get_the_category( $post->ID );
if ( ! empty( $postcat ) ) {
 echo esc_html( $postcat[0]->ID );   // Debug 
 echo esc_html( $postcat[1]->name ); // Debug 
 echo var_dump($postcat ); // Debug 
}

The value of category if its just one category (not subcategory ) would be

echo esc_html( $postcat[0]->name ); //Display name on screen

For Sub category you will have following variable filled in

echo esc_html( $postcat[1]->name ); //Display name on screen

Now based upon your need use the code below, like I am using to check subcategory name:

//Use $postcat[0]->name for parent category name Can be your sub category name 
        if ( $postcat[1]->name == 'Shopping' ) { 

                wp_enqueue_style( 'stylesheet_name' );
            }else{
        // other code 
        }

Full Code:

        function wpse39130_register_more_stylesheets() {
        wp_register_style( 'stylesheet_name', get_stylesheet_directory_uri() . '/whatsqshop.css' );
    }
    add_action( 'init', 'wpse39130_register_more_stylesheets' );

    function wpse39130_conditionally_enqueue_my_stylesheet() {
        // only enqueue on product-services page slug
    global $post; //GLobal Post variable 
    $postcat = get_the_category( $post->ID ); // Get the Category info from POST ID

    if ( ! empty( $postcat ) ) { // IF POST CATEGORY IS NOT EMPTY
    //    echo esc_html( $postcat[0]->slug );   //Display SLUG On output screen <Debug option>
  //echo esc_html( $postcat[0]->name ); //Display name on screen
     //echo esc_html( $postcat[1]->name ); //Display name on screen

    //echo var_dump($postcat ); // For debug 
    }
    //  if( is_single(88)) {
       if ( $postcat[1]->name == 'Shopping' ) {
            wp_enqueue_style( 'stylesheet_name' );
        }else{
    //wp_enqueue_style( 'stylesheet_name' );
    }

    }
    add_action( 'wp_enqueue_scripts', 'wpse39130_conditionally_enqueue_my_stylesheet' );

Example: *No Extra CSS http://whatsq.com/category/gst16/

*Extra CSS with Background from the above category only http://whatsq.com/information-technology/shopping-information-technology/mothers-day-gift-plan-show-mom-the-love-with-flowers-and-and-more/