Bootstrap CDN + WP // How to edit '.css’

Question

I’m building my website on Wordpress + Bootstrap CDN. I decided to make it on CDN to have no problem with updates in the future plus I read that this way it’s a bit faster.

So the thing is I have a problem with styles. I imported my local ‘style.css’ to ‘header.php’, but since ‘bootstrap.min.css’ from CDN also has its own parameters I can’t apply some things.

How do I rewrite CDN’s parameters? Or is there a way to edit this exact ‘bootstrap.min.css’ file?

Thanks in advance.

Answer 1

@TylerH answered my question and it solved my problem.

A better technique would be to include your own CSS file after you include the CDN file, and just write whichever styles you need to this CSS file of yours. That way they will override the problematic styles in your CDN file.

Thank you very much!

Answer 2

You can simply just use wp_enqueue_style to load those files. Here is an example you can get an idea from.

function enqueue_my_scripts() {
wp_enqueue_script( 'jquery', '//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js', array('jquery'), '1.9.1', true); // we need the jquery library for bootsrap js to function
wp_enqueue_script( 'bootstrap-js', '//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js', array('jquery'), true); // all the bootstrap javascript goodness
}
add_action('wp_enqueue_scripts', 'enqueue_my_scripts');


function enqueue_my_styles() {
wp_enqueue_style( 'bootstrap', '//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css' );
wp_enqueue_style( 'my-style', get_template_directory_uri() . '/style.css');
}
add_action('wp_enqueue_scripts', 'enqueue_my_styles');

and to write the rules just use !important in your style.css file.

When you use wp_enqueue_style, you have the option to take control on where your styles and script be used for further references. Here is an example how to use it.

function my_enqueue_stuff() {
  if ( is_page( 'landing-page-template-one' ) ) {
    /** Call landing-page-template-one enqueue */
  } else {
    /** Call regular enqueue */
  }
}
add_action( 'wp_enqueue_scripts', 'my_enqueue_stuff' );