How do I cleanly override a plugin’s CSS with a child theme?

1 Views

I have taken it upon myself to adhere to WordPress conventions so I can have a clean, sexy child theme. However, I am unsure how to proceed on a certain issue.

I would like to override the CSS for some plugins in my WordPress website, and this wonderful post was a great step in the right direction. My only concern is that I would like to do everything I can to avoid overriding the header.php file in my parent theme in order the do this.

Read More

Is there another wonderful way to do this? Thanks for your help!

Update:

As was pointed out by another user’s comment, this is in fact dependent on how the plugin implements its styles. This aside, assume that the plugins do provide a way for styles to be implemented in the style.css sheet of the child theme, or, in my case, a separate styles folder linked to that style.css sheet.

I also know I can use !important all over the place, but this is generally frowned upon.

Post Views: 1

Related posts

1 comment

  1. If the plugins are correctly adding their styles via wp_enqueue_style, you simply need to dequeue them:

    function wpa_dequeue_style() {
    wp_dequeue_style( 'plugin-style-handle' );
}
add_action( 'wp_enqueue_scripts', 'wpa_dequeue_style', 100 );

    Whether or not this works depends on how and where the plugins are adding their styles, so there’s no absolute answer without knowing specific methods the plugins in question use.

    EDIT- another option that doesn’t involve removing the styles entirely is to enqueue your own styles with the plugin styles as a dependency:

    wp_enqueue_style(
    'my-styles',
    get_template_directory_uri() . '/mystyles.css',
    array('plugin-style-handle')
);

Comments are closed.