36

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.

8 Answers 8

40

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.

29

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

3
  • You're welcome Sean, glad to help. Aug 15, 2012 at 19:27
  • 2
    I think using is_page_template() is preferable since the page slug is easily changed. This solution, while it works fine, would break if the slug was changed. See kchjr's solution if anyone runs into problems in the future.
    – BODA82
    Nov 14, 2015 at 22:46
  • Thank you! For others who stumbled upon this: the conditional statement is_page must be in the function attached to the action and not wrapping the add_action statement itself. If you do wrap the add_action statement in a conditional, it will be to early in the processing of the page to know what page it is.
    – Hendeca
    May 25, 2016 at 3:32
7

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

1
  • Thanks for mentioning that the is_page_template () check should be inside the enqueue function, and not around it.
    – gregn3
    Jul 1, 2019 at 18:48
5

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

2
1

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

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

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


Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.