Can you explain to me why? Isn’t it if you will put codes UNDER the existing codes of style.css of the theme you are working on, it will prioritize the codes below that you put?
You are correct: changes in the style.css
file at the bottom will get the final say (those changes will be prioritized).
But you really don’t want to modify the parent theme style.css
because you don’t want your changes wiped out when you update the parent theme. Updates happen all the time for bug fixes or for security vulnerabilities. You should keep them up to date for those reasons.
Once of the big advantages of child themes is the ability to maintain your work separate from the original theme. That way if there is an update to the parent theme, you can usually update the parent theme without impacting your work.
Here’s a current example. I have a theme that I’m updating for my site. I want to add a random header background, add rounded corners to the header, and move some header items over a little. Also I’m going to change the body background color.
I could modify my theme’s style.css and add it there but when I update that theme for any reason I’ll probably lose my changes. So I play it safe and create a new directory in wp-content/themes
called child-theme
and put this style.css
in there.
/*
Theme Name: Some Child Theme
Description: Child theme for Jan's theme
Author: Jan Dembowski
Template: parent-theme-directory
*/
@import url("../parent-theme-directory/style.css");
/* write custom css below */
In my WordPress dashboard I activate the theme listed as “Some Child Theme”. Now when I want to make my changes, all I have to do is edit wp-content/themes/child-theme/style.css
and that’s it. I just add the new CSS there and I’m all set.
If the parent theme needs upgrading, it will not impact my changes at all.