wp enqueue style on specific page templates

Question

wp enqueue style on specific page templates

Sean

2022年4月26日 05:27

I am in the process of a theme, I would like to add landing pages using page-templates. I cannot find anywhere that shows how to enqueue style or js for specific page templates. Any suggestions. Ex. Landing Page 1 - landing-page-template-one.php will need very different style and js than the blog or homepage.

Topic wp-enqueue-style wp-enqueue-script conditional-content Wordpress

Category Web

Pratik bhatt · Accepted Answer · 2022年4月26日 05:27

1

Pratik bhatt answered at 2022年4月26日 05:27

Try this

 if(is_page_template(array( 'custom-template/about.php') )) 
    {            
        wp_enqueue_style('about-css', get_template_directory_uri() . '/assets/css/about.css', array(), time(), 'all');
    }

Rajeev · Accepted Answer · 2020年2月14日 06:05

This one works perfectly.

      function my_enqueue_stuff() {

 // "page-templates/about.php" is the path of the template file. If your template file is in Theme's root folder, then use it as "about.php".

        if(is_page_template( 'page-templates/about.php' ))
        {
            wp_enqueue_script( 'lightgallery-js', get_template_directory_uri() . '/js/lightgallery-all.min.js');
            wp_enqueue_script('raventours-picturefill', "https://cdn.jsdelivr.net/picturefill/2.3.1/picturefill.min.js", true, null);
        }
        }
        add_action( 'wp_enqueue_scripts', 'my_enqueue_stuff' );

Touhid Imam · Accepted Answer · 2019年5月22日 10:40

Say your template name is temper and you want to load bootstrap on that page so you can enqueue style on specific page templates like this:

go to function.php file then check the condition like this:

function temper_scripts() {

    if(basename(get_page_template()) == 'temper.php'){

       wp_enqueue_style('bootstrap', '//stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css');

    }

}

add_action('wp_enqueue_scripts', 'temper_scripts');

Razon Komar Pal · Accepted Answer · 2018年10月21日 04:58

If the page template is located in a subdirectory of the theme (since WP 3.4), prepend the folder name and a slash to the template filename, e.g.:

is_page_template( 'templates/about.php' );

So, whole function look like:

function my_enqueue_stuff() {
  if ( is_page_template( 'landing-page-template-one' ) ) {
    /** Call landing-page-template-one enqueue */
  } else {
    /** Call regular enqueue */
  }
}
add_action( 'wp_enqueue_scripts', 'my_enqueue_stuff' );

Reference: Official Documentations

richplane · Accepted Answer · 2017年2月21日 13:58

I don't know if the solutions provided in other answers used to work, but (since there's no accepted answer!) it seems the correct answer is currently:

function my_enqueue_stuff() {
    if ( get_page_template_slug() == 'landing-page-template-one.php' ) {
        wp_enqueue_script('my-script-handle', 'script-path.js', ... );
    }
}
add_action( 'wp_enqueue_scripts', 'my_enqueue_stuff' );

is_page_template() only works outside the loop, according to https://developer.wordpress.org/reference/functions/is_page_template/.

kchjr · Accepted Answer · 2012年8月8日 21:01

If you plan to do a lot of WP development you should bookmark this page: http://codex.wordpress.org/Conditional_Tags

The other answer works but the conditional relies upon your page slug (myurl.com/this-is-the-slug) never changing. A more reliable method (IMO), and one that fits this case, would be to use the is_page_template('example-template.php') conditional check instead.

Edward Caissie · Accepted Answer · 2012年8月8日 20:30

You can use the is_page( 'landing-page-template-one' ) conditional around your page specific styles / scripts as part of your over-all enqueue statements.

function my_enqueue_stuff() {
  if ( is_page( 'landing-page-template-one' ) ) {
    /** Call landing-page-template-one enqueue */
  } else {
    /** Call regular enqueue */
  }
}
add_action( 'wp_enqueue_scripts', 'my_enqueue_stuff' );

You could even chain more elseif into the above for other pages, etc.

Reference: Functions Reference - is_page()

wp enqueue style on specific page templates

About