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

by

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.

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

3

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