What parameter should I pass to wp_enqueue_style to depend on the themes stylesheet?

1 Views

I have written a basic gallery plugin that uses wp_enqueue_style to include a stylesheet on the page. I’d like for the WordPress theme to be able to override the style of the plugin which means I’d like to my plugin to play nice and output the css file before the theme css file.

wp_enqueue_style has a deps parameter for exactly this requirement. My question is what value should I use for the deps parameter if I want to say “I depend on the themes css file”?

Read More

The current plugin code is incorrect because it uses false for the deps parameter: 

   // Enqueue a CSS style file - see http://codex.wordpress.org/Function_Reference/wp_enqueue_style                                                         
   wp_enqueue_style('bitvol_galleria_css', BITVOL_GALLERIA_URL . '/bitvolution-image-galleria.css', false, $this->bitvol_galleria_version, 'all' );
Post Views: 1

Related posts

Leave a Reply

2 comments

  1. First issue – you have dependency backwards. Depending on something means loading after dependency, while you want earlier.

    Second issue – theme’s stylesheet doesn’t actually use enqueue, it is usually codded directly in header.php file of theme. And since it seems to come before wp_head() call – you have no hook to ensure your stylesheet is above it.

    So this is commonly handled like your workaround – queued stylesheet with option to disable it by code or option in admin.

  2. I thought I’d post my workaround which I’m using until I know the answer to the question…

    My workaround is:

    1. Cut & Paste the CSS code from the plugin, into the theme (i.e. style.css) and modify it as needed.
    2. Tell the theme to block the plugin from outputing a stylesheet by deregistering it in functions.php:

    Code to put in functions.php:

    add_action( 'wp_print_styles', 'my_deregister_styles', 100 );

function my_deregister_styles() {
  wp_deregister_style( 'bitvol_galleria_css' );
}

    In some respects, this workaround could be the better solution? (because the website performance will be better by minimising the number of CSS resources included in the HEAD section).