I'm playing around with JavaScript at the moment in Wordpress since it is where we develop at work. (I'm an intern).
I have a list of JavaScript code that works in the script tag in the footer, but when i make a JS file and include that in the functions.php file, it does not run.
I have tested with an alert and a console.log and the file is running as it should, it is just the code that i have from before that does not run.
My code is this:
const nav = document.querySelector('#main');
let topOfNav = nav.offsetTop;
function fixNav() {
if (window.scrollY >= topOfNav) {
document.body.style.paddingTop = nav.offsetHeight + 'px';
document.body.classList.add('fixed-nav');
} else {
document.body.classList.remove('fixed-nav');
document.body.style.paddingTop = 0;
}
}
window.addEventListener('scroll', fixNav);
const slider = document.querySelector('.items');
let isDown = false;
let startX;
let scrollLeft;
slider.addEventListener('mousedown', (e) => {
isDown = true;
slider.classList.add('active');
startX = e.pageX - slider.offsetLeft;
scrollLeft = slider.scrollLeft;
});
slider.addEventListener('mouseleave', () => {
isDown = false;
slider.classList.remove('active');
});
slider.addEventListener('mouseup', () => {
isDown = false;
slider.classList.remove('active');
});
slider.addEventListener('mousemove', (e) => {
if (!isDown) return; // stop the fn from running
e.preventDefault();
const x = e.pageX - slider.offsetLeft;
const walk = (x - startX) * 3;
slider.scrollLeft = scrollLeft - walk;
});
And the code in functions.php is this:
`wp_enqueue_script('custom', get_template_directory_uri() . '/js/custom.js')`;
The JS file is loading and running, it is just the code that only works in a script tag in footer, but not in a custom file.
Anyone that can guide me in the right direction. Not the answer, but just some hints so that i can try and learn for myself :)
Thanks alot.
You can do this
<?php
// wp_enqueue_script('handle', 'src', 'deps', 'ver', 'in_footer'); ?>
wp_register_script('custom_script', get_template_directory_uri() . '/js/custom.js', array('jquery'), '1.0.0', true);
wp_enqueue_script('custom_script');
?>
call wp_footer(); function in their footer just above the closing </body>
tag.
For you
<?php
if (function_exists('load_scripts')) {
function load_scripts() {
wp_register_script('custom_script', get_template_directory_uri() . '/js/custom.js', array('jquery'), '1.0.0', true);
wp_enqueue_script('custom_script');
}
}
add_action('init', 'load_scripts');
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.