How to Override CSS Styles in Child Themes?

One of the most important purposes of using Child themes is being able to override CSS. In the earlier days, the only CSS file a theme had was its style.css. But that’s not the case anymore. Complexities of themes are growing day by day. Themes come with Multiple CSS files, which collectively render the design and layout of the site.

The Only Essential File required to Create a Child theme is a style.css file. And If your parent theme also has all the important styles in style.css you are in luck. You need not create any more files in your child theme. But Modern themes do not have any significant styles in the style.css file. For Example, all latest themes on use a default.css or main.css file, which is located in assets/css/ folder.

And If you add your own styles in style.css of the Child theme, it will not override those other files. So, what you need to do is create another css file, perhaps a duplicate of the css file you wish to override. And place it in the root of your child theme folder. After that, create a functions.php file and add the following code to it. (If you are creating a child theme for Store Theme)

Note the 30 in the last line, it assigns priority. The Larger the value, the later the file will be enqueued. If you choose a small value, it may not be able to override the parent theme’s style. Bottomline: Keep it 30 or more, if needed.

Should I create Child Theme’s just to Override some CSS?

No. All Themes at Support Custom CSS. And WordPress 4.7 onwards, Additional CSS was added directly to the Customizer. So, if you plan on making minor style changes its recommended to use the Additional CSS option provided by WordPress.

If you plan on doing more than just changing the css, then Child Themes is the Right way to go.

Leave a Reply

Your email address will not be published. Required fields are marked *