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 '14 at 21:27
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 '18 at 1:58
  • @Craig Definitely. – Courtney Ivey Jan 8 '19 at 23:02
-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 '17 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 '17 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. – Alreadytakenindeed Oct 13 '17 at 11:22
  • "Also, what if OP does not have the access to DirectoryIterator?" Well that sounds like another question for a different topic. – Alreadytakenindeed Oct 13 '17 at 11:28
-1

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

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