wp enqueue style on specific page templates

Question

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.

Answer 1

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.

Answer 2

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()

Answer 3

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

Answer 4

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/.

Answer 5

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

Answer 6

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

Answer 7

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

Answer 8

function enqueue_my_script() {
    if ( is_page_template( 'my-page-template.php' ) ) {
        wp_enqueue_script( 'my-script', get_template_directory_uri() . '/js/my-script.js', array( 'jquery' ), '1.0', true );
    }
}
add_action( 'wp_enqueue_scripts', 'enqueue_my_script' );

In this example, the enqueue_my_script function is hooked to the wp_enqueue_scripts action, which is called by WordPress when it is loading scripts and stylesheets.

The function uses the is_page_template function to check if the current page is using a specific page template (in this case, 'my-page-template.php'). If the condition is true, the wp_enqueue_script function is called to enqueue the 'my-script' script.

The wp_enqueue_script function takes the following arguments:

'my-script': This is the handle or identifier for the script. It should be unique and is used to reference the script when it is registered.

get_template_directory_uri() . '/js/my-script.js': This is the URL of the JavaScript file.

array( 'jquery' ): This specifies that the script depends on the jquery script, which means that it should be loaded after the jquery script.

'1.0': This is the version number of the script.

true: This specifies that the script should be loaded in the footer of the HTML document.

You can use other conditional tags, such as is_home, is_front_page, is_single, and `

---