Divi theme is the most powerful WordPress theme in the world. It has tons of design options and provides hundreds of free layouts. You can design your website to be exactly as you like. Still, every now and then, you will need to add custom code to your WordPress website to fix a bug or add a missing functionality.
In this tutorial, you will learn how to add custom CSS, Javascript, jQuery & PHP to your Divi theme.
Add Custom CSS to Divi Theme
CSS is the language that styles your website, it is the language of colors, backgrounds and cool effects. Adding CSS to Divi theme is really easy. You have 3 options for adding custom CSS to your website:
1- Under Divi Options page
If you go to your admin dashboard → Divi → Theme Options, scroll down. At the very end, Divi has this “Custom CSS” area. Here, you can add your custom CSS. Any code you add here will affect the entire front-end just like the theme’s own style.css file.
Important: the code you add here is attached to the active theme, what does this mean?
If you are using Divi Theme itself ( NO child theme ), the custom CSS will be attached to it. So, if you switch to a child theme for Divi, all your custom CSS will not work.
If you decided to switch child themes, make sure you backup your custom CSS.
2- Use The Code Module
Divi has a lot of modules, one of them is the Code module. This module can be placed on any post or page and it accepts HTML, CSS and Javascript.
NOTE 1: the custom code here is page-specific. If you add it to a page, it will only affect this page which is great in a lot of cases. There is no need to load your custom code on all pages if you only need it on one page.
NOTE 2: before you add CSS to the code module, you must wrap the CSS with the <style> tag. So, your code should look like this
<style>
/* Your custom Code Here */
</style>
3- Add Custom CSS Using a Child Theme
Child themes allow you to change small aspects of your website’s appearance while preserving the look and functionality of the website. A child theme inherits its functionality from the parent theme ( Divi ) but gives you a place to host any custom code you have.
I have written a post about child themes and whether you need one or not, you can check it here.
Every child theme has a style.css file. You can add any custom CSS to this file as you like.
Using a child theme for CSS is better than the above methods because the child theme’s style file loads faster than other methods. This is the way I recommend.
Add Custom JavaScript & jQuery to Divi Theme
Like CSS, there are many ways to add custom Javascript and jQuery code to your Divi theme let’s explore all of them.
1- Under Divi Options Page
Go to your admin dashboard → Divi → Theme Options → Integration tab.
There are 4 places you can use to add custom javascript and jQuery here but only 2 of them that you will need; the “Add code to the < head > of your blog” option and the “Add code to the < body >” option.
Adding code to these areas will work on all pages. I recommend adding your code to the second one ( Add code to the < body > ) because this makes it faster to load your pages in the front-end.
Important: before you add javascript or jQuery to these areas, make sure you wrap them with the < script > tag if it doesn’t have it already like this:
<script>
// custom javascript & jQuery code here
</script>
2- Use the Code Module
Like CSS, you can also use the code module to add custom javascript and jQuery to the Divi theme. The code you add here will only work on the page with the code module, so it is not added to all pages like method one.
And you also must wrap your code with the < script > tag like this:
<script>
// custom javascript & jQuery code here
</script>
3- Add Custom JS & jQuery Using a Child Theme
If you didn’t already, make sure you download our free blank child theme from here. This child theme has a file that will accept javascript and jQuery code, you can find the file under the theme’s main folder -> main.js.
You will notice that the file already has a js wrapper and all you have to do it to add your custom code inside this wrapper.
Add Custom PHP to Divi Theme
Adding custom PHP code to your WordPress website is a bit trickier. You should know what you are doing or you will break your website.
There are 2 main methods to add custom PHP to Divi theme.
1- Add Custom PHP Using a Child Theme
Every child theme has a file called functions.php in the main folder of the theme. This is the place to add your custom PHP.
The file usually starts with some code to load the theme’s style and javascript files, after that, you can add your custom code.
Read Our Guide About Child Themes and Download One For FREE.
To add the code to the functions.php file, make sure to add the code at the very end of the file ( before ?> if you have any ).
2- Add PHP Code Using A Plugin
“Code Snippets” is a free plugin that I absolutely love and I use almost every day. It allows you to use your familiar WordPress back-end to add code snippets just like adding posts and pages!
It has a lot of features that make adding custom PHP code a breeze. Some of the features are:
- Each snippet can have a title.
- You can activate or deactivate code snippets with a click of a button.
- You can set the code to work on the front-end only or the back-end or both.
- You can set tags for snippets for better organization.
- You don’t have to edit any files or do anything scary that may break your website.
This is the option I recommend if you don’t want to play with files and also if you have a lot of code snippets and you want to make them organized.
Download a Free Divi Child Theme For Custom Code
If you like this post, please, share it. If you have any questions, leave a comment below.
“the featured image: Freepik.com”
thanks, was looking the same things..