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

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

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

Tags:

Css

Child Theme

Parent Theme

Recent Posts