Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trialNatasha McDiarmid
11,400 PointsWordPress Child Theme Loading CSS Before Parent CSS
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' );
}
2 Answers
Colin Marshall
32,861 PointsClinton Hopgood 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
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
7,825 PointsYou 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
*/