What is the correct way to enqueue multiple CSS files?

The question:

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 Solutions:

Below are the methods you can try. The first solution is probably the best. Try others if the first one doesn’t work. Senior developers aren’t just copying/pasting – they read the methods carefully & apply them wisely to each case.

Method 1

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' );

Method 2

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

Method 3


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.


All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

Leave a Comment