how to add custom css at top above all css file for specific url

Question

i want to add my css file bootstrap.min.css on top of all css file. I used below code

wp_enqueue_style( 'bootstrap_css', 'bootstrap.min.css' );

but it add css below theme css file .

Issue is that i do not want to modify theme file and want to do from plugin only. I there way i can add my css after tag using some wp_head or after_title hook.

Please help me with same

Answer 1

/**
 * Enqueue stylesheet before others
 */    
class EnqueueStylesheetEarly {

    function __construct() {
        add_action( 'wp_enqueue_scripts', [ $this, 'load_before_other_stylesheets' ], 5 );
    }

    /**
     * Register and enqueue stylesheet
     */
    function load_before_other_stylesheets() {
        wp_register_style(
            'bootstrap-css',
            plugin_dir_url( __FILE__ ) . 'bootstrap.min.css',
            [],
            '3.3.7'
        );

        wp_enqueue_style( 'bootstrap-css' );
    }

}

Then you can load this with your other frontend classes in your 'plugin.php' Like so...

if ( ! is_admin() ) {
    require 'class-enqueue-stylesheet-early.php';
}

At a 5 priority, this should solve your problem. The only thing that usually loads before this is WordPress SEO JSON-LD scripts and meta.

Answer 2

You can dequeue your theme's style and then enqueue both of your styles in your plugin. Take a look at this:

function wp_dequeue_script() {
   wp_dequeue_style( 'theme-scss' );
   wp_enqueue_style( 'bootstrap_css', 'bootstrap.min.css' );
   wp_enqueue_style( 'theme-css', 'YOUR THEME CSS URL' );
}
add_action( 'wp_print_scripts', 'wp_dequeue_script', 100 );

You might want to change the hook depending on the hook your theme is using, or increase it's priority.