How to add JavaScript & jQuery code to Divi Theme

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

21 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

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