Adding a script to Wordpress

Question

I have a simple script that appends a class on scroll depth and would like to use it on my Wordpress site.

How should I go about adding it? I have the class pinpointed and know the CSS side, but I don't know how to get the script to register.

The script is:

$(window).scroll(function() {
  var scroll = $(window).scrollTop();

  if (scroll >= 100) {
    $(".header").addClass("active");
  } else {
    $(".header").removeClass("active");
  }
});

Does this answer your question? Wordpress load CSS In footer — Cadu De Castro Alves
– Cadu De Castro Alves, Commented Feb 25, 2020 at 14:50

Damocles · Accepted Answer · 2020-02-25 15:04:30Z

3

In your (child) theme's functions.php, add the following lines at the end:

function my_enqueue_script()
{
  wp_enqueue_script( 'my_custom_script', get_template_directory_uri() .
    '/js/my_custom_script.js', array('jquery'), '1.0.0', true );
}
add_action( 'wp_enqueue_scripts', 'my_enqueue_script' );

with your script inside the theme's subfolder '/js/my_custom_script.js'. Rename my_custom_script.js to anything you like.

edited Feb 25, 2020 at 15:04

answered Feb 25, 2020 at 14:53

Damocles

1,3271 gold badge8 silver badges9 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Xhynk Over a year ago

When you enqueue assets like this, it's generally preferable to use get_stylesheet_directory_uri(). This will cause it to refer to the currently active theme. Using get_template_directory_uri() will always refer to the Parent theme (which may or may not be the active theme)

Collectives™ on Stack Overflow

Adding a script to Wordpress

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related