3

I am attempting to dynamically load stylesheets and scripts based on the template name. So if I have a template named page-signup.php then it will load the corresponding stylesheet page-signup.css and page-signup.js if they exist for that page from a specific directory in my theme folder.

Here is what I have so far in functions.php of my theme. It does not currently load any styles or scripts when the css and js files are present in the proper directory:

/**
 * Auto loads scripts and styles based on the page name if they exist.
 */
function mytheme_bootstrap_page_resources() {
    if( is_page_template() ) {
        $page_template = basename( get_page_template(), '.php' );
        $css_file_path = get_template_directory() . "/css/pages/$page_template.css";
        $js_file_path = get_template_directory() . "/js/pages/$page_template.js";
        $css_file_uri = get_template_directory_uri() . "/css/pages/$page_template.css";
        $js_file_uri = get_template_directory_uri() . "/js/pages/$page_template.js";

        if(file_exists($css_file_path)){
            wp_enqueue_style($page_template, $css_file_uri);
        }

        if(file_exists($js_file_path)){
            wp_enqueue_script($page_template, $js_file_uri);
        }
    }
}
add_action('wp_enqueue_scripts', 'mytheme_bootstrap_page_resources');
2

A couple issues here...

First, the init hook is too early for WordPress to know which page template you're going to be using. (So the is_page_template() function will always return false).

Just go ahead and hook your function to wp_enqueue_scripts (which you're probably already doing for your global CSS / JavaScript). And then check for the page template and run your logic inside that function.

Second, get_template_directory_uri() will return the web URL of your file and PHP's file_exists expects a directory path on disk (not a URL). Use the get_template_directory() function to get that path, and enqueue it with get_template_directory_uri().

Here's a working example, including the proper hook into wp_enqueue_scripts but you'll want to move the contents of load_resources() into your own function in your theme that's already hooked.

function load_resources() {
    if( is_page_template() ) {
        $page_template = basename( get_page_template(), '.php' );
        $css_file_path = get_template_directory() . '/css/pages/' . $page_template . '.css';
        $js_file_path = get_template_directory() . '/js/pages/' . $page_template . '.js';
        $css_file_uri = get_template_directory_uri() . '/css/pages/' . $page_template . '.css';
        $js_file_uri = get_template_directory_uri() . '/js/pages/' . $page_template . '.js';

        if(file_exists($css_file_path)){
            wp_enqueue_style($page_template, $css_file_uri);
        }

        if(file_exists($js_file_path)){
            wp_enqueue_script($page_template, $js_file_uri);
        }
    }
}
add_action( 'wp_enqueue_scripts', 'load_resources' );
  • Thanks for catching all those errors. It got me a lot closer. I am still unable to get css/pages/page-signup.css or js/pages/page-signup.js to load for pages/page-signup.php. – Adam Jul 27 '14 at 18:04
  • Are you getting any specific errors (such as 404 errors)? Meaning, is WordPress trying to load something but the path or filename are wrong? Also, ensure you are definitely using the template you think you're using on that specific page you're testing on. I added this code to a test installation and it worked for me. – Jared Cobb Jul 27 '14 at 19:01
  • Also, as a starting point, that entire snippet should be workable if placed in your functions.php file... Rather than trying to adapt it into your current theme. (Again, just as a test). – Jared Cobb Jul 27 '14 at 19:03
  • I got xdebug setup and I was able to hit the function. is_page_template() is false. When I go inside it, the $page_template variable is an empty string when I hit this line: $page_template = get_page_template_slug( get_queried_object_id() ); Mmmmh. My custom templates are not stored in the root of my theme folder so maybe that's why they aren't getting picked up by this function? I made sure the page I am testing against is linked to this template. – Adam Jul 28 '14 at 3:03
  • @AdamFisher Yes, that's possible. Just as a test you can move your template into the root of the theme folder and name it page-signup.php. Ensure you have a comment at the top with /* Template Name: Signup */ and choose that template for the test page under the "Page Template" dropdown. – Jared Cobb Jul 28 '14 at 14:04

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.