8

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?

1
  • replace '/wp-content/themes/mamies-wafers with get_template_directory_uri(): you need to use absolute urls.
    – gmazzap
    Oct 22, 2014 at 21:27

3 Answers 3

17

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' );
2
  • 1
    Over 3 years on, is it still recommended to wp_register_style before wp_enqueue_style?
    – Craig
    Feb 7, 2018 at 1:58
  • @Craig Definitely. Jan 8, 2019 at 23:02
0

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);
    }
-1

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.

4
  • Please describe what you code does.
    – Max Yudin
    Oct 9, 2017 at 12:52
  • Also, what if OP does not have the access to DirectoryIterator? What if OP doesn't need every CSS file from particular directory to be enqueued?
    – Max Yudin
    Oct 9, 2017 at 12:53
  • My code is taking all the file names which are CSS from a given directory and loading them in Wordpress. If OP doesn't need them you can just remove them from the directory. Oct 13, 2017 at 11:22
  • "Also, what if OP does not have the access to DirectoryIterator?" Well that sounds like another question for a different topic. Oct 13, 2017 at 11:28

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