Tip: This is a bit technical. It describes how to modify the Divi JavaScript transition and animation effects and keep them safe in your child theme. No version update worries!
If you are not familiar with coding, invite a geek friend to read along with you.
We’ll talk a bit about how Divi Javascript usage is set up in a fresh installation. Then we’ll set up your child theme with the ability to modify that JavaScript. Last, we’ll go over an example of how to modify Divi’s Toggle and Accordion modules to get rid of the transition effects time when they are opened and closed.
Divi JavaScript Out of the Box
Like most WordPress themes, Divi isn’t really set up to allow you to modify its custom.js JavaScript file. In fact, this is core WordPress procedure. However, that file handles all things animation and transition in Divi. Like sliders, carousels, button animations, tabs, toggles, accordions, and anything else that is not “static.”
Let’s see how it is set up. In Divi’s functions.php there are a set of lines that first enqueue the custom JavaScript file so that WordPress can use it when needed. In this case, it is on line 123:
wp_enqueue_script( 'divi-custom-script', $template_dir . '/js/custom.js', array( 'jquery' ), $theme_version, true );
That right there gives us a clue that modifying the JavaScript is a supposed No-No. We know this because it is looking for the template directory (the parent theme).
Thankfully, it also shows us that we can cancel that enqueue, and add an action hook that allows us to specify our own Divi JavaScript. One of the great things about WordPress!
The next thing functions.php does is localize the script. All together, it looks something like this in your code editor:
Default Divi JavaScript
Now that we know all that, how can we set it up in our child theme?
Setting Divi JavaScript Up in Your Child Theme
Tip: If you haven’t already set up a child theme, head over to the Codex to learn how to do that. Highly recommended! ;-)
First you need to make sure you have a functions.php in your child theme root folder. Not a copy of the original, just a file with the same name.
Second, you need to actually copy the /wp-content/themes/Divi/js/custom.js file (the whole thing) into your child theme’s area with the same folder structure. Like this: /wp-content/themes/Divi-child/js/custom.js
Now we’ll add the following lines to your child’s function.php:
/* Remove Divi's parent custom.js and use child custom.js */
function custom_child_script ()
{
wp_dequeue_script( 'divi-custom-script' );
wp_deregister_script( 'divi-custom-script' );
wp_enqueue_script( 'divi-custom-script-child', '/wp-content/themes/Divi-child/js/custom.js', array( 'jquery' ), $theme_version, true );
wp_localize_script( 'divi-custom-script-child', 'et_custom', array(
'ajaxurl' => admin_url( 'admin-ajax.php' ),
'images_uri' => get_template_directory_uri() . '/images',
'et_load_nonce' => wp_create_nonce( 'et_load_nonce' ),
'subscription_failed' => __( 'Please, check the fields below to make sure you entered the correct information.', 'Divi' ),
'fill' => esc_html__( 'Fill', 'Divi' ),
'field' [...]
The post Custom Divi JavaScript in a Child Theme appeared first on WinkPress.
