Skip to main content

How To Create A Divi Child Theme From Scratch

Building a child theme from scratch is a simple process. All a child theme is, is a series of files, typically, a:

  • functions.php file,
  • style.css file, also called a stylesheet, houses all of the website’s aesthetic enhancements,
  • any other particular files you’d like to include unique code in, that’ll override the code in the main parent
    theme files.

To create the files required for the child theme, you’ll need either an IDE (integrated development environment) or a text/source code editor.

The source code editor, TextEdit (Mac) or TextEditor (PC), will come already installed on your computer, while the IDE’s will need to be downloaded from the internet and installed on your computer. Two of the most popular, standard editors are Brackets and Sublime. Both are free to download, easy to use and include color cues to make code easy to script up and identify.

Before diving in and creating each file, you’ll need to allocate a theme directory for the child theme within the WordPress installation.

Create a child theme directory​

The child theme directory will be the folder that’ll house all of the files of your child theme.

To begin, create a new folder on your computer and name it something related to your project. The child theme directory should be named something easily identifiable, something that can easily relate to your client. When naming the child theme directory folder, do not include spaces between the words, instead, use hyphens or remove spacing altogether, ie. Divi-Child-Theme or DiviChildTheme.

As you create the individual files, add them to the child theme directory. Once all of the files have been added, you can then add the child theme to your website, described in detail in the How to Install a Divi Child Theme? section.

Style.css​

To create the stylesheet for your child theme, create a new file in your IDE or Text Editor and save the file as ‘style.css’. Then, copy the code below, paste it into the file and rename the theme name and author information based on your needs. Be sure to change the various details and replace with your own.

In the stylesheet description, the most important things to note are the “Theme Name” and “Template” sections:

  • The Theme Name (the actual name of your child theme) becomes the display name within the Appearance > Themes of the WordPress theme selector
  • The Template (which must always be labeled here as ‘Divi’) tells WordPress which theme it should use as the parent.

An older method of enqueuing the parent theme used the command ‘@import’. It is suggested by the WordPress Codex that the @import method is no longer deemed as best practice due to page load time. Instead, users are advised to create and make use of a functions.php file.

functions.php​

The most important file in the child theme is the functions.php file as it will enqueue the parent theme (Divi). To begin, open the IDE or text editor. Copy the code below and paste it into the functions.php file.

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

Make sure to relabel the correct paths to both the parent and child theme folders. Once you have amended all of the above details to fit your deliverables, save the file as functions.php within the child theme folder.

screenshot.jpg​

It’s recommended to add an image of your or your client’s logo or a similar graphic into the child theme folder. Create an image with the dimensions 880×660 px and save it as screenshot.jpg.

Include this image in the child theme folder along with the functions.php and style.css files. When your child theme is installed and activated, this image will display as the graphic in the Appearance > Themes section of the theme selector.