How to enqueue CSS and JS only on specific template?

Question

I'm busy with my home.php template and I need a few CSS/JS files that are only loaded on that specific template. I tried doing it with

if ( is_page_template( 'home.php' ) ) { //ENQUEUE CODE },

but somehow that doesn't work. I don't have the slightest idea where the error is. When I remove the if-condition, all files are loaded correctly, but when I add the condition, none of them is loaded.

Help on how to fix this is much appreciated!

if ( is_page_template( 'home.php' ) ) {

    
wp_enqueue_style( 'home', get_template_directory_uri() . '/assets/css/home.css', array(), filemtime(get_template_directory() . '/assets/css/home.css'), 'all' );


if ( 'hide' !== get_theme_mod( 'sidebar_position', 'hide' ) ) {
wp_enqueue_style( 'sidebar', get_template_directory_uri() . '/assets/css/sidebar.css', array(), filemtime(get_template_directory() . '/assets/css/sidebar.css'), 'all' );
}


wp_register_script( 'blog-ajax-script', get_stylesheet_directory_uri(). '/assets/js/blog-ajax-script.js', array('jquery'), filemtime(get_template_directory() . '/assets/js/blog-ajax-script.js'), true );
$script_data_array = array( 'ajaxurl' => admin_url( 'admin-ajax.php' ), 'security' => wp_create_nonce( 'load_more_posts' ), );
wp_localize_script( 'blog-ajax-script', 'blog', $script_data_array );
wp_enqueue_script( 'blog-ajax-script' );

}

Answer 1

You are already doing things properly (in enqueueing CSS and JS files only on specific template) and is_page_template() is indeed a function you can use to check if the current or a specific Page or post is using a certain Page Template — i.e. a template having the PHP comment Template Name: <name here> at the top of the file.

However, the function works only with static Pages or posts that have an entry in the WordPress' posts database table which then enables you to select a Page Template for that specific Page or post. Or which enables you to programmatically (e.g. using the update_post_meta() function) set the page template for that Page or post:

update_post_meta( 123, '_wp_page_template', 'your-template.php' ); // 123 is the post ID

But for dynamic pages like the home page when it's set as the blog page which displays the latest posts, is_page_template() will likely return false, so for the blog page, I'd just use is_home() which is one of the many conditional tags in WordPress:

function my_theme_styles() {
    if ( is_home() ) {
        // Enqueue styles for the home/blog page.
    }

    // Enqueue other styles.
}
add_action( 'wp_enqueue_scripts', 'my_theme_styles' );

function my_theme_scripts() {
    if ( is_home() ) {
        // Enqueue scripts for the home/blog page.
    }

    // Enqueue other scripts.
}
add_action( 'wp_enqueue_scripts', 'my_theme_scripts' );

So for such dynamic pages, it's not easy to determine the exact template being used, but instead of checking against the template, you could just use the relevant conditional tag like is_home(), is_front_page(), is_category(), etc. :)