CODEWITHSUNDEEP
htmlcsswordpresstwitter-bootstrapw3-total-cache
Paolo
Paolo

Reputation: 734

minified css getting overwritten by bootstrap cdn in wordpress

i'm using a plugin called "w3 total cache" on wordpress that minifies my style.css (which is located in my theme folder). the problem is that in function.php i enqueued the boostrap cdn and style.css correctly like this:

function bootstrap() { 
wp_enqueue_style( 'bootstrap-css', 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css' ); 
wp_enqueue_script( 'bootstrap-js', 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js',  array('jquery') );

}
add_action('wp_enqueue_scripts', 'bootstrap');



function maincss() {
wp_enqueue_style( 'maincss', get_template_directory_uri() . '/style.css' );
}
add_action( 'wp_enqueue_scripts', 'maincss');

BUT, whenever my page loads the style.css gets minified right after the head tags and bootstrap stays below overwriting all my rules...

this is the website i'm working on: http://bootstraptest.co.nf

if you move the first stylesheet right after bootstrap you can see the button working and the header getting placed correctly.

Upvotes: 2

Views: 637

Answers (1)

Anil Dhull
Anil Dhull

Reputation: 31

You can use the dependency attribute of wp_enqueue_style See the documentation here

    function bootstrap() { 
    wp_enqueue_style( 'bootstrap-css', 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css'); 
    wp_enqueue_script( 'bootstrap-js', 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js',  array('jquery') );

    }
    add_action('wp_enqueue_scripts', 'bootstrap');
function maincss() {
wp_enqueue_style( 'maincss', get_template_directory_uri() . '/style.css' , array('bootstrap-css') );
}
add_action( 'wp_enqueue_scripts', 'maincss');

Upvotes: 0

Related Questions