Wordpress - Why is the Child Theme Stylesheet Not Loading?
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' );
});
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;
}