CODEWITHSUNDEEP
javascriptphpwordpressgsap
Mr.Smithyyy
Mr.Smithyyy

Reputation: 1329

Trouble loading scripts in Wordpress child theme

I am trying to develop my first Wordpress Theme and I'm having trouble loading a couple of javascript files inside my child theme's functions.php file. I must be missing something as my script isn't running but I'm fairly positive my syntax is correct.

Here is the code I have added to my functions.php file in my child theme. It loads a javascript animation library and then my custom script, none of which rely on jQuery.

add_action('wp_enqueue_scripts', 'custom_theme_scripts');

function custom_theme_scripts() {
    wp_register_script('GSAP','http://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenLite.min.js', true);
    wp_register_script('Animations', get_stylesheet_directory_uri() . '/animation.js', true);

    wp_enqueue_script('GSAP');
    wp_enqueue_script('Animations');
}

This is my custom script targeting a .svg element on the page with an id of "logo"

window.onload = function() {

    var logo = document.getElementById("logo");
    TweenLite.to(logo, 1.5, { width:5000 });

};

Upvotes: 1

Views: 1329

Answers (1)

Yared Rodriguez
Yared Rodriguez

Reputation: 141

I copied and pasted your code in one of my child themes, including your javascript code and all runs with no problem.

Be sure when you create child themes for your own WordPress themes that you make the correct setup:

  1. style.css: Check it contains the correct header, which basically includes the tilte line with the directory name of the parent theme.
  2. functions.php: When you include your child theme you have to add the registration of the parent style.css in the functions.php of the child theme. In other words, before activating your child theme, be sure you include this when you register scripts:

. 

wp_register_style( 'childstyle', get_stylesheet_directory_uri() . '/style.css'  );
wp_enqueue_style( 'childstyle' );

Beside that if everything is setup properly it should load your scripts. Check the resources that have been loaded through the development tools you have in your browser. Or try to load any other javascript line to check the script is running.

That script you posted works if the rest of the theme setup has been done properly. I cannot tell more than that, I hope it helps

Upvotes: 1

Related Questions