<Slushman />

unsplash-logo Craig Whitehead

Child themes for WooThemes

Published Sep 8, 2014

I’ve been using child themes for several years now, but I’d never used one with a theme by WooThemes. Most of my clients needed simple customizing, so I used WooTheme’s backend options to make the changes.

A recent client needed a bit more than I could do through their backend though. I started off making the customization directly in the theme, which is never a good idea. Catching my mistake, I decided to throw my changes in a child theme and work from there. However, when I reloaded after activating the child theme, the site broke. Looking at the source code, I noticed the order of the stylesheets. My child theme stylesheet should be last in the cascade, therefore overriding all other styles. There were two files from the parent theme loading after mine. I tried several solutions, hoping a newer one using wp_enqueue_style to load the parent stylesheet instead of @import would work, but that didn’t affect the other two stylesheets.

Thankfully (before pulling my hair out), I found this page in the WooThemes support docs. What they don’t spell out on the page is that you don’t actually make CSS changes in the child theme style.css. You make a second CSS file called custom.css and make your changes there. The custom.css file loads next-to-last followed by styles put into their custom CSS field on the backend forms and therefore overrides all the other stylesheets.

Share this post!

Check out these most recent posts:

Headless Theme for WordPress

How to create a theme for a headless WordPress install. Even when the front-end of your site isn't displayed by WordPress, you still need a theme.

Deploying a React App to Netlify

After you've built your headless WordPress front-end, you'll want to publish it. This is process for how I published mine to Netlify.

Troubleshooting WordPress AJAX

Troubleshooting AJAX issues in WordPress is tricky. Use these two ways (and a tip) to debug AJAX issues while building your plugin or theme.

Code Sample Styling

While redesigning my site, I wanted to customize the way code samples are displayed. Let's look at the options I explored.