how do I queue my Child stylesheet/s *after* every Parent stylesheet/statement?

1 Views

I’m using the well-written Oenology theme by Chip Bennett as the Parent to my own Child theme.

In my development process, I’ve discovered that there are some challenges for people writing Child themes when it comes to controlling styles.

Read More

I’ve just discovered that my main style.css file gets loaded before every other stylesheet link or statement in <head>, and this explains why I was having trouble overriding some of the Parent styles.

further study of the problem shows that various Parent stylesheets and styles can be queued in the <head> in three places; add_action('wp_print_styles', , add_action('wp_enqueue_scripts', , and then add_action('wp_head', .

to keep things simple, I’m planning to create two stylesheets. the first main ‘style.css’ sheet would only include the @import url() command, needed to load Oenology’s main stylesheet.

the second stylesheet would contain my Child rules. to make sure that it’s loaded after all of the other rules, I’d queue it using add_action( 'wp_head', .

does this sound reasonable? or is there a better (more correct) way to do it?

btw, does anyone know what ‘/parent-theme/style.css?MRPreviewRefresh=723‘ means?

Update

wp_enqueue_style() doesn’t appear to work in wp_head().

cheers,
Gregory

Post Views: 1

Related posts

Leave a Reply

3 comments

  1. Just FYI, this question probably borders on too localized, as it is specific to the Oenology Theme.

    That said, here’s where I think you’re having a problem: Oenology enqueues two style sheets:

    1. style.css, directly in the document head (thus before wp_head() is fired)

    2. {varietal}.css, at wp_enqueue_scripts, with priority 11, in functions/dynamic-css.php:

       /**
  * Enqueue Varietal Stylesheet
  */
 function oenology_enqueue_varietal_style() {

     // define varietal stylesheet
     global $oenology_options;
     $oenology_options = oenology_get_options();
     $varietal_handle = 'oenology_' . $oenology_options['varietal'] . '_stylesheet';
     $varietal_stylesheet = get_template_directory_uri() . '/varietals/' . $oenology_options['varietal'] . '.css';

     wp_enqueue_style( $varietal_handle, $varietal_stylesheet );
 }
 // Enqueue Varietal Stylesheet at wp_print_styles
 add_action('wp_enqueue_scripts', 'oenology_enqueue_varietal_style', 11 );

    The varietal stylesheet, which applies the “skin”, enqueues at priority 11, to ensure that the base stylesheet, style.css, loads first, and the varietal stylesheet loads second, in order to cause the correct cascade.

    So, if you need to override the varietal stylesheet, simply enqueue your second stylesheet after the varietal stylesheet; i.e. with a priority of at least 12 or greater.

    Edit

    To provide a more-general answer, to the more-general question:

    In order to override a Parent Theme stylesheet enqueue, you need to know two things:

    1. The action hook at which the stylesheet is enqueued
    2. The priority at which the callback is added to the hook

    Enqueue functions (wp_enqueue_script()/wp_enqueue_style()) can be properly executed anywhere between the init hook and the wp_print_scripts/wp_print_styles hooks. (The semantically correct hook at which to execute wp_enqueue_*() functions is currently wp_enqueue_scripts.) This list includes the following actions (among others; these are just the usual suspects):

    • init
    • wp_head
    • wp_enqueue_scripts
    • wp_print_scripts/wp_print_styles

    (Note that wp_enqueue_scripts, wp_print_styles, and wp_print_scripts all fire inside of wp_head, at a specific priority.

    So, in order to override a Parent-Theme stylesheet, you need to do one of the following:

    • De-enqueue the Parent-Theme stylesheet, via wp_dequeue_style( $handle )

    • Remove the Parent Theme callback that enqueues the style, via remove_action( $hook, $callback )

    • Use the CSS cascade to override the Parent-Theme stylesheet, by hooking your Child-Theme stylesheet wp_enqueue_style() call into the same hook with a lower priority or into a later hook.

      For this last option, if the Parent Theme uses:

      add_action( 'wp_enqueue_scripts', 'parent_theme_enqueue_style', $priority );

      …then the Child Theme would use:

      add_action( 'wp_enqueue_scripts', 'child_theme_enqueue_style', {$priority + 1} );

  2. the only way to guarantee that my styles had final say in the cascade was to include them at the end of <head> via the wp_head hook. wp_enqueue doesn’t work within wp_head so I had to echo the link directly:

    function gregory_enqueue_stylesheets() {
    $base = get_stylesheet_directory_uri();
    echo '<link rel="stylesheet" href="'.$base.'/style-gregory.css" type="text/css" media="all">';
    return;
}
add_action( 'wp_head', 'gregory_enqueue_stylesheets', 18 );

    finally, I can set my styles with relative ease, and without using high levels of specificity, or the !important rule which should only be used as a last resort.

    WP needs a better style enqueuing system. every style, whether a file link or an inline style, should be passed through the same hook allowing the Priority to determine their order. optionally for debugging purposes, it would be useful if the hook also output the Priority values of each style perhaps in commented form.

    Update

    I have been able to retain control of the styles in my Child theme while maintaining the original cascade of the Parent theme (which uses a main stylesheet, a sub-stylesheet, and a few style statements) by splitting my stylesheet into two as explained in the question. I am no longer using the wp_head() hook, instead using the proper and standard wp_enqueue_scripts() hook with a high ordinal to ensure that my stylesheet gets loaded last.

    my Child theme’s default stylesheet:

    /*
Theme Name: Oenology-Gregory
Template: oenology
Version: 20120506-0026
*/

@import url("/wp-content/themes/oenology/style.css");

    the function to enqueue my main stylesheet:

    function gregory_enqueue_stylesheets() {
    $base = get_stylesheet_directory_uri();
    wp_enqueue_style( 'style-gregory', $base.'/style-gregory.css' );
    return;
}
add_action( 'wp_enqueue_scripts', 'gregory_enqueue_stylesheets', 18 );

    there are however a few WP-generated style statements (i.e., not the parent theme) that are stated after my stylesheet, and I’ll have to look at using either high specificity css rules to override the rules that concern me, or look for hooks to disable them, in particular the body.custom-background rule.

    thank you all for your comments.

    cheers,
    Gregory

  3. You should always use wp_enqueue_style() to load your stylesheet and that functions should be hooked to the wp_enqueue_scripts hook with runs in the head. I suspect that you weren’t hooking it there, hence your problem. (As of WP 3.3, if wp_enqueue_style() is hooked to anything else, it throws a Notice with WP_Debug turned on).