How to create a Divi Child Theme

by | Jan 7, 2018 | Dark Side, WordPress

Is it important to have a Child Theme?

Yes. Even if it is for a small project you can just create Child Theme with your clients pic or logo and show them they own a theme, it will be irrelevant for us , but they are going to like it.

For big projects or projects where we need to add custom functions and overwrite the php templates it is imperative to use a Child Theme, otherwise when the Parent theme get an update all your code will be deleted. Now let’s see how to create one.

This is what a Child Theme needs to work

In order to be recognized as a Child Theme, WordPress requires the next 3 files:

Style.css

Functions.php

Screenshot.png

Let’s see what’s inside of them!.

Style.css file

Open up your text editor ( I use Atom ) and create a new file called style.css. Then paste inside this code and replace the Theme Name, Author, Author URI and the Description for your own information.

You can add more CSS below the line, the top lines are to let WordPress know this should be treated like a Child Theme. Don’t forget to check your WordPress version.

This is valid for any theme you just need to replace the Template ‘Divi’ to your Parent theme name.

1
2
3
4
5
6
7
8
9
10
/*
 Theme Name:     Master Divi
 Author:         Nicolás
 Author URI:     https://masterdivi.com
 Template:       Divi
 Version:        1.0
 Description:    "How to create a Child Theme"
 WordPress Version: 4.9.1
*/
/*Your CSS under this line*/

Functions.php file

Create a new file and save it as functions.php ( like you did with the CSS file ). This file will contain all our custom functionality.

Time to link the style sheet we created before, for achieve this step just simply paste the next snippet in to the file.

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

Screenshot.png file

A regular PNG file, with your clients logo or background, or even your own company logo. you can also use JPG, JPGE and GIF but it is not recommendable.

The size of the image should be 1200px wide by 900px tall, try to keep the content in the center of the image , and more if you are using a logo to display.

This image will be displayed in the Theme selection page.

Let’s put all together

Once you have your 3 files ready put them in a folder and give the folder the name of your Child Theme.

Time to compress it, Winrar or 7zip are valid but the format of the compression must be ‘.zip’.

Upload it to your site from Appearance -> Themes -> Add New -> Upload, and you are ready to go!.

Child Theme Maker

If you want to avoid doing it manually you can check out this awesome Child theme Maker from Elegant Marketplace.

[coffee]

2 Comments

  1. Tony

    keep hearing about child themes, but not seen a complete explanation that goes into what happens if Divi is updated
    e.g does the child theme still get all the new features and bug fixes, and if not how do you do that?

    Reply
    • Nico Master

      Hey Tony, a child theme is used whenever you need to edit any file from the original theme (Divi) or add new functions. Dont get confused, Divi has it functions and the cihld theme has the exact same, since its retiving them from the parent theme (Divi) therefore, updating Divi is required to have the last features working.

      So if you dont use a child theme and for example you make an edit on the header.php file , whenever Divi gets an update your change will be overwritten and you will loose it.

      Hope this helps you!

      Reply

Submit a Comment

Your email address will not be published. Required fields are marked *

How to Cache and Boost WordPress Performance

How to Cache and Boost WordPress Performance

Want to boost your site performance? Learn how to do it by activating caching in your site. With a simply and clean plugin and as always in a couple of minutes. Let’s not forget about the small extra for fixing Google Analytics!.

How to Make any Element Fixed – Divi Builder

How to Make any Element Fixed – Divi Builder

Want to learn how to make any Section / Row / Module fixed? So whenever you scroll the element stays in there with you! Learn how to achieve this trick in a couple of minutes with R2D2 help!.

How to Maintain a WordPress Site Clean

How to Maintain a WordPress Site Clean

Hello everyone, is time to talk about how can you clean your WordPress site for a better maintenance, optimization and security purposes in just a couple of minutes once again!

Follow MasterDivi on Facebook

Be updated with the latest tricks!