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:

<?php

/**
 * 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.