Another post in our series on Creating Azure (hosted) WordPress Websites without knowing php or MySql!
Why Use a Child Theme?
Child Themes are used when you know that you will be customizing and changing the website’s theme. The Child Theme is totally dependent on its parent to be able to work. A Child Theme isn’t a viable entity in itself – it uses everything in the parent theme and then you only modify what functions you want to be different. The Parent Themes files are not changed. In WordPress, when a Theme is updated, which they regularly are, all current customizations are over-written and lost. Using a child theme allows modifications and additions to the functionality of the parent theme, without modifying the parent theme’s code files directly. Updating the parent theme is easy and doesn’t erase any customizations. Plus, you can always revert back to the parent theme if you inadvertently break the child theme.
Note that using the Divi theme, a child theme is not required since there is a Custom CSS option built into the theme that will not be overwritten during theme updates.
How to Build a Child Theme:
From the Codex of WordPress.Org:
A child theme consists of at least one directory (the child theme directory) and two files (style.css and functions.php), which you will need to create:
- The child theme directory
- css (we will create a stylesheet header to connect to the parent theme)
- php (we will enqueue the parent and child theme stylesheets)
Go to the Kudu Debug console for the website, which in our case is:
https://wp-techblog.scm.azurewebsites.net/DebugConsole > CMD :
Navigate to site > wwwroot > wp-content > themes folder (by clicking on each folder name in the sequence). Note the directories for each of the default WordPress Themes and the Divi Theme that was uploaded previously.
Create a new folder inside the Themes folder, named Divi-Child (leaving no spaces in the child theme name), by selecting the New folder option from the + icon to the right of the /themes:
Within the Dive-Child folder, add a ‘New file’:
Name the new file ‘functions.php’:
Create another new file named ‘style.css’:
The next step is to create the child theme’s stylesheet. Open a local text editor and setup the following stylesheet header, using your theme’s info:
/*
Theme Name: Divi-child
Theme URI: http://www.elegantthemes.com/gallery/divi/
Description: Child theme for the Divi theme
Author: Elegant Themes
Author URI: http://www.elegantthemes.com
Template: Divi
Version: 1.0.0
*/
/*
Theme customization starts here
------------------------------------------------------------------------------- */
The 2 key lines of script are the Template, which is the name of the parent theme’s directory, and the Theme Name which is the name of your child theme.
Paste this text into the empty style.css file just created, by selecting the pencil icon to the left of the file name for editing the file > Save.
(NOTE: In the Divi Theme, it is unnecessary to use the style.css in the child-theme since the Divi Theme provides an “Additional CSS” feature in the Theme Customization options. Any CSS pasted/Saved in the Additional CSS will persist even with Theme Updates. However, a child-theme is being used here because of changes being made to core theme files like the functions.php file)
Now, it is necessary to enqueue the parent and child theme stylesheets – so the child-theme will use the parent theme’s style sheets. Any CSS added to the child theme’s style.css file, will override the parent theme’s css for the same elements.
The functions.php contains a theme’s main functions. The parent theme’s functions are loaded after the child theme’s functions, so any additional php functions added to the child theme will add custom functions to your theme output.
Paste this code into the functions.php file just created > Save
<?php
add_action( 'wp_enqueue_scripts', 'enqueue_parent_styles' );
function enqueue_parent_styles() {
wp_enqueue_style( 'parent-style', get_template_directory_uri().'/style.css' );
}
?>
Now the Child Theme can be activated on the website:
In the Dashboard > Appearance > Themes > Divi-child > Activate
The website URL loads a basic, un-customized Divi theme front end:
Deleting unused Themes
Once we’ve validated the successful activation of the child theme, delete the default themes from the website. A default theme can always be downloaded again for trouble shooting and testing purposes if necessary.
In the website’s Kudu Debug Console, navigate to site > wwwroot > wp-content > themes folder:
Delete the default WordPress themes twentyfifteen, twentyfourteen, twentysixteen, twentyseventeen folders using the 
icon
to the left of the folder name in the Kudu UI.
Read the other posts in our series on Creating Azure (hosted) WordPress Websites without knowing php or MySql!