How to add JS in footer

Question

i added code in my footer.php just before the but the code is not executed. I know it's better to use functions.php but i would like to test like this for the moment... Could someone help me please ? thanks

<script type="text/javascript">
   window.onload = function () {  
        jQuery(document).ready(function(){ console.log('insider');
            var alphabeticallyOrderedDivs = $('.team-member').sort(function(a, b) {     
                return  String.prototype.localeCompare.call($(a).data('lastname').toLowerCase(), 
                $(b).data('lastname').toLowerCase()); 
    });
    var container = $('.ulcontainer');
    container.detach().empty().append(alphabeticallyOrderedDivs);
    $('body').append(container);})
   }(jQuery);

</script>

Answer 1

By Using wp_enqueue_script()

You can add your scripts to a JS file and then enqueue it properly. I assume you have added your scripts to file.js. Here's how you enqueue it in the footer:

add_action('wp_enqueue_scripts','my_script_callback');
function my_script_callback(){
    wp_enqueue_script(
        'my-script',
        get_template_directory_uri().'/folder/file.js',
        array(jquery),
        null,
        true
    );
}

The last argument in wp_enqueue_script() determines whether your script should be enqueued in the footer or not.

The 3rd argument is optional, and is an array of dependencies.

By Using wp_footer()

You can also directly print your scripts in the footer, which is not always the best idea. However, this is how you do it:

function my_script() { ?>
    <script type="text/javascript">
        // Your code here
    </script><?php
}
add_action( 'wp_footer', 'my_script' );

Not that you have to wait for jQuery to be ready in such a method. You can enqueue jQuery if not already enqueue, by using this:

add_action( 'wp_head' , 'enqueue_jquery' )
function enqueue_jquery() {
    wp_enqueue_script( 'jquery' );
}