php - How to enqueue CSS and JS only on specific template?

admin管理员组

文章数量:1336656

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' );

}

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' );

}

• php
• page-template
• wp-enqueue-script
• wp-enqueue-style
• conditional-tags

Share Improve this question asked Jun 18, 2020 at 13:14 ralphjsmitralphjsmit 40266 silver badges2323 bronze badges 4

• Did you put the code inside a hook callback? Which hook, if so? – Sally CJ Commented Jun 18, 2020 at 14:29
• The above code snippet is part of the add_action( 'wp_enqueue_scripts', 'amb_styles' ); hook. It is inside the amb_styles(). – ralphjsmit Commented Jun 18, 2020 at 14:36
• 1 Is home.php actually a Page template, i.e. it has the Template Name: header and that the page you're checking is indeed using that template? Perhaps you're just looking for is_home() (for checking if the current page is the home page)? – Sally CJ Commented Jun 18, 2020 at 14:42
• 1 Changing the conditional into is_home() did the trick. What do you mean with the Template Name: header? And do probably you have a list with all similar conditions like is_home()? If you add it as an answer, I'll mark it as correct @SallyCJ. Thanks a lot! – ralphjsmit Commented Jun 18, 2020 at 14:44

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 2

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. :)

本文标签： phpHow to enqueue CSS and JS only on specific template