How to Enqueue a Second Style Sheet on a Child Theme

When we create our Child Theme, the second thing we do is to enqueue our Child Theme style sheet to its parent theme. Then we head over to the customizer to write thousands of CSS lines which, as beginners, can leave us in a big mess.

Your scenario, I believe it could be one of these two:

• you know what you’re doing, but you don’t know why your second stylesheet is not working or you don’t know how to enqueue it
• the title of this post appeared to be something cool to try out (it is)

In any case (or other) I won’t let you down.

Using the Customizer to Develop a Child Theme

When we are developing our Child Theme, using the customizer is a great feature to try things out. However, soon we’ll find ourselves with over a thousand lines and probably not recalling what we’ve done and what needs to be fixed.

One thing I encourage doing, is to create a backup in our machines; a css file holding those thousands of lines which we can see clearer with a coding software such us Sublime Text.

However, the best solution to keep our customizer clean to continue working on our design, is to save the snippets that are complete in another style sheet.

For instance, if you’ve developed a design for your homepage or a landing page, which you won’t modify anytime soon, you can remove it from the customizer and “file it as done,” sort of speak.

Using WP Enqueue Style for a Second Style Sheet

A second style sheet, or as many as you need 😉.

So, once again, let’s say you’ve created a long design for your homepage and you’re happy with it. Now you’d like your customizer cleaner, so that you don’t have to scroll down over multiple lines to continue working.

For this purpose, you can save that design in a separate style sheet, and enqueue it almost as you did with your child theme’s style sheet, using wp_enqueue_style() inside that first function you’ve written. See line 13-17:

Let’s break it down

How to Enqueue a Second Style Sheet on a Child Theme

1. Create a style sheet (a *.css file); write down the design that’s finished and save the file as, for instance, homepage-design.css.
2. In your Child Theme folder, create the following path: assets > css, and save the file in this folder.
3. In your functions.php file, right below where you’ve enqueued your child theme style sheet (and before the closing “}“) of the function), use wp_enqueue_style() for the new one:

    wp_enqueue_style( 'child-home-style', 
        get_stylesheet_directory_uri() . '/assets/css/home-design.css', 
        array('child-style'), //must match your child theme style sheet
        wp_get_theme()->get('Version')
    );

Why Can’t I Enqueue a Second Style Sheet on My Child Theme?

A Missing Character

Every space, comma and etc matters; be extremely careful when adding this function. One single character missing or out of place will prevent your style sheet from working.

This is in fact the reason why I am posting this; after almost two decades of blogging, I was trying to enqueue a second style for a plugin (which needs a couple other tweaks) and I had to ask in the forum for help. My mistake? “One character missing; one; that first slash before assets/css.” I knew it had to be there, but I was so exhausted at the time, that I couldn’t notice it.

Clean Your Caché

Yes. As silly and redundant as it may seem. In fact, I suggest you not to upload your new stylesheet until is finished, and to not modify it from the WordPress dashboard.

FAQ

Do you need to create a header for the new style sheets, as you did with the child theme’s? No. Simply write down your snippets, and save the file with the CSS extension.