Where To Add Custom Code In Divi (CSS, Javascript & PHP)

In this handy guide you will learn exactly where to add custom code like CSS, Javascrip, Jquery, and PHP in your Divi Theme.

Are you wondering where to put those awesome code snippets in Divi? A lot of my tutorials give away a free snippet of CSS, Javascript, Jquery, or PHP. I have found myself repeatedly explaining where to put each snippet, so I thought it would be good to have one centralized article to reference. This guide will help you know where to add custom code in Divi, and I'll also show you the CSS hierarchy as well.

CSS Hierachy (Specificity) In Divi
Before we dive in, let's talk quickly about CSS hierarchy, otherswise know and specificity.

Basically, if you target something with CSS, and there are two or more conflicting CSS rules somewhere on the website that point to the same element, the CSS in certain locations will override the others. It has more power the higher up in hierarchy it is. The browser would get confused otherwise, and needs to follows some rules to determine which one is most specific and therefore which one wins out.

The level of specificity depends where the code is placed in Divi. It would not be very helpful to show you where to add custom code in Divi without showing you why. Here's a list of the CSS hierarchy in Divi, with 1 having the most power and 8 the least:

1. Inline Styles
2. Advanced Tab
3. Code Module
4. Page Settings
5. Theme Options
6. Child Theme
7. Theme Customizer
8. Divi Parent Theme

If your head is spinning in confusion, don't worry. It will make more sense as we go and as you gain hands-on experience, and you will soon understand clearly what each of these are and when to use them.

#1. Inline Styles
Code Languages: CSS, HTML
Inline styles are those that are written directly in the html structure of the page or post. Inline styles have the most importance in code. However, even though these are the most powerful, they should be used only for small, simple changes.

#2. Advanced Tab
Code Languages: CSS
Another form of inline styles, although not as obvious as "inline", is in the Advance tab of any section, row, column, or module. Each have different boxes, and some have quite a lot which are very helpful.

#3. Code Module
Code Languages: CSS, HTML, Javascript
Another option for adding CSS and Javascript is the Divi Code Module., which is perfect for integrating code such as iframes, embed codes, shortcodes, and more.

#4. Page Settings Custom CSS
Code Languages: CSS
My favorite places to add temporary custom code is the in the page settings Advanced tab Custom CSS area. It creates "live view" of the code as you work and edit. Just remember this is temporary, and you should copy and paste this code into your child theme stylesheet or Theme Options custom CSS box when you are done.

#5. Theme Options
Code Languages: CSS, Javascript
The next place to add custom code that affects the entire site at once is the Divi Theme Options. There are several places to add code here at different places.

Custom CSS
You probably have noticed by now that almost every tutorial I write, I mentioned adding the code snippets to the Divi Theme Options Custom CSS box. I say this because it is the easiest and most practical place to add custom CSS, especially for beginners who may not have a Divi child theme.

Javascript (And Jquery)
There's also a handy place in the Theme Options for other types of code, and that is in the Integrations tab. Here you can add code that affects the head or body of the site, similar to a child theme or parent theme. This first box is the perfect place to add all the Javascript and Jquery snippets we give out.

#6. Child Theme
Code Languages: CSS, Javascript, PHP
If you have a child theme installed and active, then I actually recommend putting it there instead. This is the ultimate place to add any time of custom code in Divi.

Custom CSS

Custom PHP

#7. Theme Customizer
Code Languages: CSS
You can also add custom css to the Theme Customizer. You can access this either from Appearance Customize in the backed, or from hovering over yoru website name in the top left corner on the frontend.

#8. Divi Theme
Code Languages: Pretty Much Anything
Last on the list is Divi. This is the worst place to add any kind of custom CSS. Don't do it. If you did, it would be erased and overwritten as soon as Divi has an update. As far as hierarchy goes, this is the weakest place to add custom CSS.

[videodavideo]

One of the better 'css in divi' vids I've found. I'd really like to see- and have yet to find any articles, posts, vids on it- is an even deeper dive into the core functionality of how divi processes, aggregates, and outputs builder & custom css.. Even more so now with the recent dynamic/critical css features added. Including topics like.. Divi's class naming conventions & hierarchy.. where x css is output vs where set.. And related to the theme options/performance|builder settings.. Tips on where to put what to minimize unstyled flash and CLS. And so on.

I tend to do alot of custom css various places and forget where I put it.. I'll often add a fake rule like '.find_me_at_x' at the start of custom css to point me there.
Rant- I wish Divi had an 'advanced mode' that enabled things like, showing 'all' the default style values of builder UI elements, and/or displayed the actual css being generated in real time while tweaking style controls, in a floating panel. How useful that'd be!

[dieterkaps]

Wow - that was exactly what I was looking for for a long time. Great work! Thank You!

[victoralvarez]

thanks dude, it's just what I was looking for c:

[sonareclipse]

These videos are SO helpful! If using Theme Options (inc CSS selectors on Advanced tabs), will that code be preserved if DIVI is updated?

[percyrobles]

Hi Nelson, where would be the best place to insert schema markup per page? then a code module is the best place for this. however if I need to insert an ahreflang attribute where would I best do this. sorry if this question is completely outside of your video and doesn't fit into it.

[avviano]

I was hoping some mention of code pen and how to integrate those into Divi. Especially more complex ones. Maybe a good topic for a future tutorial?

[TamerZiady]

Great tutorial. Thank you for sharing. In trying to use specificity; is there a way to add code just to a specific Divi Theme Builder Template? Trying to add WooCommerce Flex Slider to specific posts?

[micheleriley]

Can you help, I have the Divi theme on Wordpress. I am supposed to place the JavaScript on the php footer however when I test the link it’s gives a failed installation. Thanks In advance.😀

[skeptimedia]

Hello Nelson, I am facing some issues.
1st. when I put the code in style.css it's is not working. I am using your child theme.
2nd. When I put the css code which you have provided here, in [built-in CSS editor] one desktop and mobile view hover over text looks center but on tab view it is on left and appear very small. Help please. thanks

[tomkasparoff]

Amazing video. But I have a question. I have “boot strap” script, which allows to embed the widget in a existing website as “pop over”. So I added the script "onclick button". But the code does not run in DIVI. Is it possible to solve this problem?

[blackarchiteck]

Great stuff, and thank you I appreciate you explain it and why. Best video yet!!

[MyGodTube]

What do you think about using "Code Snippets" plugin in order to place php code and avoiding the child theme?

[lenshiker]

howdy! i wanna put a script from paypal smart button into my divi site. when i use the code module the smart button is not shown. if you got any idea please reply. thank you!

[iMakeMemes]

it takes forever to save the JS, i don't know whats the problem, it dont wanna be saved

[saveoursundarban]

Please change the title and remove php . Don't confuse people as there is no info about php . you have just talked about css