Why is the Child Theme Stylesheet Not Loading?

Question

I'm using the HashOne theme and created a child theme in order to make various color changes to our website.

However, the changes I've made to the child theme stylesheet are only taking place in the certain sections of the site, while other changes are deferring to the parent theme. I created a functions.php file that I believe is properly formatted. See below:

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

When I used the inspect mode to see which CSS was overriding the child theme, I was able to confirm that it is definitely the parent theme. However, there are three CSS files operating at once and I have no idea how to rectify this.

1. stage.ottrial.pitt.edu/wp-content/themes/hashone/style.css?ver=4.7.1
2. stage.ottrial.pitt.edu/wp-content/themes/hashone-theme-child/style.css?ver=1.0
3. stage.ottrial.pitt.edu/wp-content/themes/hashone/style.css

The one that's leading the pack is #3. I'm not sure what I'm doing wrong here.

Answer 1

There's no need for more code in your functions.php file to enqueue the parent themes css from your child theme. The problem is that by adding that code, you're enqueueing the parent theme's CSS a second time, but it's now loading after the child theme. This means that all the changes you made in the child theme will have no effect.

Simply remove that line and you should see the changes in your child theme.

Added: Here are the two files I used with only the basics to properly enqueue the child theme css.

style.css file:

/*
 * Theme Name: HashOne Child
 * Template: hashone
 * Text Domain: hashone-chile
 */

functions.php file:

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

Answer 2

You don't need to load the Style Sheet of your Child Theme unless you want to label it something other than style.css.

By default, WordPress loads style.css (in the theme root directory) of the Parent Theme and the Child Theme automatically.

Make sure your Child Theme is activated, and add your CSS to style.css of the Child Theme.

Be sure to use inspector to identify the CSS rules easily. Overriding CSS rules of the Parent Theme can be tricky at times. Using !important can help to override some of the CSS rules in the Parent Theme.

Example of using !important in CSS

Let's say the Parent Theme defines this rule:

#site-title {
    color: #000000;
    background: #ffffff;
}

You could forcefully override that rule in your Child Theme like this:

#site-title {
    color: #ffffff !important;
    background: #000000 !important;
}

Answer 3

Keep in mind the new quatro starting from WP 4.7:

get_theme_file_uri()
get_parent_theme_file_uri()
get_theme_file_path()
get_parent_theme_file_path()

came to replace the old quatro:

get_stylesheet_directory_uri()
get_template_directory_uri()
get_stylesheet_directory()
get_template_directory()

In the respective order. The gain is the better naming convention.