Starter Child Theme for Captiva released

Using a child theme is the best way to ensure you can easily update our WooCommerce themes when new versions become available. Today we’ve released a child theme for our first WooCommerce theme, Captiva.

For those new to WordPress the concept of child themes can be a bit confusing. You finally find a theme you like and want to make some tweaks to it to personalize it for your requirements. You should just jump in and start making changes to the theme itself right? WRONG! This will cause you a world of pain in the long run. Let’s assume you do go the way of making changes to the theme itself. Let’s then assume that the developer then releases some major fixes a month later – perhaps even fixing some major security bugs that you can’t simply ignore. What then? Your only course of action at that point is something like the following:

• Backup your current version of the theme that includes your changes
• Download the latest version with the fixes from the theme developer
• Merge back in your customizations
• Re-apply to your live site
• Pray that everything still works correctly. SPOILER – it probably won’t!

Now imagine having to do that every. single. time. there’s a new release of your favourite theme. Surely there has to be a better, smarter way of keeping your customizations while being able to update the theme painlessly I hear you say?

Enter WordPress Child Themes

WordPress child themes solve the problem scenario outlined above. Simply put, a child theme is a completely separate WordPress theme that allows you to override files in your favourite theme which is known as the parent theme. The child theme inherits all the functionality of it’s parent by simply declaring that it has a parent in the main style.css of the child theme.

A really simple child theme consists of just one file – style.css

Consider a simple example child theme for the Twenty Fourteen theme.

Simple right? The key line here is the Template: twentyfourteen

This is the magic sauce that tells WordPress that this theme is a child of the twentyfourteen theme. So while our child theme simply has a style.css file, it will actually inherit every single file in the parent theme.

For simple css changes it’s now simply a case of adding your custom css to style.css in the child theme. At load time, WordPress will first load the main styles in the parent theme and then load your child themes CSS file. Now when you need to update the parent theme you can do so safely without having to worry about the messy and time consuming steps we outlined earlier.

Taking child themes a step further with a child functions.php and template overrides

Suppose you wish to extend the parent theme within the child theme with your own custom code – how do we go about doing that? Simples. Just add a functions.php file within your child theme. Your child theme functions.php works a little bit different from the child style.css. It will not override the contents of the parent functions.php – rather, it will extend it. Why is that important? Let’s say for example you have a function in your parent functions.php called get_comments(). If you add a function of the same name to your child functions.php, the parent get_comments() will still be called. On load, WordPress will first execute the parent functions.php file. This can catch out a lot of people when they’re first getting started with child themes. In that scenario where you wish to change or override the parent function you would ideally use WordPress hooks and filters which we’ll explore separately in the future.

Template overrides

Let’s assume you wish to change some markup in the parent header.php. How would we do that in a child theme? The good news is that it’s as simple as copying the parent header.php file into your child theme directory and boom! you’ve got yourself a template override! You can start making changes safely within the child theme straight away. My advice is to keep an eye on your parent theme changelogs with new versions so as to not miss out on any critical fixes to parent templates that you should be bringing into your child templates. Which is why it’s important to only override the templates you really need.

Captiva Child Theme

Our first WooCommerce theme Captiva just passed the 300 sales milestone on ThemeForest! To celebrate we’re releasing a starter child theme for Captiva which should help you get up and running with a child theme straight away.

As you can imagine with a commercial WooCommerce theme there’s a little bit more to child themes than with a simple WordPress theme. The child theme makes extensive use of wp_enqueue and wp_dequeue to re-order parent stylesheet rendering order to make your child theme as simple as possible to create. In addition there are a number of Visual Composer templates also required to be bundled in your child theme to ensure your child theme renders correctly.

Download Captiva Child Theme 1.0