The Divi theme by Elegant Themes is one of the most popular WordPress themes for creating stunning and customizable websites. While Divi’s intuitive visual builder offers plenty of built-in features, sometimes you may need to add custom code to achieve a specific design or functionality. But where should you add your custom CSS, JavaScript, or PHP in Divi?
This guide will walk you through the best practices for adding custom code to Divi safely and effectively.
1. Using the Theme Options Panel for Custom CSS
The Divi Theme Options panel is one of the easiest and most straightforward ways to add custom CSS. This option is ideal for site-wide CSS modifications.
Accessing the Theme Options Panel
To add custom CSS in Divi’s Theme Options panel:
- Go to your WordPress dashboard.
- Navigate to Divi > Theme Options.
- Under the Custom CSS box (located in the General tab), paste your CSS code.
This method is perfect for quick tweaks, such as changing the color scheme, adjusting margins, or applying global styles. The Custom CSS box ensures your styles are applied across the entire website without needing external files
2. Adding Custom Code via the Divi Builder
For customizations limited to specific pages or modules, the Divi Builder provides an excellent solution. This method lets you target individual elements without affecting the rest of your website.
Adding Custom CSS to Modules like Section/Row/Module
Each module in the Divi Builder has an “Advanced tab” where you can “add custom CSS” Here’s how:
- Open the module you want to edit.
- Click on the “Advanced tab“.
- Locate the “Custom CSS” section and paste your code into the appropriate box (e.g., Before, Main Element, or After).
This approach is ideal for styling unique modules, such as customizing a button or adjusting a single image gallery.
3. Using a Divi Child Theme for Advanced Customizations
For extensive modifications, especially PHP changes or scripts requiring deep integration, using a child theme is the safest option. A child theme allows you to customize your site while preserving your changes during theme updates.
Custom CSS
Once your site is complete and you’re ready to go live, I recommend transferring all your custom CSS to the style.css file in your Divi child theme. To do this, go to Appearance > Theme Editor, select your child theme from the dropdown menu in the top right corner, then click on “style.css“.
Finally, paste your custom code at the bottom of the file.
Adding Custom Code in a Child Theme
For PHP snippets, edit the “functions.php” file in your child theme. For instance, you can add custom post types or filters. To include CSS or JavaScript, you can create additional files (e.g., custom.css or custom.js) and enqueue them in “functions.php“.
Read More: How to Create a Divi Child Theme
Advantages of Child Themes
Child themes are ideal for developers who need to make substantial changes. They ensure that customizations are protected during updates, providing a stable environment for advanced edits.
4. Page/Post Settings
There may be instances where you just want to implement Custom CSS changes to a single page or post in the Divi Theme rather than the whole site. This tutorial will provide you with a step-by-step process on how to do just that.
Check out: How to add CSS code to a single page or post in Divi?
5. Divi Theme (Theme file editor)
Finally, we have Divi, which is the least option for adding custom CSS. Avoid doing so, as any custom CSS you add will be wiped out and overwritten with every Divi update. In terms of hierarchy, this is the least reliable place to implement custom CSS.
By following best practices and understanding when to use each approach, you’ll create a website that’s not only beautiful but also functional and future-proof.
That’s all for today!
Discover more by supporting me on
