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

Leave a Comment