Get a fast, conversion-focused WooCommerce theme in 2024. Switch to Shoptimizer.

Home Blog – eCommerce News, tips and tutorials Starter Child Theme for Captiva released

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

Colm Troy About Colm: He has been building web stuff since the web was a wee lad. Colm built his first blog with WordPress around 2007 and has been hooked ever since. When not knee deep in hooks and filters you'll probably find him running around a mountain or making pizza.

Shoptimizer WooCommerce Theme

Shoptimizer is a FAST WooCommerce theme that comes with a ton of features all designed to help you convert more users to customers.

More details

Shoptimizer WooCommerce Theme screenshot

Latest eCommerce Guides View all Guides

2 Comments

  1. Hi Colm,

    Thanks for the info on child themes. I have downloaded your Captiva Child Theme 1.0 and will start learning as much as I am able to. I notice that it has already deleted the menu structure I had on my present Captiva theme, so I will re-create them again. These child themes require a bit of learning and as I am new to WordPress I will give it my best try.

    cheers
    Charlie

    1. Hi there Charlie,

      thanks for downloading the child theme! A child theme won’t inherit any settings of it’s parent like menus, widgets, theme options etc. these will all be unique to the child theme as a separate theme in it’s own right.

      Colm

Leave a Reply

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

Recent Blog Posts

$50
Off

Do you want a whopping $50 off Shoptimizer for WooCommerce?

Click the button below to get Shoptimizer for only $49. (Regular price: $99).
This is a special launch offer for today only.
Get it before it is gone!