If I enqueue styles from my plugin, then it loads after theme's styles. That's why some CSS of my plugin is overriding by theme's CSS. This problem would be fixed if I can ensure my plugin's styles load after theme's styles.

  • Theme styles load last because that's the presentation layer chosen by the user and should take precedence over plugin styles. If your plugin's styles are important for functionality, then they should be namespaced so that your classes and IDs don't conflict with the theme's. You should also use specificity as a tool for influencing how styles are applied. If something is really important then !important might be appropriate. – Jacob Peattie Feb 24 '18 at 8:57

It's easy to add your plugin stylesheet after theme stylesheet. If you're sure that your theme styles and plugin styles have the same selector weight (theme has this style .site-header { background-color: #ccc; } and your plugin has this .site-header { background-color: #f1f1f1; }) then enqueuing plugin stylesheet after theme stylesheet will work.

If you're enqueuing with wp_enqueue_scripts action hook then changing the hook priority parameter will do the work. Here's an example:

function op_enqueue_scripts() {
    wp_enqueue_style( 'bootstrap', 'https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css' );
add_action( 'wp_enqueue_scripts', 'op_enqueue_scripts', 50 );

If priority 50 doesn't work then try increasing that to 80 or 100.

  • Thanks, bro. I had forgotten the priority parameter. It works like a charm :) – Eh Jewel Feb 24 '18 at 17:36

No. (or technically there might be, but in a few days there will be a question here about how to enqueue theme styles before plugin styles).

If your styles are getting overridden by theme styles it means that you do not properly prefix your classes.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.