• Resolved dutuka

    (@dutuka)


    Hello,

    I use this code snippet to register new custom css file in child theme subfolder:

    add_action( ‘wp_enqueue_scripts’, function() {
    wp_enqueue_style( ‘generatepress-global-custom-css’, get_stylesheet_directory_uri() . “/custom-css/style.css”, array(), filemtime( get_stylesheet_directory() . “/custom-css/style.css” ) );
    } );

    Now I want to register all css file in this subfolder, something like this: /custom-css/*.css

    How can I achieve this, i tried to use *.css but it didnt work. Thanks

Viewing 13 replies - 1 through 13 (of 13 total)
  • Hi @dutuka,

    I’m not familiar with *.css. Do you have a document regarding this form of folder content CSS enqueueing? We’ll try to see how it goes.

    Alternatively, a code that could work is something like this:

    function enqueue_styles_from_folder() {
        $folder_path = get_template_directory() . '/css/'; // Replace 'css/' with your folder path
    
        if ($handle = opendir($folder_path)) {
            while (false !== ($file = readdir($handle))) {
                if ('.' !== $file && '..' !== $file && '.css' === substr($file, -4)) {
                    $file_uri = get_template_directory_uri() . '/css/' . $file; // Replace 'css/' with your folder path
                    wp_enqueue_style('style-' . $file, $file_uri);
                }
            }
            closedir($handle);
        }
    }
    add_action('wp_enqueue_scripts', 'enqueue_styles_from_folder');

    It’s a loop that checks for .css files in a specific directory, and enqueues it.

    This is more of a general WordPress concern though as opposed to being theme-related. It would be good to ask in the WP forums as well: https://ww.wp.xz.cn/support/forum/wp-advanced/

    Thread Starter dutuka

    (@dutuka)

    Hi ernandoazarcon2,

    thank you for your help, I just tested the code, replace my custom folder path, unfortunately the code does not work.

    I use this snippet to include all .php files in custom folder:

    $filepath = dirname(FILE).'/custom-php/';
    $files = scandir($filepath);
    foreach ($files as $file) {
    // match the file extension to .php
    if (substr($file,-4,4) == '.php') {include($filepath.$file);}
    }

    May be you can combine this to enqueue all .css files in custom folder.

    Best thanks in advanced.

    Can you share the entire code?

    Thread Starter dutuka

    (@dutuka)

    It is the entire code snippet, i put it in the functions.php file, all the .php files in /custom-php/ folder in the child theme will be included.

    $filepath = dirname(FILE).'/custom-php/';
    $files = scandir($filepath);
    foreach ($files as $file) {
    // match the file extension to .php
    if (substr($file,-4,4) == '.php') {include($filepath.$file);}
    }

    Now i want to achieve the same for all .css files in the /custom-css/ folder in the child theme.

    • This reply was modified 2 years, 11 months ago by dutuka.

    There should be something like this code for that code to work:

    add_action('wp_enqueue_scripts', 'enqueue_styles_from_folder');

    Can you check?

    Thread Starter dutuka

    (@dutuka)

    Im trying to test around but still not work.

    Is there any enqueue code in your functions.php?

    This isn’t GP related as well as mentioned. It would be best to ask here instead: https://ww.wp.xz.cn/support/forum/wp-advanced/

    Thread Starter dutuka

    (@dutuka)

    Thanks for the link, there is no other enqueue code in my functions.php, but i consider to use only one css file, its better for performance but not so comfort to maintain.

    Hi there,

    are you wanting to combine several child theme stylesheets into one file on the fly – and then only enqueue the combined file ?

    If so, you would need custom development,

    And I am not sure if doing this would improve performance.
    As it would create a much larger file, that the browser may have to make many round trips to load, which could take longer for the browser to parse which would effect render blocking.

    If you’re server is running HTTP2 then multiple small files can loaded concurrently – which can be faster then one large file.

    Thread Starter dutuka

    (@dutuka)

    Thank you for your infos. My server uses HTTP/2, I want to maintain custom css in a subfolder separated in several css files. I need a code snippet, which automatically include every css file i create in that subfolder.

    I found this code snippet from stackexchange, which works for that user, but does not work on my site:

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

    At the moment only this code snippet works for me, but I will have to register every css file i create in the subfolder:

      add_action( 'wp_enqueue_scripts', function() {
        wp_enqueue_style( 'generatepress-custom', get_stylesheet_directory_uri() . "/custom-css/custom.css", array(), filemtime( get_stylesheet_directory() . "/custom-css/custom.css" ) );
        wp_enqueue_style( 'generatepress-custom1', get_stylesheet_directory_uri() . "/custom-css/custom1.css", array(), filemtime( get_stylesheet_directory() . "/custom-css/custom1.css" ) );
    } );
    • This reply was modified 2 years, 11 months ago by dutuka.

    Try this:

    function enqueue_css_files_from_folder() {
        $css_folder = gget_stylesheet_directory_uri() . '/YOUR-FOLDER-NAME/';
    
        // Get all CSS files from the folder
        $css_files = glob( get_stylesheet_directory_uri()) . '/YOUR-FOLDER-NAME/*.css' );
    
        // Enqueue each CSS file
        foreach ( $css_files as $css_file ) {
            $css_filename = basename( $css_file );
            wp_enqueue_style( $css_filename, $css_folder . $css_filename );
        }
    }
    add_action( 'wp_enqueue_scripts', 'enqueue_css_files_from_folder' );

    Replace YOUR-FOLDER-NAME in the code.

    Thread Starter dutuka

    (@dutuka)

    Thank you, I tested the code and got: [HTTP/2 500 Internal Server Error]

    There’s an error in this line:

    $css_folder = gget_stylesheet_directory_uri() . '/YOUR-FOLDER-NAME/';

    it should be:

    $css_folder = get_stylesheet_directory_uri() . '/YOUR-FOLDER-NAME/';
Viewing 13 replies - 1 through 13 (of 13 total)

The topic ‘Register all css file in child theme subfolder’ is closed to new replies.