Doing extra customization on your website is pretty common especially if the chosen theme doesn’t support the style and functionality that you want. But most amateur website designers missed this portion which may result in losing all the extra codes every time there’s a new update on your theme. Of course, that’s not everyone’s cup of tea. It’s a waste of time, effort, and money. To avoid this, you need to make sure the parent theme is carrying a WordPress child theme version.
What is WordPress Child Theme?
A child theme is a theme that inherits the functionality and styling of another theme, called the parenttheme. Child themes are the recommended way of modifying an existing theme – WordPress Codex
WordPress codex did a very great job in explaining what child theme is.
Now, you know what’s WordPress child theme is.. Let’s build now!
A child theme needs three things:
- Its own folder,
- A style sheet name styles.css
- functions.php file
- screenshot.png (optional)
1. Create a folder under wp-content/themes
Like any theme, child themes are located in wp-content/themes in your WordPress installation. So, navigate there and create a new folder for your child theme.
A best practice is to give your theme’s folder the same name as the parent theme followed with -child phrase. Now, because we’re using the Divi theme, we will call our folder divi-child.
2. Screenshot
Upload your screenshot.png in the child theme folder, this will serve as preview under appearance > Themes
3. Functions.php
Create a blank functions.php using atom then upload in the folder you have created
4. Styles.css
Create a styles.css then write the following code below. You can modify the text field according to your preferred information.
Child Theme Syntax:
/*
Theme Name: Level Up Child
Theme URI: http://bookwormhead.com
Description: This is a child theme of Angelic site
Author: Angelic Sanoy
Author URI: http://bookwormhead.com
Template: Divi
Version: 0.1
*/
@import url("../Divi/style.css");
Lastly, go back to Appearance – Themes and press the activate button.