Child themes are a really useful way to customise the code within a main theme. If you’re not certain what a child theme is you should visit our guide by clicking here. In a nutshell, every time you upgrade your main theme (in this case Divi) any custom code that you have added to any files will be removed. This is not ideal if you have spent a while customising the php within any functions files or played around with the style.css file. This is where a child theme comes in. It works by pulling all of the main themes contents into another folder which remains separate, meaning all of your custom code remains in tact when you update. Note: If you decide to purchase through any of the links on this page, we may earn some pocket money.
Download our FREE Divi child theme for use in your websites
We’ve created an example child theme that anyone can use by completing the form below to download. In this case, all we have done is amended some of the footer information to automatically display your website design credit. Please bear in mind that this overrides the built in footer functionality in the Divi theme customiser. This can be really useful for adding additional information that won’t work properly by adding it to the Divi theme customiser. For example you may be developing an e-commerce website and would like to use the footer bottom bar to display the payments that the organisation accepts, see below for an example:
To do this we’ve simply copied the html code for the card images from the text editor in WordPress into the footer.php in line 46 between the p tags. We’ve added a note within the footer.php file to explain this in more detail.
Installing the FREE Divi child theme
Once you have downloaded the zip file you will need to unzip it. You will find this creates a folder with a few files in it. You will need to copy and paste this folder into your wp-content > themes folder either by uploading it through your websites cpanel file manager, using an ftp client or if you are developing locally (without hosting/offline) by moving it into your htdocs folder.
Once you have done this you should see the main Divi theme folder within “themes” as well as this child theme. Once you have moved/uploaded/copied this folder into the right directory (wp-content > themes) you can go back to your WordPress dashboard and click on Appearance > themes. You will see the default WordPress themes such as Twenty Seventeen, the main Divi theme that you will have installed before and also the child theme that you just uploaded. Clicking “Activate” on your Divi child theme will enable it on your website and you are ready to start updating the design or amending the theme files.
Using the FREE Divi child theme
The beauty of using a child theme is you can easily add more files that you wish to customise or amend into the Child theme folder. As it stands at the moment, the downloadable Divi child theme will import a the styles.css file, the footer.php file and the functions.php file from your main Divi theme. You can use these to add custom css code, amend the footer content of your website and add custom functions. The Child theme will pull the code from each of these files from the main theme and then run the custom code from the Child theme.
If you are looking to amend other files from your Divi theme it is really simple to enable the child theme to do the same with these files. For instance, if you are looking to amend the 404 page of the Divi theme, all you would need to do is find the respective file that handles this function (in this case it is 404.php), copy that file making sure it is named the exactly the same and then put the copied file in the same place it was found in the main theme but in the child theme folder. In this example 404.php exists in the main folder (wp-content > themes) so it is an easy one to copy over.
In some cases you’ll find that the file that handles the function that you want to amend is found in wp-content > themes > SOME FOLDER (e.g. wp-content > themes > includes > navigation.php). In this case what you’d have to do is create an “includes” folder within your child theme and then copy the navigation.php file into that. You must make sure that the folder structure within the child theme is identical to that of the main theme for it to work correctly.
Once you have copied the file over you can open it up and customise the code to your hearts content. The child theme will pull over all of the code from the main folder and then run your customised code afterwards.
Liam is a website designer and digital marketer based in Leeds, West Yorkshire. He spent a decade working within the charity sector before moving into the marketing space a number of years ago. Liam always strives to do something slightly different with every project and always designs to deliver results, not just pretty websites.