How to add JavaScript & jQuery code to Divi Theme

by | Quick Divi Tips | 45 comments

Adding custom scripts to Divi

Let’s say you’ve found a JavaScript (or jQuery, which is the “Write Less, Do More” JavaScript library) code snippet and you’d like to include it in your Divi website. There is a few ways you can go about doing it. One of options would be to use the Code Module.

Option 1 – Code Module

You need to make sure your code is wrapped in <script> </script> tags. Simply paste your code in the Code Module, like this:

This is the code used in the example above:

<script>
jQuery(function($){
alert('Hi! This is working!');
});
</script>

Using Code Module is a good option if you want your code to run only on one specific page. But if you want your code to run on every page, it would be better to add it to the <head> tag of your website via Theme Options.

Option 2 – Divi Theme Options

To add a code to every page navigate to Divi Theme Options > Integration tab.  Make sure the “Enable header code” option is checked, and paste your code below.

You can also place your code in a file with JS extension (e.g. my-scripts.js) and use this method to include it. You would need to login to your WordPress site via FTP or cPanel, whichever method you prefer. If you’re using cPanel, go to File Manager to access your site’s files. Locate your child theme folder and create a js folder in it and upload your file inside of this folder. The url for your file will look something like this: http://yoursite.com/wp-content/themes/yourchildtheme/js/my-scripts.js

To get your site to load external JS file (e.g. your own code or some jQuery plugin) add a code like this with modified url source.

<script src="http://yoursite.com/wp-content/themes/yourchildtheme/js/my-scripts.js"></script>

The last method is a bit more advanced, but it is the approach recommended by WordPress.

Option 3 – Enqueuing scripts via functions.php

With this example I’m assuming you are using a Divi Child Theme and you uploaded your scripts file to “js” folder inside your child theme files. You can add the code below to your functions.php file:

function mycustomscript_enqueue() {
    wp_enqueue_script( 'custom-scripts', get_stylesheet_directory_uri() . '/js/my-scripts.js' );
}
add_action( 'wp_enqueue_scripts', 'mycustomscript_enqueue' );

If your script relies on jQuery library you can modify it like this to make sure jQuery will be loaded as well:

function mycustomscript_enqueue() {
    wp_enqueue_script( 'custom-scripts', get_stylesheet_directory_uri() . '/js/my-scripts.js', array( 'jquery' ));
}
add_action( 'wp_enqueue_scripts', 'mycustomscript_enqueue' );

Just don’t forget to change this code to match your file name.

And that’s it – you’ve successfully loaded custom JavaScript to your divi website 🙂

Have you seen our Divi Child Themes?

We offer a great selection of high-quality designs to speed up your work. Feel free to use a coupon code IREADBLOG at the checkout to get a 10% discount!

45 Comments

  1. Raj

    How can i used MixitUp into Divi theme?

    Reply
    • Ania Romańska

      Your website html structure would need to match this script requirements, so using it in Divi won’t be as easy as simply adding a js file. You’d most likely need to create new template files in your child theme.

      Reply
  2. Philip

    Hi Ania

    I was wondering which FTP client you are using and what code editor you rely on. Using Filezilla in tandem with Code Writer turns out to be quite unpractical in the long run since I have to go through a series of clicks on Filezilla in order to transfer a newly saved CSS-file to the web-server. This click-series is required each time I save a new version of my custom CSS-file. No “just save the CSS-file and refresh the web-page” as you do!

    Can you help on that? I much appreciate your efforts. Thanks!

    Philip

    Reply
    • Ania Romańska

      Hi Philip,
      I’m using a software called Coda (but it’s only for Mac). I think that both Sublime Text and Brackets have an FTP extension as well.

      Reply
  3. JL

    Hello, I am trying to apply the following javascript with divi, http://alvarotrigo.com/multiScroll/

    And I can not, any idea, each frame would obviously have to be editable with the builder.

    Reply
    • Ania Romańska

      Well in order for this to work – your website html structure would need to match this script requirements, so it won’t be as easy as simply adding a js file.

      Reply
  4. Justka

    I need to add this (of course with URL edited) code to the header section:

    I just did it in:

    theme options/integration/Add code to the of your blog

    but it doesnt work…

    Can you help?

    Reply
    • Venkat

      Hi Ania, same issue as Justka here. I’ve added the js file to my folder via cpanel on hostgator and added the right url to the header section http://theworkawayer.com/jsexperiments/demo-2.js
      But no success 🙁
      Any idea what else needs to be done or do you have any article or video that explains this? I’m dying to get the 2nd effect working :'(

      Reply
  5. Richard

    Thank you, Ania, for being a wealth of knowledge and so willing to help others figure this stuff out.

    I followed directions to add FB pixel code to my main site page and completed that with no problems. Now I would like to embed FB pixel code in the of two other pages that perform specific functions but I don’t know where to do that. Please help me accomplish this.

    Thank you.

    Reply
    • Ania Romańska

      Hi Richard,
      The simplest way to add some custom code to one specific page is to use a Code Module.

      Reply
  6. Kritika

    Hi,

    I have done some customizations in the theme. In custom.min.js file. But now I have created child theme and want to reflect those changes to my child theme as I have pending theme update.
    I followed your second option explained above.
    I created a folder name js and uploaded my custom.min.js file there and give its url in head under Integeration.
    Though I have activated child theme, but still when I am updating my parent theme all my changes are reverting back.

    Please tell how can I get my custom.min.js file working from child theme because if I am using your option 3 my website stops working.

    Reply
    • Ania Romańska

      Hi,
      I’m not sure what is the problem here exactly. If you have installed and activated a child theme you should keep all your changes in your child theme files (as any changes made in parent theme files will always revert back after the theme update).

      Reply
  7. Mark Phillips

    Hi Ania,

    Your work is amazing! I have gone thru the necessary steps to make this work and it is almost there!! The first tab comes out a bit funny, and the animation doesn’t work. Do you have any suggestions for me? Thank you much!! Here is my link:

    Best,

    Mark Phillips

    Reply
    • Mark Phillips

      Sorry, my link is in my webpage submitted under my email. Thanks again, appreciate any help here!!

      Reply
    • Ania Romańska

      Hi Mark,

      The animation is set within the standard Blurb module settings, so you should be able to easily check/edit that.

      Reply
      • Mark Phillips

        Ania, thank you very much for responding! Yes, I did the animation in the module setting. For some reason, my first box was showing up off center. It was bumped up into the header area. I adjusted the padding and margins to get the content aligned properly, but it was only in the first tab that it did this. Any ideas why it would move or shift upwards? Appreciate your feedback. Thanks Ania!!

  8. David Pham

    Hello! You have a great guide and design.
    I downloaded your (JSON) file and uploaded to the folder the divi library could not upload. The error message is as follows: “This file should not be imported in this context”

    I’m a bad person in this issue. Can you fix and email me a non-corrupt JSON file?
    Thank you very much!

    Reply
    • Ania Romańska

      The JSON file should be imported directly on the page, not in the Divi Library.

      Reply
  9. Syed Muneeb Ali

    What if I want to do the same but something like when I only “hover” over the menu, I’ll get posts in the similar manner of that category? Please Help :-)

    Reply
  10. Birgit

    Hi,

    Is it also possible to add a header code to a single page?
    And how do I do this?

    Thank you!

    Reply
    • Ray

      I have the same question as BRIGIT.

      I’m adding dynamic content to a page within the website and need to add a div and script. The div is easy enough, but can you add something like:

      to the Code Module?

      I don’t have access to this site yet and was just looking for a heads up 🙂

      Reply
      • Ray

        the script tag was removed – wasn’t thinking lol

        adding a script tag to an external js file

  11. Nicolás

    Hi, I need my audios to last only 20 seconds in the player of my DIVI theme.
    Could you tell me what code to use in the advanced configuration of my modules? I will thank you infinitely …
    The best.

    Reply
  12. René Dorta

    I used your test script in a code module, and it works fine; but I need to invoque a java function not when the page opens, but whe the user push a buttom.
    That is to say, I need to use onclick=”myFunction”

    Reply
  13. Elisandro

    Hi, Ania. Do you know if there is a way we could enable javascript/jQuery on mobile as well?

    Reply
    • Ania Romańska

      I think with most mobile devices it is enabled by default, it would be a user choice to disable/enable it and I don’t think there is a way to force-enable it.

      Reply
  14. Jill Hollister

    Ania- Please disregard my last message. I got it working! THANKS!! 🙂

    Reply
  15. sushil

    Please I’d like to know if it’s possible to force the view on all mobile devices to be similar to the desktop view I know divi is responsive but I’m just wonder if there’s anyway to accomplish this (and if it’s advisable)
    mean to say that you view it on mobile and desktop, it shows the same way
    i just want desktop view in mobile

    Reply
    • Ania Romańska

      Hi, no – I don’t think it is advisable. Technically it would be possible with quite a lot CSS edits (to main content, sections and columns) for mobile breakpoints.

      Reply
  16. Emily

    Hi Ania, thanks for your post. I’m trying to work out if the Code module can be used to include a Mapbox Studio GL map on a Divi post. I’ve copied header text from a Mapbox example to my site, and script from one of their examples (with my Mapbox access token and style). But to no effect. I’m dabbling in things I have limited understanding of, but any suggestions much appreciated! Tks Emily

    Reply
    • Ania Romańska

      Hi Emily,
      I’ve never used Mapbox, but from what I see on their page is that you have some scripts that need to go to the < head > of your page – this would be Theme Options / Integration Tab, and the code they give you to place in your < body > would go to the Code Module. Hope this helps 🙂

      Reply
  17. Col

    Cant get it to work

    Reply
    • Ania Romańska

      I’m sorry to hear that, I hope you’ll be able to resolve it. If you’d share your website url and some information on what exactly are you doing I might be of more help..

      Reply
      • Colin

        brilliant working fine now it was me

  18. Saundra

    Hi Ania,

    Your article was very helpful but I have a question about the js folder. I was sent a folder with an html, js, and images folder. I created a child theme for Divi. Should I be putting the divi parent folder or in our child theme? Example theme/child/js or theme/divi/js. Also I was wondering if the raw html, js, and image folder should be placed in the root of the theme as opposed to a js folder. Thanks for your help in advance!

    Reply
    • Ania Romańska

      Hi Saundra,

      Very sorry for the late reply…
      I’m afraid it is a little bit more complex. If you have a js folder and images folder and a full html document – it won’t be that easy to add to your Divi site. The html should go to Code Module (but only the content part of html file, not the full html page), the images can go either to Media library or to the Child Theme files, but the paths to images would need to be changed (in every file they may appear – html code, css or js).

      Reply
  19. AnhJ

    Hi, I have custom .js files in theme\divi\js. I modify these files and upload to godaddy webserver, but old version of these files keeps loading. I clear browser cache, disable cache, clear localstorage … i even call godaddy tech support to disable cdn cache, but it still loading the old files until the next day (i found the refeshing pattern… but still not sure about it). I even turn of wp super cache. Please let me know if you have experience on this matter. Thanks a lot. Anh

    Reply
  20. Sebastian

    Thanks for this tutorial. Many greetings from Poland.
    Seba

    Reply
    • Ania

      Cieszę się, że się przydał 🙂 Pozdrowienia

      Reply
  21. Kerrin

    Great tutorial, thank you. Very easy to follow and it was exactly what I was looking for. Divi rocks!

    Reply
    • Ania

      Thank you Kerrin, I’m glad you’ve found it useful.

      Reply

Trackbacks/Pingbacks

  1. Creating Custom Tabs With Icons Using Blurbs ~ Divi Lover - […] you are not sure where to put that jQuery code – I have written some detailed instructions on how…

Submit a Comment

Your email address will not be published. Required fields are marked *


Sign up to our newsletter!


Shares

Sign up for the good stuff!

Free Resources for Divi Lovers!

Join our Newsletter!

We'll provide you with updates on new tutorials, webdesign assets and special offers. Get top quality Divi goodies straight into your inbox! Read our Privacy Policy to learn how we manage and protect your submitted information.

Pin It on Pinterest