3

I have a child-theme -> parent-theme setup, where I need to have stylesheet called generated.css loaded in addition to the style.css file added by the active child-theme. The generated.css file is residing in the parent-theme and is being dynamically generated and provided by the parent-theme..

I started out the obvious way, simply adding an import rule to the beginning of the child-themes style.css:

/* Get Parent BASE CSS */
@import url('../parent-theme/style.css');


/* Get Parent GENERATED CSS */
@import url('../parent-theme/generated.css');

But this does not work for two reasons.

1) I want to be able to add a cache-busting version number to the file:

<link rel='stylesheet'  href='http://www.com/wp-content/themes/parent-theme/generated.css?ver=2389642855'>

2) I want the file to be loaded last, after the child themes style.css

Is it possible to hook in the loading of this generated.css stylesheet into the head so it is added after the child-theme's style.css using the functions.php of the parent theme?

What hook or WP mechanism could I use?

2 Answers 2

4

Absolutely!

Into functions.php, like you said. I'll call it cache_busting_styles because I like how it sounds.

First, you set up the style via wp_enqueue_style, then call it during the action hook wp_print_styles, Also, you'll want to set up a variable and pass it in there as the version number as well:

function cache_busting_styles() {
    //however you set up your version number here
    $version = 'cachebustingversion';
    wp_enqueue_style('cachebusting', get_bloginfo('template_url').'/parent-theme/generated.css', '', $version, 'screen');
}
add_action('wp_print_styles', 'cache_busting_styles');

wp_enqueue_style accepts 5 arguments, first the handle, an ID wordpress associates with the stylesheet (must be unique), second the URL of the file, third the other files it depends on (any required files that should be loaded along with this file, I left it null, you may add anything you want, it uses other enqueued stylesheets handles), fourth the version, which it adds to the end of the link URL just like what you are looking for (You may pass whatever you want into this, WordPress puts it's current version in here by default), and finally the media argument for the CSS file (screen, print, all, etc...) I hope this helps!

Edit: Just wanted to make clear that using this method should always add this sheet after the default style-sheet, but to make very sure, add_action accepts a third argument which is the priority of the action. A very large number will guarantee it running last, but something like 8 or 12 should do the trick, just in case you need to force the order.

add_action('wp_print_styles', 'cache_busting_styles', 12);
2
  • thanks that's great! Whats the difference between hooking the function responsible for enqueuing the stylesheet to the 'wp_print_styles' action rather than to 'get_header' action? Apr 8, 2011 at 12:04
  • The difference is not too much, really. get_header runs a little earlier than wp_print_styles. I like to stack my javascript into wp_print_scripts and my stylesheets into wp_print_styles just for organization purposes. I suppose it would actually be advisable to enqueue all scripts and stylesheets during wp_enqueue_scripts instead. codex.wordpress.org/Plugin_API/Action_Reference gives the order of actions on a homepage request, as long as you enqueue them before they are printed, you are in the clear. Apr 8, 2011 at 12:16
0

you can simply enqueue the generated.css style. Use the following code in your child themes function.php file

wp_enqueue_style('name_of_theme', get_bloginfo('template_directory') . '/generated.css', array(), '1.0', 'screen');

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.