Shuffle.js with custom post archive

Hi @solerous

I’m not sure, how you enqueued the script. But here is a little description on how to enqueue the javascript files.

function wpdocs_theme_name_scripts() {
    wp_enqueue_script( 'script-name', get_template_directory_uri() . '/js/shuffle.js', array('jquery'), '1.0.0', true );
}
add_action( 'wp_enqueue_scripts', 'wpdocs_theme_name_scripts' );
script-name being the handle of your script;
add jquery as a dependency;
add true to add the script in the footer which is the most effective way.

The you can call the library function of shuffle.js to initiate it from your another custom js file enqueued right below shuffle.js enqueue script.

Let me know if this works. Would be delighted to get your feedback.
Thank you.

Thanks, that worked. However, when I try to initialize the script, I get an error.


<script>
$(function() {
var $grid = $('#grid'),
$sizer = $grid.find('.shuffle__sizer');
});
</script>


The errors I get are:

TypeError: $ is not a function. (In ‘$(function() {
var $grid = $(‘#grid’),
$sizer = $grid.find(‘.shuffle__sizer’);
})’, ‘$’ is undefined)

and

TypeError: $ is not a function. (In ‘$(document)’, ‘$’ is undefined)

So it doesn’t seem to be loading jquery properly.

Hmm…when I add jquery before the script using just standard html:


<script type="text/javascript" src="<?php echo get_stylesheet_directory_uri(); ?>/js/jquery-1.11.0.min.js">


it seems to work!

<script type="text/javascript" src="<?php echo get_stylesheet_directory_uri(); ?>/js/jquery-1.11.0.min.js"> is not a best practice.
To enqueue jquery, WordPress provides default handle to enqueue it into your site. You can find default jquery handle here.

You just need to add wp_enqueu_script('jquery'); at the beginning of you wp_enqueue_scripts hook function.
And to trigger your shuffle.js library, you need to do that by creating a custom.js file and enqueue it at the bottom of your wp_enqueue_scripts hook function. In this file, you need to initiate your script as

jQuery(document).ready(function(){
    //include your library callback function here without $.
});

Replace $ with jQuery in your function. I hope you’ll see the magic happening. ??

Thank you.

I’ve been using:

jQuery(document).ready(function($){

        if($("#merchant_id_missing").length){

with good success to allow the use of $. Is this OK to continue using this method ?

Yes mr. @wpstoneblue, the way you initiated to use $ in jQuery(document).ready(function($){ is perfect.
And allowing the use of $ is not wrong and is completely OK.

Thank you. Regards.