Enqueue Child CSS to Load After Bootstrap CDN

Question

I'm brand new to Wordpress theme development and decided to try and create a theme from scratch.

Installed on localhost, I've added code to my functions.php file to load Bootstrap.min.css from a CDN, and then added my own CSS call for styling non Bootstrap elements.

An issue I'm coming up against is that the Bootstrap CSS appears to be taking priority over the custom CSS file, For example, there's a 32px margin at the top of the page.

My functions.php is as follows:

<?php 
//Load CSS Files
function enqueue_theme_styles() {
  wp_enqueue_style( 'Bootstrap', '//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css' );
  wp_enqueue_style( 'Custom-Theme', get_template_directory_uri() . '/css/theme-style.css' );
}
add_action('wp_enqueue_scripts', 'enqueue_theme_styles');
?>

I've looked around and there was a suggestion of adding dependencies to fix the load order issue, so I tried to add the following to the end of my child theme:

, array('Bootstrap');

This didn't help either.

If it's of any use to anyone, I'm calling this code via <?php wp_head(); ?> in my header.php file (as far as I'm aware, this is standard).

Is anyone able to help on this please?

Answer 1

Adding the dependency should work.

You are not calling your theme styles file correctly though. You need to move your theme-style.css file down to the root folder of the theme itself and name it style.css.

So your function should look as follows:

function my_enqueues() {
    wp_enqueue_style( 'bootstrap-css', '//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css' );
    wp_enqueue_style( 'theme-css', get_stylesheet_uri(), array( 'bootstrap-css' ) );
}
add_action( 'wp_enqueue_scripts', 'my_enqueues' );

This also fits with the Theme Handbook section on Including CSS & JavaScript.