0
votes

My wordpress site won't load the script into my page. I put the following function in functions.php:

function nav_script () {

    wp_enqueue_script( 'script', get_stylesheet_directory_uri() .'/js/script.js', array('jQuery'), '1.0.0', true);

}

add_action('wp_enqueue_scripts', 'nav_script'); 

and the script containted in the scripts.js is as follows:

$(document).ready(function() {
    var stickyNavTop = $('.blog-nav').offset().top;
                             
        var stickyNav = function(){
        var scrollTop = $(window).scrollTop();
                        
                    if (scrollTop > stickyNavTop) { 
                        $('.blog-nav').addClass('sticky');
                    } 
                    else {
                        $('.blog-nav').removeClass('sticky'); 
                    }
                };
                                 
            stickyNav();
                                 
        $(window).scroll(function() {
            stickyNav();
    });
});

When I view the source code of the page I don't see the script, so it didn't get loaded for some reason... I have the wp_head in the head and the wp_footer before the body ending tag, so I have zero clue of what can be happening, anyone out there can help? The function works in a normal html as I tried in JSFiddle...

Editing... Guys I achieved something by adding the script "manually" to the function, like this:

    function nav_script () {
        ?>
        <script>
            
            $(document).ready(function() {
                                var stickyNavTop = $('.blog-nav').offset().top;
                                 
                                    var stickyNav = function(){
                                    var scrollTop = $(window).scrollTop();
                            
                                    if (scrollTop > stickyNavTop) { 
                                            $('.blog-nav').addClass('sticky');
                                    } else {
                                            $('.blog-nav').removeClass('sticky'); 
                                    }
                                    };
                                     
                                    stickyNav();
                                     
                                    $(window).scroll(function() {
                                        stickyNav();
                                });
                            });
            
        </script>
        <?php
    }

add_action('wp_head', 'nav_script');    

But I've noticed two things: ONE: it won't work if I don't insert the <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> CDN in the head; TWO: It will only work if I reload the website, which is suggesting me some plugin conflict...

2
View the source? Or inspect the DOM? Two very different things! - Niet the Dark Absol
I did right click and view the page source, as you can see here: jsfiddle.net/7undbb8L @NiettheDarkAbsol - Giorgio Vitanza
"Page source" is as received from the server, before any JavaScript is run at all. - Niet the Dark Absol
But if the script was present in the page it should be inside the page source also, right in the head no? - Giorgio Vitanza
Not if it's being dynamically loaded by other things. - Niet the Dark Absol

2 Answers

0
votes

I've fixed my problem. For the first problem, which was that the .js file wasn't loaded in the page as wasn't present in the source, I used a code similar to the one i used before, just simpler, removing the array and the values related to the version and the footer, just like this: function

blognav_script () {
    wp_enqueue_script('blognav', get_stylesheet_directory_uri() . '/js/script.js');
}

add_action('wp_enqueue_scripts', 'blognav_script');

... I can't precisely say why but if you compare my source code with the one I posted on the comments you'll notice the presence of the '/js/script.js'. - page source: https://jsfiddle.net/qx5fbxa7/ -.

Second problem: the script wouldn't load unless I refresh the page (as edited)... I solved with conditional logic setting the condition of having the class:

// function to run on page load and window resize
    function stickyUtility() {

        // only update navOffset if it is not currently using fixed position
        if (!jQuery(".blog-nav").hasClass("fixed")) {
            navOffset = jQuery(".blog-nav").offset().top;
        }

// run on page load
    stickyUtility();

I actually changed the whole script, but as to point out how to solve this problem, this are the lines that will fix it!

-1
votes

WordPress do not recognize $ as short for jQuery just add

var $ = jQuery

on top