Create And Customize A WordPress Child Theme

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.

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.

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:

Change Sidebar Color

This is the CSS rule you should insert in order to change the sidebar 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.