1

My theme's functions.php hooks into wp_enqueue_scripts to register a couple of stylesheets that are used by various site pages. Here's a simplified version of my configuration:

add_action("wp_enqueue_scripts", function() {       
    // This stylesheet is used on *every* page
    wp_register_style("sitewide", get_template_directory_uri() . "/assets/sitewide.css");
    wp_enqueue_style("sitewide");

    // These stylesheets are used by *some* pages
    wp_register_style("pagetype1", get_template_directory_uri() . "/assets/pagetype1.css", array("sitewide"));
    wp_register_style("pagetype2", get_template_directory_uri() . "/assets/pagetype2.css", array("sitewide"));
});

Every tutorial I've found so far enqueues every stylesheet from the callback itself, but I don't want to do this. I assume that this would cause all my stylesheets to be included on every page, which is not what I want. I only want to enqueue pagetype1.css if the underlying template for a certain page uses it.

Let's say that I want my front page to use the page type 1 stylesheet. My intuition would be to call wp_enqueue_style("pagetype1"); in front_page.php right before including the header, which contains the wp_head() call. This doesn't do anything. The sitewide CSS on the other hand was included like I expected. What am I doing wrong?

I know that there is a workaround out there, but I'd prefer that front-page.php retains control over which additional stylesheets are loaded.


Edit: This is what I ended up with after some discussion with toscho. I added this to functions.php:

// Enqueues a stylesheet handle or an array of stylesheet handles.
function mytheme_enqueueStyle($handles) {
    if (is_array($handles)) {
        add_action("wp_enqueue_scripts", function() use ($handles) {
            foreach ($handles as $handle) {
                wp_enqueue_style($handle);
            }
        });
    } else if (is_string($handles)) {
        add_action("wp_enqueue_scripts", function() use ($handles) {
            wp_enqueue_style($handles);
        });
    } else {
        wp_die("Unsupported parameter type.");
    }
}

Then I called mytheme_enqueueStyle("pagetype1") from front-page.php to enqueue the stylesheet. This way of doing things ended up being incompatible with WP Minify, though.

1
  • I don't think that there is any way to use wp_enqueue_scripts inside a template. The workaround in your link or the solution from toscho is the way to go. If you really want to include the script logic inside the template files you'll need to just use a <script>/<style> tag. This would be ok, if this is a custom development (enqueue script is primarly used for dependency management & for plugins to hook into the added scripts to exchange/remove or minify/combine them).
    – s1lv3r
    Apr 26, 2013 at 15:20

1 Answer 1

2

Check the current template in your callback. This is a post meta field named _wp_page_template.

add_action("wp_enqueue_scripts", function() 
{
    // This stylesheet is used on *every* page
    wp_register_style("sitewide", get_template_directory_uri() . "/assets/sitewide.css");
    wp_enqueue_style("sitewide");

    if ( ! is_singular() )
        return;

    $template = get_post_meta( get_the_ID(), '_wp_page_template', TRUE );

    // now enqueue further stylesheets depending on the current template
});
7
  • This solution shifts control over which stylesheets are loaded from front-page.php to functions.php, which is why I didn't like the workaround I linked to from my original post. Isn't there a mechanism that lets front-page.php decide for itself?
    – Pieter
    Apr 26, 2013 at 15:19
  • @Pieter You could also check is_front_page() in the enqueue function, or add an action callback on top the front-page.php. I think there should be as little logic in a template as possible.
    – fuxia
    Apr 26, 2013 at 15:32
  • Then I suggest a compromise: I add a function mytheme_enqueueStyle($arrayOfStyleHandles) to functions.php that creates the action callback for the template. front-page.php retains control and can enqueue additional stylesheets with a one-liner. Does this address your concerns?
    – Pieter
    Apr 26, 2013 at 15:48
  • Maybe I misunderstand you. You can use is_front_page() wherever you want. But if you use add_action() in a template file, the code will be hard to maintain, because that’s not the first place to search for these things.
    – fuxia
    Apr 26, 2013 at 15:56
  • I was thinking about putting something along these lines in functions.php. I'd call this function from front-page.php to enqueue pagetype1 indirectly without using add_action in the template. Strangely this doesn't work, despite that calling add_action directly from the template file did work.
    – Pieter
    Apr 26, 2013 at 17:48

Your Answer

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

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