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 🙂
'WEB > WP(WordPress)' 카테고리의 다른 글
| The Divi Button Module (0) | 2019.05.22 |
|---|---|
| MangBoard (0) | 2019.05.22 |
| mysql UPDATE 이용시에 쌍따옴표 검색가능할까요? (0) | 2019.05.20 |
| What is the ideal image size for Divi Websites? (0) | 2019.05.05 |
| 서울시체를 웹폰트로 사용하기 in WP (0) | 2019.05.05 |