Child Themes

In this article, we're going to explain the benefits of using child themes and we'll give you the steps you need to create one.

  1. Why We Need to Use a Child Theme
  2. Adding Custom CSS & JS without a child theme
  3. How to Download X or Pro Child Themes
  4. How to Install a Child Theme
  5. Summary

Why We Need to Use a Child Theme

A WordPress child theme is a WordPress theme that inherits its functionality from another WordPress theme, the parent theme. Child themes are often used when you want to customize or tweak an existing WordPress theme without losing the ability to upgrade that theme. In the context of using the X and Pro themes the only time, you need to utilize a child theme is when you want customization inside the PHP files of the theme itself or use the WordPress actions and filters to achieve custom functionality.

Child themes allow you to modify, or add to the functionality of that parent theme instead of modifying the core theme files directly. The problem with modifying core theme files is that your changes are in danger of being overwritten if and when you update the theme to the latest version down the road. This is obviously an undesirable outcome, especially if you've made dozens of adjustments throughout the theme. Ultimately, child themes are great for a few different reasons:

  • If you modify an existing theme and it is updated, your changes will be lost. With a child theme, you can update the parent theme (which might be important for security or functionality) and still keep your changes.
  • It can speed up development time.
  • It’s a great way to get started if you are just learning WordPress theme development.

Adding Custom CSS & JS without a child theme

Are you just making a few styling adjustments or need to add a script? You most likely don't need a child theme at all. The X and Pro themes give you the ability to add your custom CSS and Javascript code without the need of the child theme. Go to X/Pro > Theme Options > CSS/JS to add custom code for the whole website. You can also, add the custom code per page basis by clicking the CSS or JS button at the left section of the Page Builder screen.

Pro > Theme Options

How to Download X or Pro Child Themes

Setting up a child theme actually takes a little bit of work as you need to create a new directory for the child theme, specify the parent theme so WordPress knows where to apply the new changes, enqueue the parent theme's main CSS file, et cetera. You might also want to set up a functions.php file for various pieces of functionality that you want to add or modify. Fortunately, we've done all the heavy lifting for you in this area and all you need to do is use our provided child theme, which requires none of the setup listed above.

Use these download links to get a preconfigured child theme for your theme.

How to Install a Child Theme

If you've never setup a child theme before, fear not! It's actually a lot easier than it might sound, especially since we provide you with the foundational tools you'll need to get everything up and running. Now that you have the child theme zip file downloaded by following the previous section steps, go ahead and open up your WordPress dashboard/admin, i.e (yourdomain.com/wp-admin) and login.

  1. Go to Appearance > Themes
  2. Click Add New
  3. Click Upload Theme to reveal the upload form.
  4. Use the Upload button to choose the child them zip file. If you don't already have one, download it from the section above.
  5. Click Install Now
Apperance > ThemesThemes Add ThemeThemes Add Theme

When you see Theme installed successfully, click the Activate link to complete the process. If you visit Appearance > Themes again, you will see the child theme installed.

Themes Add Theme

Summary

Well done! You've successfully installed the child theme and can use it for your website customization.

See something inaccurate? Let us know