How to enqueue styles for one specific page template

Related searches

I've got a page template which is acting as a 'Landing Page' and doesn't need specific styles from other areas of the website.

I've managed to remove the unwanted styles and add the new styles by targeting the page ID but I need it to only happen when it's a particular page template. I can't seem to get it to work when doing a check against the page template via the is_page_template() function.

In functions.php:

if ( !function_exists('scripts_and_css') ) {
    function scripts_and_css() {
        if(is_page(79806))
        {
            wp_enqueue_style('landingpage', get_stylesheet_directory_uri() . '/css/landing__page.css', '', null);
            wp_enqueue_script('landingpage', get_stylesheet_directory_uri() . '/js/landing-page.js', null);
            wp_dequeue_style( 'layout', get_template_directory_uri().'/css/layout.css', '', null );
        }
    }
}
add_action('wp_enqueue_scripts', 'scripts_and_css');

If I then change this to use the template name, it completely fails and doesn't load or remove any of the scripts or stylesheets.

My page template filename called page-landing-page.php:

<?php
/**
 * Template Name: Landing Page
 * The template for displaying the content for the landing pages.
?>
<?php wp_head(); ?>

// Got all my content loading in here.

<?php wp_footer(); ?>

Here's an example of what I've tried up to now in the functions.php fle:

if(is_page_template('Landing Page'))
{
    // Enqueue / Dequeue scripts / styles
}

--

if(is_page_template('page-landing-page.php')) // This is the name of my page template
{
    // Enqueue / Dequeue scripts / styles
}

--

if(is_page_template('landing-page.php')) // This is the name of my page template
{
    // Enqueue / Dequeue scripts / styles
}

--

if(is_page_template('landing-page')) // This is the name of my page template
{
    // Enqueue / Dequeue scripts / styles
}

Just cannot seem to get it to work. Any guidance would be appreciated!


For some reason, if you do not select the page template from the Template Dropdown on the edit page, is_page_template('template-name.php') doesn't seem to work.

I have found a kind-of-a-hacked solution to your problem. It seems to be working for both of the cases. Either you select the page template from the dropdown or the template gets selected by the page-slug.

if( basename( get_page_template() ) == 'page-price-watch.php' ) 
{
    // Enqueue / Dequeue scripts / styles
}

Thanks.

How to enqueue styles for one specific page template, For some reason, if you do not select the page template from the Template Dropdown on the edit page, is_page_template('template-name.php')� This is a conditional loading of css file by page template (css will be loaded on on the pages with tamplate-name.php). You can change the condition by another one.


"is_page_template" works by checking the post meta. If the template is automatically pulled, for example because it's called home.php, the template being used is not filled into the meta. Meta is only filled when actively selecting the template for a page in the editor.

These always work and do not rely on the meta:

function your_enqueue_styles() {

    if (is_front_page()) {
        //works
    }

    if (is_page( array('pageslug1', 'pageslug2'))) {
        //works
    }

    global $template;
    if (basename($template) === 'template-name.php') {
        //works
    }

}
add_action( 'wp_enqueue_scripts', 'your_enqueue_styles' );

Try something like this to display the currently used page template at the bottom of the page when viewed as an admin, makes it easier to troubleshoot:

// Page template finder
function show_template() {
    if( is_super_admin() ){
        global $template;
        $output = '<div style="position: absolute; bottom: 0; width: 100%; text-align: center; z-index: 100; background-color: white; color: black;">';
        ob_start();
        print_r($template);
        $output .= ob_get_clean().'</div>';
        echo $output;
    }
}
add_action('wp_footer', 'show_template');

Conditionally Enqueue a Stylesheet into WordPress for a Certain Page, This function will check to see if a page is using a certain template (which is what I used). If it is then it will enqueue the stylesheet: Invalid GitHub� Ok, so far so good. But in some cases we don’t need to load all scripts on every page but only for specific page template(s). In the previous example your theme will load every script on every front-end page which may slow down page load every time someone visits your site.


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

Load JavaScript only on specific WordPress pages, Imagine that your theme have a page template called “Slider Portfolio” which for example handles your portfolio items with some jQuery slider (� Using wp_enqueue. Let’s say you have two files: style.css. This one contains CSS that is used globally throughout your site. script.js. This one contains javascript that is used globally throughout your site. We’re going to assume that all of the styles and all of the scripts in each of these files are needed and used everywhere on your site.


wp_enqueue_style() | Function, 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� For example, keep all the general CSS in one group, the responsive CSS grouped by resolution and finally the plugin-specific CSS grouped by plugin. This will save you a lot of time later on. If you stop using a plugin you can then just remove the group of styles specific to that plugin.


wp enqueue style on specific page templates, Enqueuing is the WordPress way to add a stylesheet or JavaScript file homepage); You only want a JS file or CSS ruleset on a certain page� I want to keep my main WordPress theme for the majority of the site, but I have a very specific application that I want to use Bootstrap for on just a couple of pages. To avoid losing my custom work when the theme updates, I made a child theme with the page template and then selected that template from WordPress for the appropriate page.


How to Conditionally Enqueue a JavaScript File in WordPress , There are two well-documented WordPress functions, one called wp_register_style() and the other wp_enqueue_style() that allows us to do this and it can be added either to parent or child theme functions.php file in order tell WordPress to look for it and load it in the site header.