Today's article is a full guide about Divi custom code.
Even though the Divi theme comes with dozens of cool features you can add and customize but like any other theme on the market, there is some limitation of what you can do using the built-in settings.
At some point in time, you might need to add custom PHP, CSS, or JS code snippets in order to fix a bug, create a new feature that doesn't exist in the default settings or even implement some custom customizations your own website or blog to make it look the way you want or a client's website if you're a web designer building websites for others.
In this article, we'll learn where to add custom codes as well as a FREE Divi Child theme ready to use. Sounds good?
Let's stop talking and jump straight in to it!
Contents
Divi Custom Code (Full Guide)
Here we are in the practical part of this free step-by-step guide, we're going to dive into the various methods to add CSS, JS, and PHP custom codes to your Divi Website.
Before we start, here's a basic Divi child theme that you can download for FREE by clicking the button below.
Add Custom CSS to Divi Theme
To control the things like elements added with custom HTML, add cool hover animation effects, or even customize the background, font, and color of an existent element you will need some CSS basics that you can learn on the internet.
Then, you can start adding customizations yourself, or if you found a code somewhere and you want to just add it and get the task done. Here are the methods you can use!
Method 1 : From the Divi theme options
The first option is to add the CSS snippet is by pasting it in the custom CSS box built in the Divi theme options.
To do so, login to your WordPress dashboard and Go to Divi > Theme options
Under the “General” tab scroll all the way to the bottom and you'll find the custom CSS box (as shown below). Any line of code added in this area will affect the whole website just like you pasted it in the style.css file.
The most important point I would like to mention here is that if you're not using a child theme all the CSS you'll add in this box will be applied to the parent Divi theme which is not recommended at all.
if you have read some of my articles where I make changes to the theme you'll absolutely notice that I keep saying that you should have a child theme installed before doing any changes. if this is your first time customizing the Divi theme you might be wondering why?
Here is why!
when you add the customization to the active theme this means that the core files are being affected which also means that your customizations will be erased whenever a new version of Divi is released and you want to update yours to the latest.
Therefore, make sure that you use a child theme instead, it will absolutely save you a lot of headaches later on.
Method 2 : Inside Divi builder
The second method to add custom CSS is inside the Divi builder and this would even if you're using Divi builder along with another WordPress theme.
The difference between this method and the previous one is that the code you'll add will only affect the page you're editing instead of the entire website which is handy in most cases especially if you're trying to have changes applied to a specific area on your website.
To begin implementing this method go to the target page click “Edit with Divi” once the Divi builder opens add in a row and search for the code module.
Now a new window pops up which contains the settings of the Divi code module and you'll use the code box under the “content” tab to add the CSS customizations. (just as seen below)
Method 3 : Adding CSS to the Divi Child theme
The third method is the most used and the one that I personally prefer for two main reasons:
- It's the safest way so I won't have to worry about my custom customizations being erased after the update because the update affects only the core files of your parent theme which is in our case the Divi theme.
- It helps the page load faster compared to the other ways we mentioned above which are awesome for me because I do care a lot about the performance of the website and the user experience.
So go ahead create a child theme, activated it, and then add all the styles inside the style.css file. you can actually edit the style.css file by going to appearance > theme editor > style.css. However, I do recommend that you make the edits using any code editor you want such as Brackets, Sublime Text, or even the notepad++ would do the job.
When you finish, make sure you click save then upload it via FTP.
Add Custom JavaScript & jQuery Scripts to Divi Theme
Similar to adding the CSS. There are several ways to add your custom JavaScript and jQuery code to the Divi theme and here are 3 methods you can use.
Method 1 : From the Divi theme options
Here are the steps to add custom javascript and jQuery codes to Divi theme using theme options:
1 – From the left-hand side of your WordPress dashboard navigate to Divi > Theme options
2 – Under the “Integration” tab make sure the “Enable header code” option is turned on. then you add your custom JavaScript or jQuery codes and same as CSS we need to wrap the lines of code inside the <script> tag (as shown in the screenshot below)
When you finish always click the “save changes” button located at the top left or in the very bottom left corner of the theme options panel.
The code you'll add will be added to all pages of your site. We do have another place to add the custom code which is the <body> area. I usually use it because it makes the website loads a lot faster than having it in the <head> area.
Method 2 : In the Divi builder
The second option for adding JavaScript and jQuery codes is to use the Divi builder code module. so you navigate to the page you want to add the script for. Click “Edit with Divi” then inside the page builder add in the code module, paste your code in the box, and finally wrap it inside the <script> tag.
One thing to keep in mind is that the script you add using the code module will only be added and affect the particular page you're editing.
Method 3 : Add JavaScript & jQuery to Divi Child theme
The easiest option and the one I prefer is to group all the custom scripts I added to the theme in one place as it helps to stay organized.
If you have downloaded the child theme we have provided in the beginner of this article, there is a “scripts.js” file in the main child theme folder, you can start pasting the codes in the formula I have already written for you.
Add Custom PHP code to Divi Theme
WordPress content management system is build using PHP so if you already have knowledge about PHP or by learning it there's no limitation of what you could do, you can any feature or functionality you want to your website.
But, at the same time, it's not recommended at all to start pasting whatever code you find on the internet because it might cause errors or even break your website. so be careful!
Method 2 : Manually add Custom PHP to Divi Child theme
To add custom PHP we'll use a file called functions.php which is located in the main child theme directory, it comes with some pre-written code that loads the JavaScript and CSS file so make sure to paste your code right after the codes you find there and (before the ending PHP tag).
Fortunately, you won't have to worry about that because I have everything set up and ready for you and even specified exactly where to add your custom code.
Method 1 : Using a WordPress plugin
If for some reason you don't like adding custom codes manually, we have got a solution for you that is to use a plugin to do that for you and you'll be adding custom codes right from your WordPress dashboard.
The plugin I do use and recommend is code snippets, it makes adding custom codes and organizing them a piece of cake. the plugin is FREE and you can add it like any WordPress plugin from your dashboard or download it from the WordPress directory.
Further Reading:
- How to Hide Divi Menu On WordPress (All Options)
- How to Hide & Remove Divi Header
- Divi Google Analytics Set Up Guide (2 Easy Ways)
- How to Edit Divi Theme Footer [Easy Guide]
Roundup
Learning and having the basics of adding Divi custom code is a must!
If you're a web designer working on client's websites then mastering how to add custom CSS, JS, and PHP codes will give your design a boost and you won't find it hard to customize literally any element anywhere on your website.
If you have already learned PHP then you'll go even further and add custom functionalities or create fully customized and unique child themes that will suit every client.
That's it for our Divi custom code tutorial, I hope it was helpful for you, if you still have any questions or want to share your thoughts feel free to drop them in a comment below. Otherwise, stay awesome!
Cheers!
