You can build a child theme for Divi (or Extra) in just a few simple steps.

This post will show you how to create your Divi or Extra child theme using a free plugin as an alternative to the many child theme generators online.

Certain situations will require you to use a Divi child theme to prevent any customizations you make to your Divi theme files or plugin files from being lost when updates are made to the parent files.

The easiest way to add a child theme for a new install of Divi would be to download this free blank child theme, upload it via Appearance > Themes > Add new, and activate it. You then have a starter child theme ready to add any customizations needed. You do not need to use a generator or plugin at all!

There are other options for creating a child theme including using one of the online Divi child theme generators such as the Divi Space generator or using a free WordPress plugin to create one.

With the introduction of the Divi Theme Builder, there is less need for adding a child theme for Divi, but there are still occasions when one should be used. If you are wondering “Do I need a child theme with Divi?”,  then follow these guidelines;

You do need to create a child theme if you will;

  • edit any of your Divi theme files. (wp-content > Themes > Divi)
  • edit any of your plug-in files (wp-content > plugins)
  • add a large amount of custom code (CSS, JavaScript, etc.)

You don’t need to create a child theme if you will;

  • only use the customization options in the Divi Builder, Divi theme options, module customizer, and theme customizer.
  • add CSS into the custom CSS areas within the Divi Builder, Theme Options, Page Settings, or in the modules’ advanced settings tab.
  • add javascript code into a Divi code module or in “Divi” > “Theme Options” > “Integration” > “Add code to the…”

For a more feature-rich option for your child theme, you can use the Child Theme Configurator plugin which allows you to create and activate a child theme, easily copy theme files into your child theme, and activate several other useful settings.

If you do need to use a child theme you can download the Bare Bones child theme above. If you prefer to use a plugin to create your own from scratch, then this post will show you how to create your own Divi or Extra child theme using a WordPress child theme generator plugin.

You can also just buy a fully designed Divi website as a premium Divi child theme. These Divi child themes are just the same as one made with a generator or the Bare Bones child theme, but have already had extra files and designs added.

Free Divi child theme generator plugin

The Child Theme Configurator plugin is a free plugin available in the WordPress repository that allows you to quickly generate a child theme and comes with some other useful features.

Steps to generate a Divi child theme

  1. In your WordPress dashboard go to Plugins > Add New and search for “Child Theme Configurator”.
    Select the Child Theme Configurator by Lilaea Media by clicking “Install Now”. and then click “Activate” once installed.
    Divi child theme configrator plugin
  2. You will then see the plugin in your list of installed plugins.
    Open the plugin settings by selecting Tools > Child Themes in your WordPress menu.
    child theme configrator settings
  3. The generator process has steps clearly shown in blue icons.
    By default, step 1 will select “CONFIGURE an existing Child Theme” which you can leave as-is to create a new child theme.
    Step 2 has a dropdown to select which of your themes to create a child theme for. You can select the Divi Theme and click the “Analyze” button in step 3. This will then load steps 4 to 9.
    child theme settings 4-9
  4. Steps 4, 5, and 6 can be left with their default settings.
    For step 7 you can click on the button that says “Click to Edit Child Theme Attributes” and fill in the details for your child theme.
    child theme name and author settings
  5. If you have Menus, Widgets, and other Customizer Settings from the Parent Theme that need to be copied over to the Divi Child Theme you can check the box in stop 8. You can leave this blank if it is a new installation of Divi/WordPress.
    Customizer settings and menu in child theme
  6. the last step is to click the “Configure Child Theme” button in step 9.
    This will create your child theme and it will be available in your WordPress dashboard under Appearance > Themes.
    You can then click on activate the child theme to finish the process.
    You have now generated and activated a Divi child theme for your website.
    Divi child theme activation

Adding files to your child theme

One of the main uses of a child theme is to edit the PHP code in a Divi theme file. If you edit the code directly in the parent Divi theme, it will be overridden when the Divi theme is updated.

To prevent this from happening, you copy the desired files from the parent Divi theme into your child theme. You can then edit these child theme files without those edits getting lost when you update Divi. These files do not need to be updated when Divi is updated.

The Child Theme Configurator plugin allows you to easily select files from Divi to copy over to your child theme ready for customization.

Steps to copy files into your Divi child theme

  1. In your WordPress dashboard go to Tools > Child Themes to access the Child Theme Configurator options.
    With your child theme selected, click on the “files” tab.
    You will see a list of files from the Divi Theme in “Parent Templates” which can be selected as required.
    copy files to child theme
  2. With your files selected, click on the “Copy Selected To Child Theme” button.
    Your files will now be copied over to your child theme and available in Appearance > Theme Editor where they can be edited.
    Edit Divi child theme files

The plugin can be used to create a quick and easy child theme, but also comes with several other features that may be useful when adding your child theme to Divi including;

  • Smart Theme Analyzer determines the correct settings to use
  • Copy existing widgets, menus, and Customizer options to the child theme
  • Use web fonts in your child theme
  • Enqueue (link) stylesheets instead of using @import
  • Quickly locate and edit theme CSS.
  • Customize @media queries for responsive design
  • Select hex, RGBA (transparent), and named colors using the Spectrum color picker
  • Add fallback styles (multiple values per property)
  • Multisite compatible
  • Make modifications unavailable to the Customizer
  • Export child themes as Zip Archive
  • Identify and override exact selectors from the parent theme
  • Preview custom styles before committing to them
  • Uses WP Filesystem API – will not create files you cannot remove

Final thoughts on child theme generators

As with anything in WordPress, there are several options for generating a child theme in Divi. The simplest way would be to just download a blank child theme zip file and upload it to your site. This is an excellent option for new users with a new site, especially if you just want somewhere convenient to store your CSS.

Using a child theme generator plugin such as the one used above is also very quick and makes it easy to copy over the files you need without having to access an FTP program.

5 5 votes
Article Rating