1

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?

  • I've just found something on this site advising it could be something to do with WP_head. Contrary to what I said in my previous post. Any ideas? – alfieph Jun 25 '17 at 14:31
3

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.