[et_pb_breadcrumbs _builder_version="3.0.66"] [et_pb_breadcrumb title="Home" link="/" /][et_pb_breadcrumb title="Learn" link="//optimusdivi.com/learn/" /] [/et_pb_breadcrumbs]

Creating a Divi Child Theme

The structure of a Child Theme

A Child Theme is essentially a collection of files inside a folder of the Themes directory of your website. It is then set as the active theme in your WordPress Appearance>Themes dashboard. As a minimum, all it needs is a file called style.css with some simple text/code that tells WordPress where to look for the Parent Theme. It needs to be uploaded in the “themes” folder of your server (next to the Divi Theme install). And then it must be “Activated” or set as your current active theme. Child Theme styling always trumps Parent Theme styling. Anything not specified in the Child Theme will still look to the original Theme for styling. So you have the power to just change specific parts, and harness the beauty of Divi for everything else.

Note: WordPress has Child Theme documentation here: developer.wordpress.org/themes/advanced-topics/child-themes Even though it isn't listed as a requirement in WordPress documentation, we have found that it fails without a functions.php file. Even if all that file contains is an "open PHP"tag.

The most basic Child Theme

At its most basic level, a Child Theme only needs to be a file called style.css with this content in it (you can change the author and author URI):

style.css

/*
Theme Name:     Divi Child Theme
Description:    Child Theme of Elegant Themes' Divi Theme
Author:         Optimus Divi
Author URI:     https://optimusdivi.com
Template:       Divi
Version:        1.0.0
*/

We also recommend you have a functions.php file that includes at least the following (we have found everything less glitchy since we added this):

functions.php

<?php

Pulling in the Divi Styles

Many articles around the net will recommend adding this to the style.css file:

additional note for style.css

@import url("../Divi/style.css");

/* =Theme customization starts here
------------------------------------------------------- */

BUT we (and WordPress) recommend enqueuing the parent theme styles in the functions.php file instead:

Recommended addition to functions.php

add_action( 'wp_enqueue_scripts', 'get_main_style' );

function get_main_style() {

   wp_enqueue_style( 'main-divi-styles', get_template_directory_uri().'/style.css' );

}

This is because the css import function is slower for browsers to process and will result in a slower site. The functions.php method above will be faster for your site visitors.