Okay
  Print

Creating a child theme


This article is provided as a courtesy. The publishing of this information does not imply support of this article. The customization and/or the issue of the customized code is outside the scope of support provided by UXBARN. Please take a moment to review the Item Support Policy.

You must exactly know what you are doing when following the article instruction.



First thing first, make sure to update the theme to the latest version before proceeding.

If you want to customize the theme at coding level, not just CSS, we would strongly suggest using a child theme for that. A child theme allows you to override the parent theme's functions, template files and CSS so you will be able to adjust them as you want.

Note that you can use an FTP client like FileZilla to connect to your web server that hosts your WordPress site.

Let's start by following the below steps to create one:

1. Create a new folder for your child theme in the "themes" directory of your WordPress site. The path to the directory should look like this:

[root]/wp-content/themes/

In this case, we name the child theme's folder as "child-theme" so as a result, the complete path will look like this:

[root]/wp-content/themes/child-theme/

2. Create two required files in the "child-theme" folder which are "style.css" and "functions.php".

3. Open the "style.css" of the child theme and add this code at the beginning of the file:

/*
 Theme Name:   Child Theme
 Theme URI:    https://uxbarn.com
 Description:  My Child Theme
 Author:       UXBARN
 Author URI:   https://uxbarn.com
 Template:     [parent-theme-folder-name]
 Version:      1.0.0
 License:      GPL
 License URI:  http://codex.wordpress.org/GPL
 Tags:         light, right-sidebar, responsive-layout, accessibility-ready
 Text Domain:  uxbarn
*/

The important line is the "Template" line. It must correspond to the folder name of the parent theme. For example, if you are using our Kathy theme, it will be the parent theme in this case, and the value to be entered to the "Template" line will be "kathy" like this:

/*
 ...
 Template:     kathy
 ...
*/

You may be working with a different theme, so adjust it accordingly.

4. Open the "functions.php" file of the child theme and add this code at the beginning of the file:

<?php
function child_theme_enqueue_styles() {
    wp_enqueue_style( 'child-style', get_stylesheet_directory_uri() . '/style.css' );
}
add_action( 'wp_enqueue_scripts', 'child_theme_enqueue_styles', 99 );

The action and function tell WordPress to load the "style.css" file of the child theme by appending it to the parent theme's CSS list on the front end.

5. Now open up your WordPress admin and go to the "Appearance > Themes" menu. You should now see your child theme in the theme list. Click to activate it.

  

----------

Overriding Parent Theme's Template Files

If you want to edit the code in the theme's template files like "header.php", "index.php", etc, you can just copy the file from the parent theme and put it into your child theme folder then edit it from there.

----------

Overriding Parent Theme's Functions

If you want to edit the functions of the parent theme; for example, the "uxbarn_register_theme_image_sizes()" function, you can do that by copying only the function from the parent theme and put it into the "functions.php" file of your child theme.

* Note that you must copy only the "function() {...}" part, NOT including the "function_exists()" wrapper.

----------

Overriding Parent Theme's CSS

You can do this by either using the "Additional CSS" field in the theme customizer or adding your custom CSS code into the "style.css" file of your child theme.

----------

Remember!

Everytime after you finish updating the parent theme to a newer version, make sure to check all the code you are using in your child theme and update them as necessary to reflect any changes in the parent theme.

By doing this, it ensures that the files and code in your child theme are always up-to-date and to prevent any conflicts to happen.

----------

That should be all the necessary information to help you get started with a child theme.

You can also find more info here: https://uxbarn.com/series/getting-started-with-theme-customization/