There are several ways to add JavaScript (or jQuery – basically just of JavaScript with some additional features) code to the Divi Theme. One of the easiest ways is via the Divi Theme Options area.
Adding JavaScript / jQuery via the Divi Theme Options
If you go to the "Divi > Theme Options > Integration" tab from your WordPress Dashboard, you'll see the following:
You can use the "Add code to the < head > of your blog" box to add JavaScript / jQuery:
This box is actually for entering HTML code, but you can tell it you want to add JavaScript or jQuery code by surrounding your code in <script> and </script> tags.
For example, if you have the following code:
jQuery(function($){
alert('hello');
});<script>
jQuery(function($){
alert('hello');
});
</script>
Then just save the options and your code should run when you view / preview your site. In this example, the code will just pop up a message saying "hello" whenever someone loads a page on your site. If you'd like to try a more useful example, please see this post on how to Make the Divi accordions closed by default.
As always, you're a genius. Thanks for your contributions to the Divi world!
Ha ha! You're very welcome, Nate! :)
Hello!
I have a doubt.
Can I create a section in the divi and then (just below) insert a js effect into a code module in the divi?
Or will I have to copy the html from that section and add it to the divi code module?
Thanks!
Hi Alessandra! It's certainly possible to have a section and then have a js effect for that section in a code module below. The js code would of course need to reference the section somehow, e.g. by using the section's CSS ID. If you have problems getting the code to work, feel free to share a link to the page (either here or via the contact form) and I'll see if I can help out. Thanks!
I'm using Sabai directory and apparently, there is a known issue with Divi and the directory. Their solution is to change a line within the custom.js file. Would the integration part be a place to change this or do I need to edit the js file as they suggest?
Hi Kimberly, my guess would be that if they require a change to a specific line then it would need to go in the custom.js file as it'll probably be modifying existing code. Are you able to share a link to the solution? Depending on what the change is there might be a way to do it via the integration part (which would be better as it won't be overwritten by updates). Thanks!
Hey – I just used your script fix for this issue in Divi "Extra". It worked great! Thank you for posting it!
Hi, I'm trying to use the following animations: https://www.elegantthemes.com/blog/divi-resources/how-to-create-an-expanding-cta-like-elegant-themes
I use the same plugin divi builder (not theme) and it does not work, why? As I add to the theme divi it works.
Jquery add to module Code and CSS add to next Code module.
Hey Marta, thanks for getting in touch. There are a few differences between Divi and the Divi Builder plugin that might account for it, or it might be a conflict with the theme you're using. The easiest way for me to track it down will be to see what you have in place now, so is there any chance you're able to send me a link to the page you're working on? Thanks!
Hi, I'm trying to use the following animations: http://tobiasahlin.com/moving-letters/ in a text module, on a Divi page. But I don't know how to make it works…
Thank you for your help!
Ale
Hi Ale, I'd do it using the built-in Divi "code" module, rather than the text module. I've put together a quick post with some notes on how to tackle it. If you need any further help with it, let me know!
https://divibooster.com/implementing-tobias-sahlins-moving-letters-text-effects-in-divi/
Sweet & Thanks!
Hello,
Unhappily none of scripts are working for me. I doing everything like the same you said but it's just simply pasting it as a text. Can you make it work for me somehow? Thanks!
Here is it:
http://imgur.com/a/GGcY9
Hi Erik, you seem to be doing everything right, but it looks like something on your site is modifying the code (essentially turning it into non-code). If you haven't already, try the code in the "add code to the body" box instead of the head. If that still doesn't work, I'd try disabling your plugins one at a time to see if one of these is affecting the code. If you're able to pinpoint a plugin that's responsible or just keep having the same problem, let me know. Thanks!
Somehow I am seeing jquery is not defined in browser console, after I added my jquery code to the head box… I also tried implementing a new js file which contains my code and enqueueing it via functions.php of my child theme with dependency of jquery handle. Still seeing the jquery not defined error…
Any help?
Hi Saskia, I'd check a couple of things… first, make sure the references to jQuery are capitalized correctly, i.e. "jQuery" with a capital "Q". Also, can you see if the page is actually including and correctly loading the jQuery library? If not, you'd need to look into why that is (though Divi itself should load it correctly, in the absence of any other errors). Failing all that, any chance you're able to send me a link to the site, or a sample of you code to take a look? Thanks!
this simply doesnt work.
it keeps adding my script into body and keeps it commented out somehow.
search for signup_btn in HTML and you will find the jquery script.
Hi ilija, is this working for you now? When I click the signup button, "done!" gets logged to the console, suggesting the script is running correctly.
Side note: I don't think it matters, but "jQuery(function ($) {…}" and "$( document ).ready(function() {..})" are essentially equivalent, I believe. So you don't actually need both.
Is there a way to embed js code into a post?
Hey Adam, an easy way to do it is using the built-in Divi code module. You can just paste your js into the module's "Content" box, surround it with <script> tags and you should be good to go. The great thing about this is that you can (if you want to) save the module to the Divi library and reuse it on posts as needed.
One thing to be aware of is that the js will be executed as soon as it is encountered on the page (i.e. probably before everything has loaded). If you want to wait until the page has loaded, you may want to wrap your code in the jQuery ready function, as described here:
https://learn.jquery.com/using-jquery-core/document-ready/
Hello
I have tried this and it wont work.
i have divi3
would you have any suggestions?
Hey marie, it should still work in divi3. Any chance you're able to send me a link to the page you're working / let me know what code you're trying to add? Cheers!
Nice, can you give us an example of the JS Jquery that can be done on this area?
Thanks.
I've just updated the post to give an example. Hope it helps.
Hi,
Can you give an example of some usage of this? Thank you for your time, I appreciate it!
-John
Hi John, I've just updated the post with an example. Cheers!