5

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?

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

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

  • 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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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