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?
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?
Share Improve this question edited Sep 20, 2020 at 19:30 Jesse Nickles 7357 silver badges19 bronze badges asked Oct 22, 2014 at 20:51 forrestforrest 4833 gold badges7 silver badges16 bronze badges 1 |3 Answers
Reset to default 18The 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' );
This worked for me
foreach( glob( get_template_directory(). '/css/*.css' ) as $file ) {
$file = str_replace(get_template_directory(), '', $file);
echo ( get_template_directory_uri() . $file);
// $file contains the name and extension of the file
wp_enqueue_style( $file.'style', get_template_directory_uri() . $file);
}
foreach( glob( get_template_directory(). '/js/*.js' ) as $file ) {
$file = str_replace(get_template_directory(), '', $file);
// $file contains the name and extension of the file
wp_enqueue_script( $file . 'script', get_template_directory_uri() . $file);
}
function wpdocs_theme_name_scripts() {
$cssFolderPath = dirname(__FILE__)."/check_for_additional_path_to_be_added/";
$fileNames = array();
foreach (new DirectoryIterator($cssFolderPath) as $file) {
$filetype = pathinfo($file, PATHINFO_EXTENSION);
if ($file->isFile() && $filetype == "css") {
array_push($fileNames, $file->getFilename());
}
}
foreach ($fileNames as $name){
wp_enqueue_style( $name, "/wp-content/plugin_or_theme_cssPath/".$name );
}
}
add_action( 'wp_enqueue_scripts', 'wpdocs_theme_name_scripts' );
This is what I've devised on my own for loading CSS files, for JS is pretty much similar.
'/wp-content/themes/mamies-wafers
withget_template_directory_uri()
: you need to use absolute urls. – gmazzap Commented Oct 22, 2014 at 21:27