6

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.

6

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' );
});
  • Can you provide an example of how the functions.php enqueue line would be written? – Sakena Jan 23 '17 at 20:19
  • Sorry I wasn't clear. What you have above is correct. But the same file is being enqueued later (that's the second /hashone/style.css file you see). Find where it's being enqueued again and remove it. On a fresh install of HashOne with a child theme consisting of only a blank style.css and a functions.php file as you have above, the style are enqueued correctly for me. – Nathan Johnson Jan 23 '17 at 23:27
  • @NathanJohnson your solution is identical to the OP's code except for the anonymous function. What's different? – Prab Nov 2 '18 at 1:12
3

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;
}
  • Thank you, Michael. I double-checked that my child theme is activated and that my CSS was added to my child theme only. Where would I write "!important" in my CSS in order to override my Parent Theme? – Sakena Jan 23 '17 at 17:40
  • I've updated my answer with example usage. – Michael Ecklund Jan 23 '17 at 17:45
1

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.