The advanced customization of a theme, whether it is the Divi theme or another WordPress theme, requires the creation of a child theme.
Of course you can use plugins to add code without having to create a child theme or plugins to create child themes in one click.
There are even generators that can do this for you but I do not recommend all these options...
Why not create your own child theme for Divi? It's so simple!
Advertisement: This article contains affiliate links that you will easily recognize. Classic links are in purple and sponsored links are in pink.
1 - What is a child theme?
A child theme is a "satellite theme" that depends on a parent theme and allows you to make alterations and modifications without impacting the original theme (the Divi theme). A child theme inherits the features of a parent theme and takes precedence over it, i.e. all CSS styles you enter will be taken into account instead of the parent theme.
A child theme is essential if you want to make changes to a parent theme so that they are kept when the parent theme is updated.
Creating a child theme for Divi protects your initial theme, so you can copy files used by the parent theme into the child theme, so you can modify them without fear. There are only advantages to using a child theme.
Creating a child theme is not complicated, however you can use the WordPress codex if necessary.
To build a child theme, you will need:
- a text editor
- of the Divi theme
- to create a file style.css
- to create a file functions.php
Good news! You can download your child theme for Divi for free and freely at the bottom of this article!
2 - Creating the file functions.php
- Open Sublim Text (for example) and go to File > New File
- In this file simply enter these few lines:
- Save this file on your desktop by going to File > Save As
- Name this file functions.phpwhile in lowercase, then click on Save
- The SublimText application can send you a notification: confirm by clicking on Use.php
3 - Creating the file style.css
Still using a text editor like SublimText, you will be able to create the second file necessary to design the child theme for Divi, it is the file style.css. This file is mandatory, as is the file functions.phpand it is in this file that you will be able to write all your modifications and CSS rules.
If you are a beginner in CSS and you need to see more clearly, I have selected for you the best site - and I am weighing my words - to understand CSS, it is easy, there is no blah-blah and it is very educational, it is about LearLayoutdo not hesitate to visit it.
Let's get back to the basics, to create the file, here's what you need to do:
- Open, in SublimText, the style.css file contained at the root of the original Divi theme. It is in this file that you will find useful information to create your child theme.
- Locate the header at the beginning of the file: these are the elements written between /* and */
- Select these elements contained in the header and copy them (Ctrl+C).
- Still in SublimText, create a new file by going to File > New File menu and pasting (Ctrl+V) the header of the style.css file of the Divi theme you just copied.
- Modify the line "Theme Name: Divi" in "Theme Name: Divi Child" (see line 2 of the capture below). Add a line called "Template: Divi" (see line 3). Do not insert a space between the word Template and the two points which follow.
- You can add the URL of your site, your name, modify the description and possibly delete the lines you consider superfluous.
- Save this file to your desktop by going to File > Save As (the same procedure as for saving the file functions.php).
- Name this file style.css, all lowercase, and then click on Save.
4 - Creation of the screenshot.png
The screenshot.png is the image that illustrates your child theme in the administration part under the tab Appearance > Theme. This is a superfluous step but it is a little "extra" that adds value to your child theme, especially if it is for one of your customers.
- Choose an image to represent your child theme
- Resize it to 1200 pixels x 900 pixels (or 600×450)
- Register it under the name of screenshot.png
5 - Creation of the child theme folder (theme directory)
Now you have 3 files:
- the file functions.php
- the file style.css
- the file screenshot.png
You will be able to put them together in a folder that will become the folder for your child theme for Divi.
- On your computer's desktop, create a new folder that you will name "Divi-child."
- Move the 3 files to this new folder.
- If necessary, compress the folder of your child theme to obtain a.zip folder (right-click > compress).
6 - Sending the child theme on your hosting
A child theme installs like any other WordPress theme, I already explained it to you how to install the Divi themebut I propose a short summary here:
Option 1: using FilleZilla
Once the directory of your child theme is complete and complete, you will only have to send it to your hosting in the folder: www > wp-content > themes (or public_html > wp-content > themes) using Filezilla.
Warning: this method requires the sending of the folder NOT ZIPPED!
Once your folder is on your server, you can activate it from the WordPress back office in the Appearance > Theme tab. Be careful not to delete the parent theme.
In this child theme folder, you can add as many modified files as necessary, this step is optional and can be done later.
Option 2: directly from WordPress
There is an easier way to send your child theme folder to your server: you can do this directly from the administration of your WordPress site as follows:
Go to the tab Appearance > Theme > Add > Put a theme online > Browse then choose the child theme for Divi you just created.
Be careful, this is the.zip file you need to send. The one that was compressed.
Once imported, enable it without deleting the parent theme.
When you need to add files to this child theme, you will need to use FTP (the Filezilla method).
And that's it, it took you 10 minutes to create your child theme for Divi. Was it difficult?
Now, you will be able to start on a good basis and thus customize your website or blog. You have the cards in your hands, all you have to do is follow the other tutorials available on my "Customize Divide" section. This should grow considerably in the coming weeks/months, so don't hesitate to subscribe in order to be kept informed of what's new on the blog.