Okay
  Print

How to create a child theme to use with UXBARN themes?

=====================================================================

READ ME FIRST

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. Please follow 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 Fineliner theme, it will be the parent theme in this case and the value to be put in the "Template" line will be "Fineliner" like this:

/*
 ...
 Template:     Fineliner
 ...
*/

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 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.

6. That is it for creating a new child theme.

----------

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 "Custom CSS" field in our Customizer or adding your custom CSS code into the "style.css" file of your child theme.

----------

Remember!

Everytime when you finished updating the parent theme, make sure to check all the code you use in your child theme and update them as necessary to reflect any changes in the parent theme. You might back up your custom code first, update the files with the latest version, then apply your custom code back.

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

----------

That should be all to help you get started with a child theme to use with our themes.