Three Steps to create DIVI child theme

by | Jun 27, 2020 | Uncategorized | 0 comments

The create a child theme, you only need the following files, follow along and I will show you how to create your own DIVI child theme.

Create a folder

Create a folder, name it whatever you want it to show up on the theme selector page.

go to your site folder find wp-content

inside wp-content, go to themes

inside themes, you can create your folder here and name it whatever you want, the folder name will be your theme name on the theme selector page.

Create child theme files

You only need the following 2 files for your child theme to work. And a screenshot file if you want to show an image on the theme selector page.

  • style.css
  • functions.php
  • screenshot.jpg

You can copy these files from the main theme here and we can edit them in the next step.

Now let’s open up style.css, if you copy this file from the main theme, delete everything and put the following lines to the file and save.

style.css

Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.

/*
 Theme Name:     Divi Child
 Theme URI:      https://studio.comp-sq.com
 Description:    Comp-SQ Studio Theme
 Author:         Comp-SQ Studio
 Author URI:     https://studio.comp-sq.com
 Template:       Divi
 Version:        1.0.0
*/
 
 
/* =Theme customization starts here
------------------------------------------------------- */

functions.php

<?php
function my_theme_enqueue_styles() {
    wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
}
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );

At this point your child theme is ready, you can go to the theme section page to activate your own child theme.

screenshot.jpg

Create an image 880 x 660 pixels, and make it your theme thumbnail.

Go and activate your child theme

once your child theme activated, you can add your CSS styling to the style.css file, it won’t be overwritten by any future updates of the main theme.

Also, you can keep track of what’s been modified under one single file, as long as you add the modified css to the style.css file.