Proper Way to Load stylesheet on Condition

Question

I am creating a child theme for my site and inside my functions.php I added a code to load a specific css file ONLY where it is the HOME page:

 // enqueue styles for child theme
 function wowdental_enqueue_styles() {

 // enqueue parent styles
wp_enqueue_style('Divi', get_template_directory_uri() .'/style.css', get_the_time() );

 // Flip3d css
 wp_enqueue_style( 'flip', get_stylesheet_directory_uri() . '/css/flip.css', get_the_time() );

// flip3d only on home page
if( is_home()  ) {
    wp_enqueue_style('flip');
}
}
 add_action('wp_enqueue_scripts', 'wowdental_enqueue_styles');

I placed the condition for if is_home() but the stylesheet gets pulled in ALL pages regardless of whether home page or not.

I have also used if (is_home() || is_front_page() ) but I get the same result.

What am I doing wrong here??

Answer 1

You'll need to put the if statement around the line that enqueues in the first place.

// enqueue styles for child theme
function wowdental_enqueue_styles() {

    // enqueue parent styles
    wp_enqueue_style('Divi', get_template_directory_uri() .'/style.css', 
    get_the_time() );

    // Flip3d css
    // flip3d only on home page
    if( is_home()  ) {
        wp_enqueue_style( 'flip', get_stylesheet_directory_uri() . 
'/css/flip.css', get_the_time() );
    }


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

To do it like you have it in the original code, you'd need to use wp_register_style first, then keep the enqueue in the if.

Answer 2

From the docs:

Registers the style if source provided (does NOT overwrite) and enqueues.

That means that when you use wp_enqueue_style the css file will be registered and enqueued for output.

Before the if condition you have to register the css file with the use of wp_register_style and then inside the condition to enqueue it.