Creating a child theme / UXBARN

This article is offered for informational purposes. Please note that while we're happy to provide this guide, we can't offer support for custom code modifications. For details on what our support covers, please review our Item Support Policy.

Before you proceed, it's crucial to understand the steps outlined in this article.

Firstly, ensure your theme is updated to the latest version.

If you're planning to make more than just CSS changes to the theme, we highly recommend using a child theme. A child theme allows you to modify the parent theme's functions, templates, and styles without losing those changes when you update.

For these tasks, you can use an FTP client like FileZilla to connect to the server hosting your WordPress site.

Ready to create a child theme? Follow the steps below:

1. Create a New Folder: Start by creating a new folder for your child theme within the "themes" directory of your WordPress site. The directory path should look something like this:

[root]/wp-content/themes/

For this example, we'll name the child theme's folder "child-theme," making the complete path look like:

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

2. Add Required Files: Inside the "child-theme" folder, create two essential files: "style.css" and "functions.php."

3. Edit 'style.css': Open the "style.css" file in your child theme and insert the following code at the top:

/*
 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 crucial part here is the "Template" line. This must match the folder name of the parent theme. For instance, if you're using our Kathy theme as the parent, the "Template" line should read "kathy," like so:

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

Note: If you're using a different theme, adjust this line accordingly.

4. Edit 'functions.php': Now, open the "functions.php" file in your child theme and add the following code at the top:

<?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 );

This action and function instruct WordPress to load the "style.css" file of the child theme, appending it to the parent theme's list of styles on the front end.

5. Activate the Child Theme: Finally, navigate to your WordPress admin panel and go to "Appearance > Themes." You should see your child theme listed among the available themes. Click to activate it.

----------

Overriding Parent Theme's Template Files

If you wish to modify theme template files like "header.php" or "index.php," simply copy the desired file from the parent theme into your child theme folder. You can then make your edits there.

----------

Overriding Parent Theme's Functions

To modify functions from the parent theme—say, the "uxbarn_register_theme_image_sizes()" function—copy only the specific function into the "functions.php" file of your child theme.

* Note: Be sure to copy only the "function() {...}" portion, excluding 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.

----------

Important Reminder!

After updating the parent theme to a newer version, always review the code in your child theme. Update it as needed to align with any changes in the parent theme. This practice ensures that your child theme remains up-to-date and avoids potential conflicts.

----------

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