24

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.

28

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.

22

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

  • You're welcome Sean, glad to help. – Edward Caissie Aug 15 '12 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 '15 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 '16 at 3:32
2

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

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

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

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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