Wordpress Child Themes

What is a Child Theme?

You can think about WordPress child themes as basically a sub-themes which design and functionality are based on its parent theme. Child themes allow you to customize certain design elements or functionalities of your site without altering the parent theme files.

Most child themes consist of just few files. The most common setup includes

  • style.css – this is where your CSS changes must be done
  • functions.php – this is where PHP customizations take place
  • screenshot.png – a screenshot of the theme to be displayed in Appearance > Themes

More advanced child themes may also include various template files and even sub-folders for different content elements.

Why Using a Child Theme for Customizations

Why using a child theme instead of directly editing the parent theme files? The best reason to use a child theme is that if you make changes to to the original theme files, you will lose those customizations every time you update the parent theme. Also, it gives you  better control over specific theme parts and templates.

You might be thinking that you just won’t install theme updates in the future, but that’s definitely not a good idea, especially if security is one of your top priorities (it should be).

What if a critical bug fix that affects your site is released for the original theme? You’d need to install these updates, so doing things the right way and making your customizations in a child theme is habit you must obtain.

Getting started

Creating a child theme is relatively simple task and doesn’t require much knowledge or coding experience. However, it can be a bit intimidating if you don’t know what to do.

Lucky for you, we’ve created starter child themes for all Althemist themes, so you don’t need to worry about that. Getting started is as easy as uploading the child theme in your WordPress admin dashboard and activating it.

If you’re reading this and you’re not one of the 12 100 Althemist customers, you have the chance to fix that right now. 🙂

Feel free to download any of the Althemist child themes to use as a guide for creating your own child theme.

How to get started:

  • Download the child theme that works with your parent theme.
  • Upload the child theme by visiting Appearance → Themes menu in your WordPress dashboard. Click Add New and upload the child theme zip file.
  • Activate the child theme.
  • Modify the child theme files as per your needs.

Customizing CSS

Now that you’ve activated your child theme, you’re ready to start customizing your website. Custom styles should be added in your child theme’s style.css file. Inside the style.css file of most themes, you’ll find a line at the bottom that says something like:

/* Add your customizations below this line */

This is where you add your custom styles. If you need help with custom styling, see one of our great CSS tutorials for beginners.

Customizing Template Files

Sometimes you’d need to customize more than just styles. For example, you may want to add something in the header area of your site. To do this, copy the header.php file from the parent theme folder into your child theme’s folder and edit the code in the new file. The new file will automatically take precedence over the parent theme file, and any changes you make in the new file will be saved when you update the parent theme in the future.

Keep in mind that most translation ready themes would count number of lines in template files in order to locate translatable strings. If that’s the case with your theme, you’d need to re-compile it’s POT file.

You can also customize templates within sub folders of the theme. For example, in your theme there may be a woocommerce/ folder with various custom WooCommerce templates used throughout the theme. To customize a template file in a sub folder, you’ll need to copy that template file and place it in your child theme keeping the same folders structure. For example, if you want to customize woocommerce/reviews.php, you’ll want to place that in woocommerce/reviews.php in your child theme.

Downloads

Additional reading

For a more detailed explanation on how to create a child theme and some examples for doing things like loading new script and styles, check this guide from the official WordPress Codex.

About the Author:

Dimitar Koev is a graphic and web designer, front-end developer and marketing expert. CEO & founder of the Althemist team (previously known as Koev) - an independent envato market author, focused on building WordPress themes with strong e-commerce accent.

Leave a Reply

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