Create and Use a WordPress Child Theme with UXBARN Themes

Are you thinking about customizing some parts of our theme to make it fit your requirements, but you are not sure how to do that and where to start? In this series, we will guide you through the process of how to create a new WordPress child theme, how to customize the theme’s template files, functions, and CSS via the created child theme.

The instruction in the series can be applied to all of our themes. The main theme (parent theme) we use for the demonstration here is Fineliner.

What is WordPress Child Theme?

A child theme is a special theme that contains most of the custom code for the purpose of theme customization. Basically, the custom code in a child theme overrides the code and functions of a parent theme. So, if a parent theme supports the use of a child theme, you will then be able to customize it to whatever you want.

Why Use Child Theme?

Customizing the code via a child theme is always better than direct editing the code of a parent theme and is strongly recommended. Why? The primary reason is that if you directly edited the code of a parent theme, when the theme is updated to a new version, all of your customization will also be gone due to file replacement.

But if you put all of your customization in a child theme, they will not be affected by the theme update since they are in a separate folder.

OK, now you know the basic information and concept of a child theme. The following sections will guide you on how to create one.

Requirements

• Fineliner WordPress theme (for demonstration)
• Knowledge of PHP, HTML, and CSS
• Access to your self-hosted WordPress directories and files

Let’s Start

1. Before everything else, make sure that you are using the latest version of the theme you want to customize. See this related article for how to set up an automatic update in our themes: Enabling Automatic Update in UXBARN Themes.

2. Use an FTP client like FileZilla to connect to your web server that hosts your WordPress site. After that, browse to the “themes” folder of WordPress. The path should look like this:

[root]/wp-content/themes/

3. Create a new folder for your child theme. 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/

4. Create two required files in the “child-theme” folder which are style.css and functions.php.

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

[css]
/*
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
*/
[/css]

The important line is the “Template” line. It must correspond to the folder name of the parent theme. For example, in this case, we use the Fineliner theme, so it is the parent theme and the value to be put in the “Template” line will be “Fineliner” like this:

[css]
/*
…
Template: Fineliner
…
*/
[/css]

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

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

[php]
<?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 );
[/php]

The wp_enqueue_scripts action calls our custom function, child_theme_enqueue_styles(). In the function, we use wp_enqueue_style telling WordPress to load the style.css file of the child theme (the get_stylesheet_directory_uri() function will return the path of a child theme when it is active.)

Another point we would like to mention is the 99 parameter value in the action hook. It refers to the order number for the specified function to be executed. Lower numbers correspond with earlier execution and higher numbers do the opposite (the default value is 10.)

Since the functions.php file of a child theme will normally be loaded before the parent theme’s file, if we do not use high numbers in our case, the child_theme_enqueue_styles() function will be called before the parent theme. As a result, our child theme’s style.css file will be loaded before the parent theme’s stylesheets. And that is not the result we expected it to be.

So, by using this code snippet, the style.css file of the child theme will be loaded as late as possible in the theme’s stylesheet list on the front end. The file will be loaded after the parent theme’s stylesheets. This means that you can put your custom CSS code in the file to override the parent theme’s styles.

7. Now go to your WordPress admin and go to the “Appearance > Themes” menu. You will see your child theme appearing in the theme list. Click to activate it.

8. That is it for creating a new child theme!

Conclusion

In this article, we just talked about how to create a WordPress child theme to use with our Fineliner theme (the concept can also be used with our other themes.) Once the child theme is built and activated, you can use it to customize the code of the parent theme by overriding them. We will talk about that later in the next articles of this series.

Note that all the instructions and code in the series are based on UXBARN themes only. If you are using a theme from another provider, there might be some differences that you need to change accordingly.