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.
Join subscribers on our YouTube channel and enjoy other Divi video tutorials!
Before we dive in, let’s talk quickly about CSS hierarchy, otherwise known as specificity. This term can be confusing, and it’s okay if you don’t understand it quite yet.
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:
Inline Styles
Advanced Tab
Code Module
Page Settings
Theme Options
Child Theme
Theme Customizer
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. For example, in the Text Module, you can change from Visual to Text and see the html of the page. If you have anything styled there, you will see them in the code.
For example, if you highlight a word in Divi and make it bold, it will add <strong> tags around that word. Or if you select a phrase and change the color like this, it will add <span> tags like this: <span style=”color: #e03574;”>change the color like this</span>
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. For example, a row only has three, but a Blurb Module has one for Title, Image, Content areas as well.
Limitations
These are super handy for quick snippets, but are also limited. I often see questions about these in Facebook groups, with users questioning why their code has an error. Usually this is because users are trying to add the full CSS snippets with the classes instead of just the values. You can only add values like “color: red;” but you couldn’t say “.custom-class { color: red; }. (This makes more sense in the video, so be sure to watch that.)
#3. Code Module
Code Languages: CSS, HTML, Javascript
Another option for adding CSS and Javascript is the Divi Code Module. For CSS, make sure to wrap the code in <style></style> tabs, and for Javascript, make sure to wrap the code in <script></script> tags.
The Code Module is perfect for integrating code such as iframes, embed codes, shortcodes, and more. For example, one of our most popular tutorials on how to embed a Google map in Divi uses this. You could also use this to keep code on a specific section or layout that you save to the Divi Library or exprot to another website.
#4. Page Settings Custom CSS
Code Languages: CSS
Those that follow my videos on YouTube know that one of my favorite places to add temporary custom code is the in the page settings Advanced tab Custom CSS area. The reason I like this so much is because it creates “live view” of the code as you work and edit. As a tip, I recommend editing your headers or other areas of the site using this. 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 here on the blog.
NOTE: Be sure to remember to wrap the snippets in <script></script> tags. You can also add any sort of <meta> tags here, like tracking codes or Font Awesome scripts.
#6. Child Theme
Code Languages: CSS, Javascript, PHP
I know I said to put custom CSS snippets in the Divi Theme Options, but 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.
A child theme inherits the main functionality from the parent theme (Divi), but adds additional customization. It is very important to use a child theme if you do any custom coding rather than modify Divi itself. To learn more about Divi child themes, see our tutorial and video here.
Custom CSS
I recommend moving all of your custom CSS to the Divi child theme style.css file whenever your site is completed and you are ready to go live. Just go to Appearance>Theme Editor and choose your child theme from the dropdown in the top right corner. Then click on the style.css and paste your code at the bottom.
Custom PHP
Any custom PHP snippets should be placed in the Divi child theme functions.php file. Some of our tutorials have PHP snippets, and this is where you should put it. All you have to do is go to Appearance>Theme Editor and choose your child theme from the dropdown in the top right corner. Then click on the functions.php and paste your code at the bottom.
#7. Theme Customizer
Code Languages: CSS
Even though I never use this and don’t recommend it, I still have to mention it. 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 your website name in the top left corner on the frontend.
Since the CSS hierarchy is lower here than in a child theme, I don’t recommend using this. The only thing this is really good for is making live changes to the site where you want to see the change, and then copying and pasting that code to the Theme Options or child theme (similar to page settings CSS).
#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.
I hope you have enjoyed learning Where To Add Custom Code In Divi (CSS, Javascript & PHP). Please share your thoughts in the comments below. If you find value in this type of post, please subscribe because we have tons of tutorials in progress to be posted!
Subscribe for more stuff like this.
Each month we send out a roundup email newsletter with the latest tutorials, product updates, helpful resources, and any other industry or personal news. Occassionally we send an extra separate email here and there if we just can't wait! So that's what you will get if you subscribe, and you can always unsubscribe at any time if you just can't take it anymore 🙂
Nelson is the owner of Pee-Aye Creative Co in the beautiful state of Pennsylvania. He loves helping small businesses, exploring, building websites with Divi, and teaching others.
When using the integrations tab (#5) for JavaScript or JQuery, make sure Enable Header Code Button is toggled on.
I recently worked on a fresh Divi install and it defaulted to “off”. It took me longer than I’d like to admit to figure out with the JQuery wasn’t doing anything!
Thank you very much for this post/tutorial. I love the “overall theory” – approach. It was very helpful in learning the fundamental. You are great at teaching.
SAMUEL LOPES MACIEL
on February 6, 2021 at 7:19 pm
I love your blog!! Sorry for my english, Im from Brazil. When you said that advanced css tab of the page should be temporally, you mean when this modification affect all pages, right? For example, I did some custom css in post template (in theme builder) and let custom css in advanced tab, because this modifications are useless in other pages. I think that this os better to page load, right?
Hi Samuel,
I mean that it is best to keep code all together in Theme Options or style.css file rather than having code in the page settings. I’m not sure if it affects performance or not.
hi Nelson thanks for this very helpful post (as always)
doing some tests I saw that the css inserted in the part
# 7. Theme customizer, also appears in the CSS box of section # 5. Theme options.
is it possible that they have the same importance? or that they are the same thing?
Good question, but I don’t have a good answer. It’s not very important if one is more important though…(that sounded weird to say) because you should be comparing them to a child theme rather than to each other.
I couldn’t for the life of me find the place where I could change the original colors of my child theme. I am now putting my headlamp on, and going down to explore that rabbit hole.
Thank you so much for such a clear explanation, Nelson.
Each month we send out a roundup email newsletter with the latest tutorials, product updates, helpful resources, and any other industry or personal news. Occassionally we send an extra separate email here and there if we just can't wait! So that's what you will get if you subscribe, and you can always unsubscribe at any time if you just can't take it anymore 🙂
Divi Tutorials On YouTube
Our videos have views! Join subscribers and enjoy over video tutorials!
In this tutorial, I will show you how to create a backup of your Divi website and explain why they are so helpful and important.
Pin It on Pinterest
{"id":null,"mode":"button","open_style":"in_modal","currency_code":"USD","currency_symbol":"$","currency_type":"decimal","blank_flag_url":"https:\/\/www.peeayecreative.com\/wp-content\/plugins\/tip-jar-wp\/\/assets\/images\/flags\/blank.gif","flag_sprite_url":"https:\/\/www.peeayecreative.com\/wp-content\/plugins\/tip-jar-wp\/\/assets\/images\/flags\/flags.png","default_amount":500,"top_media_type":"none","featured_image_url":false,"featured_embed":"","header_media":null,"file_download_attachment_data":null,"recurring_options_enabled":true,"recurring_options":{"never":{"selected":true,"after_output":"One time only"},"weekly":{"selected":false,"after_output":"Every week"},"monthly":{"selected":false,"after_output":"Every month"},"yearly":{"selected":false,"after_output":"Every year"}},"strings":{"current_user_email":"","current_user_name":"","link_text":"Leave a tip","complete_payment_button_error_text":"Check info and try again","payment_verb":"Pay","payment_request_label":"Pee-Aye Creative","form_has_an_error":"Please check and fix the errors above","general_server_error":"Something isn't working right at the moment. Please try again.","form_title":"Pee-Aye Creative","form_subtitle":null,"currency_search_text":"Country or Currency here","other_payment_option":"Other payment option","manage_payments_button_text":"Manage your payments","thank_you_message":"Thank you for being a supporter! It is people like you who keep us going week after week!","payment_confirmation_title":"Pee-Aye Creative","receipt_title":"Your Receipt","print_receipt":"Print Receipt","email_receipt":"Email Receipt","email_receipt_sending":"Sending receipt...","email_receipt_success":"Email receipt successfully sent","email_receipt_failed":"Email receipt failed to send. Please try again.","receipt_payee":"Paid to","receipt_statement_descriptor":"This will show up on your statement as","receipt_date":"Date","receipt_transaction_id":"Transaction ID","receipt_transaction_amount":"Amount","refund_payer":"Refund from","login":"Log in to manage your payments","manage_payments":"Manage Payments","transactions_title":"Your Transactions","transaction_title":"Transaction Receipt","transaction_period":"Plan Period","arrangements_title":"Your Plans","arrangement_title":"Manage Plan","arrangement_details":"Plan Details","arrangement_id_title":"Plan ID","arrangement_payment_method_title":"Payment Method","arrangement_amount_title":"Plan Amount","arrangement_renewal_title":"Next renewal date","arrangement_action_cancel":"Cancel Plan","arrangement_action_cant_cancel":"Cancelling is currently not available.","arrangement_action_cancel_double":"Are you sure you'd like to cancel?","arrangement_cancelling":"Cancelling Plan...","arrangement_cancelled":"Plan Cancelled","arrangement_failed_to_cancel":"Failed to cancel plan","back_to_plans":"\u2190 Back to Plans","update_payment_method_verb":"Update","sca_auth_description":"Your have a pending renewal payment which requires authorization.","sca_auth_verb":"Authorize renewal payment","sca_authing_verb":"Authorizing payment","sca_authed_verb":"Payment successfully authorized!","sca_auth_failed":"Unable to authorize! Please try again.","login_button_text":"Log in","login_form_has_an_error":"Please check and fix the errors above","uppercase_search":"Search","lowercase_search":"search","uppercase_page":"Page","lowercase_page":"page","uppercase_items":"Items","lowercase_items":"items","uppercase_per":"Per","lowercase_per":"per","uppercase_of":"Of","lowercase_of":"of","back":"Back to plans","zip_code_placeholder":"Zip\/Postal Code","download_file_button_text":"Download File","input_field_instructions":{"tip_amount":{"placeholder_text":"How much would you like to tip?","initial":{"instruction_type":"normal","instruction_message":"How much would you like to tip? Choose any currency."},"empty":{"instruction_type":"error","instruction_message":"How much would you like to tip? Choose any currency."},"invalid_curency":{"instruction_type":"error","instruction_message":"Please choose a valid currency."}},"recurring":{"placeholder_text":"Recurring","initial":{"instruction_type":"normal","instruction_message":"How often would you like to give this?"},"success":{"instruction_type":"success","instruction_message":"How often would you like to give this?"},"empty":{"instruction_type":"error","instruction_message":"How often would you like to give this?"}},"name":{"placeholder_text":"Name on Credit Card","initial":{"instruction_type":"normal","instruction_message":"Enter the name on your card."},"success":{"instruction_type":"success","instruction_message":"Enter the name on your card."},"empty":{"instruction_type":"error","instruction_message":"Please enter the name on your card."}},"privacy_policy":{"terms_title":"Terms and conditions","terms_body":null,"terms_show_text":"View Terms","terms_hide_text":"Hide Terms","initial":{"instruction_type":"normal","instruction_message":"I agree to the terms."},"unchecked":{"instruction_type":"error","instruction_message":"Please agree to the terms."},"checked":{"instruction_type":"success","instruction_message":"I agree to the terms."}},"email":{"placeholder_text":"Your email address","initial":{"instruction_type":"normal","instruction_message":"Enter your email address"},"success":{"instruction_type":"success","instruction_message":"Enter your email address"},"blank":{"instruction_type":"error","instruction_message":"Enter your email address"},"not_an_email_address":{"instruction_type":"error","instruction_message":"Make sure you have entered a valid email address"}},"note_with_tip":{"placeholder_text":"Your note here...","initial":{"instruction_type":"normal","instruction_message":"Attach a note to your tip (optional)"},"empty":{"instruction_type":"normal","instruction_message":"Attach a note to your tip (optional)"},"not_empty_initial":{"instruction_type":"normal","instruction_message":"Attach a note to your tip (optional)"},"saving":{"instruction_type":"normal","instruction_message":"Saving note..."},"success":{"instruction_type":"success","instruction_message":"Note successfully saved!"},"error":{"instruction_type":"error","instruction_message":"Unable to save note note at this time. Please try again."}},"email_for_login_code":{"placeholder_text":"Your email address","initial":{"instruction_type":"normal","instruction_message":"Enter your email to log in."},"success":{"instruction_type":"success","instruction_message":"Enter your email to log in."},"blank":{"instruction_type":"error","instruction_message":"Enter your email to log in."},"empty":{"instruction_type":"error","instruction_message":"Enter your email to log in."}},"login_code":{"initial":{"instruction_type":"normal","instruction_message":"Check your email and enter the login code."},"success":{"instruction_type":"success","instruction_message":"Check your email and enter the login code."},"blank":{"instruction_type":"error","instruction_message":"Check your email and enter the login code."},"empty":{"instruction_type":"error","instruction_message":"Check your email and enter the login code."}},"stripe_all_in_one":{"initial":{"instruction_type":"normal","instruction_message":"Enter your credit card details here."},"empty":{"instruction_type":"error","instruction_message":"Enter your credit card details here."},"success":{"instruction_type":"normal","instruction_message":"Enter your credit card details here."},"invalid_number":{"instruction_type":"error","instruction_message":"The card number is not a valid credit card number."},"invalid_expiry_month":{"instruction_type":"error","instruction_message":"The card's expiration month is invalid."},"invalid_expiry_year":{"instruction_type":"error","instruction_message":"The card's expiration year is invalid."},"invalid_cvc":{"instruction_type":"error","instruction_message":"The card's security code is invalid."},"incorrect_number":{"instruction_type":"error","instruction_message":"The card number is incorrect."},"incomplete_number":{"instruction_type":"error","instruction_message":"The card number is incomplete."},"incomplete_cvc":{"instruction_type":"error","instruction_message":"The card's security code is incomplete."},"incomplete_expiry":{"instruction_type":"error","instruction_message":"The card's expiration date is incomplete."},"incomplete_zip":{"instruction_type":"error","instruction_message":"The card's zip code is incomplete."},"expired_card":{"instruction_type":"error","instruction_message":"The card has expired."},"incorrect_cvc":{"instruction_type":"error","instruction_message":"The card's security code is incorrect."},"incorrect_zip":{"instruction_type":"error","instruction_message":"The card's zip code failed validation."},"invalid_expiry_year_past":{"instruction_type":"error","instruction_message":"The card's expiration year is in the past"},"card_declined":{"instruction_type":"error","instruction_message":"The card was declined."},"missing":{"instruction_type":"error","instruction_message":"There is no card on a customer that is being charged."},"processing_error":{"instruction_type":"error","instruction_message":"An error occurred while processing the card."},"invalid_request_error":{"instruction_type":"error","instruction_message":"Unable to process this payment, please try again or use alternative method."},"invalid_sofort_country":{"instruction_type":"error","instruction_message":"The billing country is not accepted by SOFORT. Please try another country."}}}},"fetched_oembed_html":false}
I use https://www.silkypress.com/simple-custom-css-js-pro/ Works very well.
When using the integrations tab (#5) for JavaScript or JQuery, make sure Enable Header Code Button is toggled on.
I recently worked on a fresh Divi install and it defaulted to “off”. It took me longer than I’d like to admit to figure out with the JQuery wasn’t doing anything!
Hi Iain,
Yes, it’s a good point, although by default those are usually all turned on in Divi. 🙂
Again thanks for all the content you share!!!
You’re welcome, Sue! Thanks for your comment!
Thank you very much for this post/tutorial. I love the “overall theory” – approach. It was very helpful in learning the fundamental. You are great at teaching.
Thank you Jacob! I’m glad you enjoy my teaching style! I’m excited to release my CSS course too, which will talk more about this.
I love your blog!! Sorry for my english, Im from Brazil. When you said that advanced css tab of the page should be temporally, you mean when this modification affect all pages, right? For example, I did some custom css in post template (in theme builder) and let custom css in advanced tab, because this modifications are useless in other pages. I think that this os better to page load, right?
Hi Samuel,
I mean that it is best to keep code all together in Theme Options or style.css file rather than having code in the page settings. I’m not sure if it affects performance or not.
Best Regards
Franco
Good question, but I don’t have a good answer. It’s not very important if one is more important though…(that sounded weird to say) because you should be comparing them to a child theme rather than to each other.
OH!
Finally …
…the answer I was looking for!
I couldn’t for the life of me find the place where I could change the original colors of my child theme. I am now putting my headlamp on, and going down to explore that rabbit hole.
Thank you so much for such a clear explanation, Nelson.
Nice, you are welcome! Glad it is helpful!