How to add JavaScript & jQuery code to Divi Theme

by | Quick Divi Tips | 39 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!

39 Comments

  1. 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
  2. Sebastian

    Thanks for this tutorial. Many greetings from Poland.
    Seba

    Reply
    • Ania

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

      Reply
  3. 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
  4. 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
  5. 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

  6. 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
  7. 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
  8. Jill Hollister

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

    Reply
  9. 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
  10. 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
  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. 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

  13. 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
  14. 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
  15. 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!!

  16. 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
  17. 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
  18. 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
  19. 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

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 *

Shares

Pin It on Pinterest