Support » Themes and Templates » Child Theme – Exactly how to import multiple CSS files without @import?

  • Hi all,

    I’m wondering if someone could tell me exactly how to refer to multiple CSS files in a parent theme. (Lots of tutorials show how to do one, and then simply say to add more, without showing how.) The css files are:

    parenttheme/style.css
    parenttheme/css/mobile.css
    parenttheme/css/flickerplate.css
    parenttheme/css/slicknav.css

    And in my child theme, I have the usual:

    parenttheme-child/style.css
    parenttheme-child/functions.php

    Right now, my functions.php contains this:

    <?php
    add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
    function theme_enqueue_styles() {
        wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
    }

    Thanks a ton in advance!

Viewing 15 replies - 1 through 15 (of 29 total)
  • Here is a good article on how to do this:

    Read Here

    Hope it helps

    Thanks for the reference, but unfortunately I’ve read it before and it isn’t relevant to my situation :/

    Oh, sorry about that

    Can’t you just call the wp_enqueue function multiple times for the other files like this:

    <?php
    add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
    function theme_enqueue_styles() {
        wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
        wp_enqueue_style( 'mobile-style', get_template_directory_uri() . '/css/mobile.css' );
        wp_enqueue_style( 'flickr-style', get_template_directory_uri() . '/css/flickerplate.css' );
        wp_enqueue_style( 'slicknav-style', get_template_directory_uri() . '/css/slicknav.css' );
    }

    I tried that but it always gave me errors. I’ll do it again now and if it does it again, I’ll post the error output here soon.

    And add a link to your site, please.

    Tried it and I didn’t get any error message, but the site didn’t look the way it’s supposed to. Things formatted wrong and such 🙁

    And sure – http://www.seancli.com/ – I didn’t post it originally because these changes aren’t live. Sorry I know that would probably help a lot. I didn’t want my site to show an error for too long while I figure it out, but if it’ll help, I can so we can debug.

    Here is the theme I’m using if it helps to preview/download it:
    http://dessign.net/creative-portfolio-theme-responsive-free/

    Thanks!!

    Edit: Accidental double post!

    I tried it on my child theme of TwentyFourteen, and it worked OK. The only other thing I added was a call to enqueue the child theme’s style.css file at the end, so it looks like this:

    function enqueue_child_theme_styles() {
        wp_enqueue_style( 'parent-style', get_template_directory_uri().'/style.css' );
        wp_enqueue_style( 'mobile-style', get_template_directory_uri() . '/css/mobile.css' );
        wp_enqueue_style( 'flickr-style', get_template_directory_uri() . '/css/flickerplate.css' );
        wp_enqueue_style( 'slicknav-style', get_template_directory_uri() . '/css/slicknav.css' );
        wp_enqueue_style( 'child-style', get_stylesheet_uri(), array('parent-style')  );
    }

    You can take a look at this site and do a view source to see the style sheets being loaded.

    You’re the best, I’m going to try this out right now and report back here

    Ok so this is what it returns:

    Warning: call_user_func_array() expects parameter 1 to be a valid callback, function ‘theme_enqueue_styles’ not found or invalid function name in /home/content/73/11515973/html/wp-includes/plugin.php on line 496

    And this is my functions.php file after those last changes:

    <?php
    add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
    function enqueue_child_theme_styles() {
        wp_enqueue_style( 'parent-style', get_template_directory_uri().'/style.css' );
        wp_enqueue_style( 'mobile-style', get_template_directory_uri() . '/css/mobile.css' );
        wp_enqueue_style( 'flickr-style', get_template_directory_uri() . '/css/flickerplate.css' );
        wp_enqueue_style( 'slicknav-style', get_template_directory_uri() . '/css/slicknav.css' );
        wp_enqueue_style( 'child-style', get_stylesheet_uri(), array('parent-style')  );
    }

    For the record, wasn’t sure if I was supposed to change theme_enqueue_styles to enqueue-child_theme_styles (kinda shooting in the dark here) so I tried it and it got the same response. Just throwing that out there haha

    OK, so it looks like that’s the problem. Change the add_action line to this:

    add_action( 'wp_enqueue_scripts', 'enqueue_child_theme_styles', PHP_INT_MAX);

    You want to change the function name to enqueue_child_theme_styles, not enqueue-child_theme_styles.

    Ah gotcha, my mistake for the typo (don’t shoot me), and now it’s back to the original where it isn’t displaying properly.

    I’m letting it go live for a little bit for you to check out if you can – http://www.seancli.com . Maybe it’s actually importing properly but there’s another reason it’s not looking right?

    Here is my functions.php at the moment:

    <?php
    add_action( 'wp_enqueue_scripts', 'enqueue_child_theme_styles', PHP_INT_MAX);
    function enqueue_child_theme_styles() {
        wp_enqueue_style( 'parent-style', get_template_directory_uri().'/style.css' );
        wp_enqueue_style( 'mobile-style', get_template_directory_uri() . '/css/mobile.css' );
        wp_enqueue_style( 'flickr-style', get_template_directory_uri() . '/css/flickerplate.css' );
        wp_enqueue_style( 'slicknav-style', get_template_directory_uri() . '/css/slicknav.css' );
        wp_enqueue_style( 'child-style', get_stylesheet_uri(), array('parent-style')  );
    }

    Thanks a ton again, hope to get this resolved soon!

    Your stylesheets are importing properly. If you do a view source on your page, you can see them. So the question becomes why are you missing some elements, most noticeably your carousel slider. Go ahead & revert back to the parent theme, I’ve captured the source of the child.

    Ah gotcha really sorry about that! Heh…

Viewing 15 replies - 1 through 15 (of 29 total)
  • The topic ‘Child Theme – Exactly how to import multiple CSS files without @import?’ is closed to new replies.