Enqueue more than two CSS styles in a child theme functions.php

Question

I've just started to use WordPress and learned about the child-theme feature. So it's my first time doing this and I ran into some problems.

When I try to preview the child-theme, the formatting of the whole site is messed up.

Something tells me it's coming from my functions.php since I've only enqueued one style.css when I have three.

The other two CSS files only have a few lines of code. I can put them on the style.css but I don't want to modify the original file that's why I'm using a child-theme feature. I'm also here to learn more about this stuff for future reference :)

Here's the contents of my functions.php

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

Please enlighten me.

Answer 1

Child theme templates starts working before Parent theme, so if any similar template files (similar to parent theme) exists it tries to override the parent theme's template - that's the core thing about child theme.

The right way to enqueue new stylesheet in Child theme to make it THE Child Theme is the following:

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

With that in the functions.php and a style.css with proper Child Theme formatted comments you will get a complete new theme based on its parent. And you are done. :)

Now it's your arena, override parent theme's templates, override parent theme's styles however you want. In one of my project, I added FontAwesome what was absent in parent theme, in this way:

In the above mentioned function I added a new line:

wp_enqueue_style( 'fontawesome-style', get_stylesheet_directory_uri() . '/css/font-awesome.min.css' );

Note that, I'm using get_stylesheet_directory_uri(), because now we are using new resources that is where the overriding stylesheet is. So all you additional stylesheet can be enqueued in this way: