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.
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
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.
1- Under Divi Options Page
Go to your admin dashboard → Divi → Theme Options → Integration tab.
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.
2- Use the Code Module
And you also must wrap your code with the < script > tag like this:
3- Add Custom JS & jQuery Using a Child Theme
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.
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”