Question posted in
The full documentation can be found here.

Divi theme – Calling jQuery from functions.php in WordPress

I want to call a jQuery from my functions.php in WordPress.

I’m using Divi Theme. When I add the script directly into Divi theme it works. But I want to add it to the functions.php form my child theme and this is where the problem start.

Functions.php

function coolbanner_enqueue() {
    wp_enqueue_script( 'custom-scripts', get_stylesheet_directory_uri() . '/js/coolbanner.js', array( 'jquery' ));
}
add_action( 'wp_enqueue_scripts', 'coolbanner_enqueue' );

Script:

jQuery(document).ready(function(){
    jQuery('#cta-section').waypoint(function() {
        jQuery('#cta-section').toggleClass('animate-cta');
    }, {offset: '80%'});
});

Can somebody point out what I’m doing wrong?

Tags:

2

Answers


  1. 0

    Solution:

    function coolbanner_enqueue() {       
    wp_enqueue_script( 'custom-scripts-js', get_stylesheet_directory_uri() . '/js/coolbanner.js', array( 'jquery' ), '1.0', false);
}
add_action( 'wp_enqueue_scripts', 'coolbanner_enqueue' );
    Login or Signup to reply.
  2. 0

    Seems like you’re missing the jQuery Waypoint JS file

    Try enqueueing the jquery waypoint js file BEFORE using your custom script

    function coolbanner_enqueue() {
    wp_enqueue_script( 'jquery-waypoint', 'https://cdnjs.cloudflare.com/ajax/libs/waypoints/4.0.1/jquery.waypoints.min.js', [ 'jquery' ] );
    wp_enqueue_script( 'custom-scripts', get_stylesheet_directory_uri() . '/js/coolbanner.js', array( 'jquery-waypoint' ));
}
add_action( 'wp_enqueue_scripts', 'coolbanner_enqueue' );

    you can find the jquery waypoint github repo here…

    https://github.com/imakewebthings/waypoints

    Additionally the url I used below is from a cdn which you can find here:

    https://cdnjs.com/libraries/waypoints

    if you feel more comfortable using the github’s url

    then just substitute the cdn url with the following…

    https://raw.githubusercontent.com/imakewebthings/waypoints/master/lib/jquery.waypoints.min.js

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search