Create And Customize A WordPress Child Theme

If you want to make changes to your WordPress theme, you’ve probably heard that a good way to do it is to create and customize a WordPress child theme. But do you know what a child theme is and why it’s good to use them? If not, you’re in the right place.

WordPress Child Theme

Having a child theme implies that there’s also a parent theme. A parent-child relationship is something you’ve heard of if you know a bit about coding. When it comes to WordPress, specifically, we have a parent-child relationship in custom post types, for example. A child’s class or a theme is something that has the characteristics of its parent but can have more added characteristics to it, which will make it different from its parent. When speaking in terms of themes, a child theme is installed alongside the parent time. A child theme enables us to change the parent themes, but in a safe way, without directly editing the parent theme. Basically, a child theme will have the most of its design setting the same a the parent theme. But, if you make some changes to it, these changes will override the initial settings.

Reasons to Use a Child Theme

In case you’re wondering why not make changes directly to the parent theme, we’ll explain it right now. The main reason why it’s not a good idea to do this is because of theme updates. In order for your website to function properly, you want to apply updates. However, if you customize the parent theme, you’ll lose all of your changes every time you update your theme, as the changes will be overwritten.

Update.
Updates are important for the security of your website

How do WordPress Child Themes Work

A child theme is stored in a separate directory from the parent theme. Each time has its own style.css and functions.php files. While you must have at least two files in the child theme directory, in order for it to work properly, you can add other files as well. The two bare minimum files can help you alter styling, coding and scripts, and layout parameters. When a user visits your website, WordPress loads the child theme and then fill missing styles and functions using part of the parent theme. This allows you to get the best out of your child theme and customize it, and not sacrifice the parent theme’s core functionality.

How to Create a Child Theme

There are several ways you can create a child theme. You can do this manually, using an FTP client or a file directory, or you can create a child theme using a plugin or an online generator.

WordPress, code is poetry.
Without plugins, some coding will be necessary

Manually

In order to manually create a child theme, you’ll need to use an FTP client or a file manager. Also, note that here we’ll create a style.css file based on the Twenty Seventeen theme.

  • Via an FTP client or a file manager, access your public_html > wp-content > themes folder
  • Here, you should create a New Folder. Conventions say that you should name this folder, with the name of the parent theme, but add -child as a suffix. Here, the name of the new folder will be twentyseventeen-child.
  • Create a style.css file inside the folder and add this code to it:
/* 
Theme Name: Twenty Twenty Child 
Theme URL: http://yourdomain.com
Description: Twenty Twenty Child 
Theme Author: Your Name
Author URL: http://yourdomain.com
Template: twentytwenty 
Version: 1.0.0 
Text Domain: twentytwenty-child 
*/
  • Adjust the values as necessary. Pay extra attention to the Template line, as it tells WordPress which parent theme your child theme is related to. When done, save your changes and close.
  • Using a text editor, create another file named functions.php, but don’t copy the code from the parent theme. Copy and paste this code there to the blank file:
<?php
add_action( 'wp_enqueue_scripts', 'enqueue_parent_styles' );
function enqueue_parent_styles() {
   wp_enqueue_style( 'parent-style', get_template_directory_uri().'/style.css' );
}
?>
  • After you save and close this file, visit your website and go to Appearance>Theme. Activate the child theme, and you’ll notice it looks just like its parent theme.

Using a child theme plugin

Using a child theme plugin might be easier and more intuitive. Here are some of the plugins you can use Child Theme Generator, Child Theme Configurator, or Child Theme Wizard, for example. Keep in mind that using plugins also require some knowledge. For example, you might need to disable a plugin, without accessing your admin area, as it might come a time when you won’t have this access. And it takes some skill to do this. However, overall, plugins are usually easy to work with, so don’t be afraid to use them.

Using an online generator

Using an online child theme generator makes this process even easier. You just need to go to https://childtheme-generator.com and follow the steps. When you create and download the theme, go to Appearance>Theme and upload and activate your child theme.

How to Customize Child Theme

In order to customize your child theme, you need to know how to inspect elements on the webpage and understand the basic CSS rules. In order to personalize your child theme, from the active child theme, go to Customize>Additional CSS.

Time for change.
If you want to make some changes, this is what you need to do

Change Background Color

The right background plays an important part in the website’s appearance. While you can add background image in WordPress, here’s we’ll just talk about changing the background color of your child theme. To do so, add this CSS rule:

.site-content-contain {

background-color: #DEF0F5;

position: relative;

}

Keep in mind that you can change the value after the background color. This specific value is a value of light blue.

Change Sidebar Color

This is the CSS rule you should insert in order to change the sidebar color:

.widget {

background: #B9EBFA;

padding: 25px;

Customize Font Types, Size and Color

To change the font type, size, and color of your WordPress child theme, insert the code below. Note that the p tag represents the paragraph text.

p {

color: teal;

}

p {

font-family: Georgia;

font-size: 18px;

}

You can also change the text of other parts, like title and header, but you need to inspect the elements, locate the CSS style link, copy it, and change the values as needed.

Conclusion

If you want to customize a theme, without directly changing their code, child themes are a great way to do this. With this guide, you’ll be able to create and customize a WordPress child theme and use them for many different tasks. The best part is that you won’t lose your changes after updating the parent theme.

Stay Informed