WordPress Child Theme Loading CSS Before Parent CSS

Question

I'm a little confused about a theme I'm working with. I have a child theme setup in order to override the parent styles. I have all .css files rendering, but my issue is that the child theme styles are loading before the parent theme styles, so my child theme styles are being overridden by the parents.
What am I doing wrong?
Link:
(http://www.elev8events.ca)
In my child themes function.php file I have the following:

add_action( 'wp_enqueue_scripts', 'load_my_child_styles' );
        function load_my_child_styles() {
            wp_enqueue_style( 'child-theme', get_stylesheet_directory_uri().'/style.css' );
    }

Colin Marshall · Accepted Answer

@Clinton Hopgood (https://teamtreehouse.com/clintonhopgood) you actually do need to enqueue the styles in your child theme's functions.php to ensure they load after the parent theme. It explains it right below the code you copied from your link:
A couple things to note:
You will need to replace the example text with the details relevant to your theme.
The Template line corresponds to the directory name of the parent theme. The parent theme in our example is the Twenty Fifteen theme, so the Template will be twentyfifteen. You may be working with a different theme, so adjust accordingly.
The only required child theme file is style.css, but functions.php is necessary to enqueue styles correctly (below).
php
<?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( 'child-style',
        get_stylesheet_directory_uri() . '/style.css',
        array('parent-style')
    );
}
?>

Clinton Hopgood · Answer

You don't need this in your functions.php
Ref: https://codex.wordpress.org/Child_Themes 
Just create a stylesheet in your child theme folder with the following info at the top (adjust accordingly). 
/*
 Theme Name:   Twenty Fifteen Child
 Theme URI:    http://example.com/twenty-fifteen-child/
 Description:  Twenty Fifteen Child Theme
 Author:       John Doe
 Author URI:   http://example.com
 Template:     twentyfifteen
 Version:      1.0.0
 License:      GNU General Public License v2 or later
 License URI:  http://www.gnu.org/licenses/gpl-2.0.html
 Tags:         light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready
 Text Domain:  twenty-fifteen-child
*/

Welcome to the Treehouse Community

Looking to learn something new?

Natasha McDiarmid

Natasha McDiarmid

WordPress Child Theme Loading CSS Before Parent CSS

2 Answers

Colin Marshall

Colin Marshall

Clinton Hopgood

Clinton Hopgood