Design your own Premium Divi child theme ready for sale

by Kjell | March 11th, 2016 | Divi child themes, Freebies, Tutorials | 34 comments

I won’t go into detail why you need a child theme, read WordPress Codex or this detailed article at WPbeginner or this article at Elegant Themes website. I assume you know how to create a page layout with Divi or Extra.

In this short tutorial I’ll show you how to wrap up your Divi child theme ready for sale on your own store or on a Marketplace like Divi Space. It’s very easy and anyone can create their own child theme.

screenshot

First you need to create a simple blank child theme. We’ll start with the bare minimum and I’ll add some features at the end of this tutorial to import Customizer settings, add a screenshot etc. Lets get started.

1. Create a new folder on your desktop and give it the name of your child theme

step1

2. Inside this new folder, create 2 empty files : style.css and functions.php and 1 new empty folder called /import

step2

3. Open your favorite text editor and edit style.css

step3

Add this to your style.css. Make sure to change the Theme name, Description, Author, etc

/*
 Theme Name: My Premium Child Theme
 Theme URI: http://www.candythemes.com/
 Description: Child Theme built for a tutorial on how to create your own Divi or Extra child theme ready for sale
 Author: CandyThemes
 Author URI: http://www.candythemes.com
 Template: Divi
 Version: 1.0
 License: GNU General Public License v2 or later
 License URI: http://www.gnu.org/licenses/gpl-2.0.html
*/

/* Add your custom styles below */

4. Next open and edit functions.php

step 4

Add this to functions.php and save your file

<?php
/**
 * Load parent Divi styles.
 */
function candy_enqueue_assets() { 

    wp_enqueue_style( 'parent-style', get_template_directory_uri().'/style.css' ); 

}
add_action( 'wp_enqueue_scripts', 'candy_enqueue_assets' );

5. Your blank child theme is now ready and you can start creating your custom theme. Start your FTP program and upload your child theme to your hosting account, place your child theme inside the /wp-content/themes/ folder

step5

6. Activate your blank child theme, don’t worry about the transparant image, we’ll add a screenshot at the end of this tutorial

step 6

7. Create your pages / website add content, create menus etc.

step 7

8. When you are finished with your page layout, click the “Save to Library” button to add this page to the Divi library, give it a Title. Do this for each custom page you want to include in your child theme

step8

9. Now that your child theme is finished you need to export your content. Divi 2.7 makes it extremely easy to export and import your content. Go to Divi > Divi Library.

export-layouts

10. > Click Import/Export at the top of the screen. A .json file will be saved in your /downloads folder.

export-layouts2

11. Next go to Divi > Theme Options.

theme-options1

12. Click “Arrow Up/Arrow Down” at the top of the screen. A new .json file will be saved in your /downloads folder.

theme-options2

13. Next go to Appearance > Customize. Click “Arrow Up/Arrow Down” at the top of the screen.

customize1

14. A new .json file will be saved in your /downloads folder. .

customize2

15. Find the 3 .json files in your downloads folder and copy them to your theme /import folder. And that’s it, your child theme is now ready for sale !!! You might want to add a pretty screenshot.jpg. Make a snapshot of your homepage and make it 880x660 pixels. Save this as screenshot.jpg inside your child theme folder. Copy the original Divi footer.php inside your child theme and modify as needed.

step 15

16. Now all that is left is to make sure you make a clear “readme.txt” document on how to install your child theme. To use your child theme on a new WordPress installation you just upload your child theme folder, active the theme, import all Page Layouts, Customize Settings and Theme Options using the .json files.
You can find a sample document inside our Free demo child theme. Use it as you like it’s 100% GPL.

This is my first tutorial, download the sample Divi child theme below, hope you find it usefull.

Update : I’ve added the TGM plugin activation script in another tutorial, check it out.

Instant access to ALL themes and support

Join now
Name
Email
Your message