-1

I created a small custom script that fixes a sidebar at different point depending on if there is a banner. I used enqueue script in my child functions file and then a custom.js file with my javascript. See below:

function.php (In Child Theme Folder)

function custom_scripts() {

wp_register_script( 'custom-script', get_stylesheet_directory_uri() . '/custom.js', array() , false, true );

wp_enqueue_script( 'custom-script' );

}

add_action( 'wp_enqueue_scripts', 'custom_scripts', 99 );

custom.js (In Child Theme Folder)

$(function() {
var div = $(".sidebar-wrapper");
$(window).scroll(function() {    
    var scroll = $(window).scrollTop();

    if ($(".sidebar-wrapper").closest(".mk-main-wrapper").length  && scroll > 147) {
        div.addClass("fixed-product-nav");
    } else if (scroll > 263) {
        div.addClass("fixed-product-nav");
    } else {
        div.removeClass("fixed-product-nav");
    }
});
});

Like I said, this worked perfectly, but now my WP theme (Jupiter), has done an update that now uses require.js and they have told me WordPress enqueue script will no longer work. Is that true or do I just need to use a different way to load the script?

Since this is custom work, the theme support will not help.

When I look at the page source code, I can see that the custom.js is loaded on the page so that made me think something was wrong with the script, but it used to work perfectly and the HTML structure of the page has not changed.

So I guess the real question is how do I get my custom.js to load and work like it did, but with require.js?

The site is in development mode so I'm sorry but I cannot share a public link.

Any help is greatly appreciated.

1

If the script is there it should work. It's probably failing because you're not declaring the jquery dependency and you're not wrapping it correctly (in no conflict mode). Here's how your script should be enqueued:

function custom_scripts() { 
    wp_enqueue_script( 'unique-custom-script', 
        get_stylesheet_directory_uri() . '/custom.js', 
        array('jquery') , 
        false, 
        true 
    );
}
add_action( 'wp_enqueue_scripts', 'custom_scripts', 99 );

And your custom.js:

jQuery(document).ready(function($) {
    $(window).scroll(function() {
        var div = $(".sidebar-wrapper");
        var scroll = $(window).scrollTop();
        if (div.closest(".mk-main-wrapper").length  && scroll > 147) {
            div.addClass("fixed-product-nav");
        } else if (scroll > 263) {
            div.addClass("fixed-product-nav");
        } else {
            div.removeClass("fixed-product-nav");
        }
    });
});

I changed the registering name of your script to unique-custom-script to reduce the risk of name collisions.

When WP is told to register a script under the same name from two different sources, it will look at the version numbers and load the highest. Your version number is set to false, so in your example, if any other theme or plugin registered a script under the name of custom-script WordPress would have made sure to load the other script where you were trying to load yours, provided that the other script had a declared version of 0.0.1 or higher.

Update:

If your theme provides a means register a scripts in footer, just add the contents of custom.js and delete the part from functions.php. It might work.

  • Thanks for the reply, I'll give it try here in a few. I see you have add_action( 'wp_enqueue_scripts', 'custom_scripts', 99 );. Shouldn't it be add_action( 'wp_enqueue_scripts', 'unique-custom-script', 99 );? Thanks again! – cody Feb 3 '15 at 22:46
  • Oh that's the function name. Am I mistaken? – cody Feb 3 '15 at 22:47
  • That's the function name, Cody. It tells WP: when you enqueue scripts run function custom_scripts() with a priority of 99. Default is 10. So this function is probably run after most, if not all scripts have been enqueued already. By the way, in case I haven't made it clear: you should replace your existing code with this one, not add them up. You can't have two functions with same name in php, unless they're in different scopes or classes. – Andrei Gheorghiu Feb 3 '15 at 22:50
  • I just made the change but it still didn't do the trick. It still says the script is loaded on the page (<script type='text/javascript' src='/wp-content/themes/jupiter-ChartLogic/custom.js?ver=4.1'></script>) but it's just not working, which is so weird because it worked perfect before. – cody Feb 3 '15 at 23:52
  • Either the selectors in your script no longer match existing elements in your page or jQuery doesn't load for some reason (unlikely). I'm afraid I need to see the actual page to provide further help. – Andrei Gheorghiu Feb 4 '15 at 0:02

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.