How to Add JavaScript and jQuery to Divi

How to Add JavaScript and jQuery to Divi
Divi is a fantastic, versatile and robust theme framework for WordPress. While ‘out-of-the-box’, Divi provides an excellent website building solution, there may be some instances when users would like to add a little extra to their site.

In the following post, we share three different ways you can add JavaScript or jQuery to your Divi website.

How to add Javascript and jQuery to Divi

Three ways you can add JavaScript or jQuery to a Divi website are:

  1. Use the code module
  2. Use the Divi Theme Options console
  3. Enqueue scripts using the functions.php file

If you would rather use a plugin, read our post which details the best plugins for adding CSS and Javascript to Divi. If you need a walkthrough on the process of adding plugins to Divi, read this tutorial.

1. Adding Javascript and jQuery to Divi using the Code Module

One of the most underrated modules in the Divi Builder, the code module, allows you to add a code snippet to your Divi site in a matter of seconds. Incredibly handy, the code module lets you add lines of static HTML, iframes, or third-party plugin shortcodes to a page, post, or project layout. It’s also great for adding snippets of Javascript and jQuery code.

The code module is a great solution for those seeking to add custom code to run on one single page or post. If you want to run code throughout your entire site, it is better to add code using the Divi Theme Options console.

To use the code module, simply open the Divi Builder on any page or post layout. Once you have added the rows and sections, click Insert Module and search for the code module.

  • Google+
  • Facebook
  • Twitter

The Code module automatically displays a ‘Text’ content entry area. Here, you can paste in the Javascript or jQuery code.

Note: The Code module does not automatically add in script tags (required for Javascript and jQuery code). Be sure to manually enter the opening and closing script tags.

For example, if your code is the following:

jQuery(function($){

    alert('test');

});

You will need to enter

<script>

jQuery(function($){

    alert('hello');

});

</script>
  • Google+
  • Facebook
  • Twitter

Learn more about the Divi code module and how you can use it by reading the Elegant Theme code module documentation here.

2. Adding Javascript and jQuery to Divi using Divi Theme Options

Using the code module is great for adding a few snippets of code to run on a single page or post on your website, but if you want your code to run site-wide, it’s better to enter your JavaScript or jQuery into the Divi Theme Options console.

In static HTML website builds, script code would be added to your collection of site files (typically a folder labelled ‘js’) and then referenced accordingly in the head of your website. As WordPress is a CMS, adding this code is a bit less straightforward. Thankfully, Elegant Themes created an easy way for Divi users to add script code to their sites. 

To begin, navigate to Divi Theme Options and click on the Integration tab. First, find the “Enable header code” toggle and make sure it is enabled.

  • Google+
  • Facebook
  • Twitter

Next, scroll down until you see “Add code to the < head > of your blog”. Here, paste in the relevant Javascript or jQuery code and click Save Changes. This is a simple method for adding integration for Google Analytics and the Facebook pixel, for example.

You can also use this method to reference script libraries. For this, you’ll need to create a folder in your child theme to store your script files. ‘Js’ is a common name. The path would look something like https://example.com/wp-content/themes/divichildtheme/js. If you’re still developing your site and working offline in a localhost, creating the ‘js’ folder is quick and easy. If you’re working on a live site, you’ll need to access your server either by logging in with an FTP client or by navigating to the child theme folder in cPanel’s File Manager. Once you have created the ‘js’ folder, you can add in any script files you want to use, for example, javascript-file1.js .

To reference this file, navigate to Divi Theme Options > Integrations tab and return to the ‘Add code to the < head > of your blog’ text area. Here, paste in the path to the relevant external script file that you’d like to run.

Remember to include opening and closing script tags!

 

<script src="https://example.com/wp-content/themes/divichildtheme/js/javascript-file1.js"></script>
  • Google+
  • Facebook
  • Twitter

3. Adding Javascript and jQuery to Divi using the functions.php File

Ensure that the code is updated to match your file names and paths. Click Save Changes and your script code will run. 
The final method for adding Javascript or jQuery code to a Divi website is by using the fiunctions.php file. 

The functions.php file is used to extend the functionality of the WordPress CMS as it allows for the addition of custom code. In order to use the functions.php code and add custom functions to your Divi site, you’ll need to have a Divi child theme set up. If you’re not sure what a Divi child theme is, read more about them here and when you’re ready, use the Divi Space Divi child theme generator.

Once your child theme is set up and you’ve created a functions.php file, you can begin prepping your Divi site for its script code. You’ll need to follow the same steps outlined above, of creating a folder (‘js’) in the child theme folder and add the relevant script files in,  for example javascript-file2.js .

Once the files have been added, return to the functions.php file and paste in the following code: 

function mycustomscript_enqueue() { 

wp_enqueue_script( 'custom-scripts', get_stylesheet_directory_uri() . '/js/javascript-file2.js' ); 

} 



add_action( 'wp_enqueue_scripts', 'mycustomscript_enqueue' );

Ensure that the code is updated to match your file names. 

Transforming Divi with CSS & jQuery Course

JavaScript is one of the core elements of a website. This makes learning JavaScript one of the most important things you can do as a web designer. With CSS and jQuery knowledge you will be able to land better clients, charge higher fees and grow your WordPress or Divi business with confidence and ease. If you’d like to improve your web development skills and learn from the best in the business, read more about our popular online course Transforming Divi with CSS and jQuery, included with our Lifetime Membership.

  • Google+
  • Facebook
  • Twitter

There you have it: three different methods of adding JavaScript and jQuery to your WordPress website. 

If you would prefer to use a plugin, check out our blog post that shares the best plugins for adding CSS and JavaScript to Divi. Alternately, head straight to our online store and check out our plugin Custom CSS and JavaScript Developer Edition.

Lisa-Robyn Keown

Lisa-Robyn is a qualified copywriter and brand strategist from Cape Town, South Africa.

Don't Miss The Sale and Chance to Win a Lifetime Membership!

(Over $4000 Value)

Fill the form below. We will send you details on how to win a Lifetime Membership! Good luck and have fun! 

You will also get notified right when the sale goes live! 

Great you've entered our giveaway! Please check your email!