javascript - How to add JS in footer

admin管理员组

文章数量:1389762

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>

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>

• javascript
• footer

Share Improve this question edited Oct 26, 2017 at 14:55 Johansson 15.4k1111 gold badges4343 silver badges7979 bronze badges asked Oct 26, 2017 at 14:42 PipooPipoo 4911 silver badge55 bronze badges 3

• I think theme you are using enqueue all js in wp_footer hook. Try to add your js After wp_footer and check it. – Darshan Saroya Commented Oct 26, 2017 at 15:34
• sorry but i put direly in footer.php before </body> and jQuery(document).ready(function() is not executed – Pipoo Commented Oct 26, 2017 at 16:26
• here it works without adding JS in settings but when adding jQuery it does not work anymore ...jsfiddle/xo5nopyx – Pipoo Commented Oct 26, 2017 at 16:40

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 5

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' );
}

本文标签： javascriptHow to add JS in footer