How to Use Multiple CSS Stylesheets with a WordPress Child Theme

Why Multiple Stylesheets?

It’s better to have separate stylesheets for different areas of styling in order to make the codebase more maintainable and easier to manage. For example, if you use a particular plugin to display tables and later you start using a different plugin to do this, then you will have to find which CSS was used for this. If you have a separate stylesheet for each plugin then you only need to create a new stylesheet for the new plugin and stop including the stylesheet for the previous plugin. If you change back to the other plugin later then you can easily re-include the other stylesheet.

Here’s the code I use to load multiple stylesheets for my child theme:


 * This particular functions.php file is intended to be placed within a child theme's root folder.
 * For example wp-content/themes/twentyfifteen-child/

function theme_enqueue_styles() {

   // BEGIN: Register the parent theme's stylesheet.

   // The parent style handle - this is arbitrary (we can set it to what we want).
   $parent_style_handle = 'parent-theme-style';

   // Get the parent theme's path.
   $parent_theme_directory = get_template_directory_uri();

   // Register the parent theme's stylesheet.
   wp_enqueue_style( $parent_style_handle, get_template_directory_uri() . '/style.css' );

   // END

   // BEGIN: Register the child theme's stylesheets.

   // Get the child theme's path.
   $child_theme_directory = get_stylesheet_directory_uri();

   // Register the child theme's stylesheets (note that the stylesheet handles are again arbitrary).
   // Here we set them as child-theme-style and child-theme-main.
   wp_enqueue_style( 'child-theme-style', $child_theme_directory . '/style.css', array( $parent_style_handle ) );
   wp_enqueue_style( 'child-theme-main',  $child_theme_directory . '/main.css',  array( $parent_style_handle ) );

   // END

// Register our stylesheets callback so all the stylesheets (both parent and child) get loaded.
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );


Let me know if you have any improvements or feedback in the comments section.

3 thoughts on “How to Use Multiple CSS Stylesheets with a WordPress Child Theme

  • 26th November 2017 at 1:57 pm

    I agree but am flummoxed because the top error from Google is that there too many stylesheets and they should be consolidated. How can people SEO properly when developers try to make things easier to design a website yet Google say otherwise? What recommendations do you have for bringing down the number of stylesheets?

    Most of us buy WP themes but we don’t get to see how many stylesheets they’ve used to develop it until we’ve made the purchase… Thanks!

    • 29th May 2018 at 1:08 pm

      I agree Jennifer. Google have always suggested that genuine web designers, shouldn’t have a problem with SEO (i.e. their algorithms are allegedly good enough to reward genuine websites with quality content), however this doesn’t appear to be true in this instance.

  • 1st August 2018 at 11:19 am

    A late reply, however I’ve just discovered that some WordPress caching plugins, like WP Fastest Cache, apparently consolidate the CSS files. This is from their plugin page (

    “Combine CSS – Reduce number of HTTP round-trips by combining multiple CSS resources into one”


Leave a Reply

Your email address will not be published. Required fields are marked *