I am building a Bootstrap site on WordPress and need to be able include multiple stylesheets. However, when I enqueue them as follows, only the first and third style sheets show up in the page source. I have confirmed that all three files are on the server.
wp_enqueue_style( 'mamies-wafers-bootstrap-min', '/wp-content/themes/mamies-wafers/css/bootstrap.min.css' );
wp_enqueue_style( 'mamies-wafers-carousel', '/wp-content/themes/mamies-wafers/css/carousel.css' );
wp_enqueue_style( 'mamies-wafers-style', get_stylesheet_uri() );
What am I missing?
The wp_enqueue_style()
function uses the following format and parameters:
wp_enqueue_style( $handle, $src = false, $deps = array(), $ver = false, $media="all" );
In your case, you could try the following:
<?php
/**
* Proper way to enqueue scripts and styles
*/
function namespace_theme_stylesheets() {
wp_enqueue_style( 'mamies-wafers-bootstrap-min', get_template_directory_uri() .'/css/bootstrap.min.css', array(), null, 'all' );
wp_enqueue_style( 'mamies-wafers-carousel', get_template_directory_uri() .'/css/carousel.css', array(), null, 'all' );
wp_enqueue_style( 'mamies-wafers-style', get_stylesheet_uri(), '', null, 'all' );
}
add_action( 'wp_enqueue_scripts', 'namespace_theme_stylesheets' );
If you plan on minifying your CSS, it’s always best to use wp_register_style
for each stylesheet first, and then enqueue it.
<?php
/**
* Proper way to register and enqueue scripts and styles
*/
function namespace_theme_stylesheets() {
wp_register_style( 'mamies-wafers-bootstrap-min', get_template_directory_uri() .'/css/bootstrap.min.css', array(), null, 'all' );
wp_register_style( 'mamies-wafers-carousel', get_template_directory_uri() .'/css/carousel.css', array(), null, 'all' );
wp_register_style( 'mamies-wafers-style', get_stylesheet_uri(), '', null, 'all' );
wp_enqueue_style( 'mamies-wafers-bootstrap-min' );
wp_enqueue_style( 'mamies-wafers-carousel' );
wp_enqueue_style( 'mamies-wafers-style' );
}
add_action( 'wp_enqueue_scripts', 'namespace_theme_stylesheets' );