Override Theme CSS with CSS from a plugin

Question

I have seen multiple questions regarding overriding a plugin's CSS with a theme(Example 1, Example 2, etc), but I am looking for the opposite.

I have installed a job board plugin that comes with some custom CSS, however my theme is overriding that plugin's CSS. It's not a deal breaker, but I don't like what my theme is doing with the CSS. I could of course grab the CSS that I want and put it into my child theme's stylesheet, but I imagine there is a more elegant and simple solution.

I'm using the plugin WP Job Manager with the theme Divi from Elegant Themes. The plugin works fine overall without issue, but I prefer the look of the form fields when it is used in a default theme (i.e. Twenty-Twelve).

Any advice is welcome.

Answer 1

You can try to dequeue the plugin stylesheet, then re-enqueue the stylesheet with your theme stylesheet added as a dependency which will ensure that the plugin stylesheet is loaded after your theme stylesheet.

function custom_style_order() {

    if ( defined('JOB_MANAGER_PLUGIN_URL') ) {

        //dequeue the original plugin stylesheet by its handle
        wp_dequeue_style( 'wp-job-manager-frontend' ); 

        //re-enqueue the stylesheet but with an added dependency (your theme stylesheet)
        wp_enqueue_style( 
            'wp-job-manager-frontend', 
            JOB_MANAGER_PLUGIN_URL . '/assets/css/frontend.css', 
            array('your-theme-stylesheet-handle') 
        );

    }

}

add_action('wp_enqueue_scripts', 'custom_style_order', 100); 

Note: you will need to find the "handle" of your theme stylesheet, as an example if we are dealing with a default theme like Twenty Twelve, then the handle for that themes main stylesheet is twentytwelve-style found in its functions.php file on line 150.