wp_Footer WordPress Action Hook – Action Reference

WP_FOOTER wordpress action hook facilitate to execute scripts & functions in the last. Add jQuery scripts in wordpress footer action hook & reduce rendering load.

The WordPress action hook wp_footer executes near closing body tag. Usually developers bind their script files to footer hook action. Hook search for wp_footer() function integrated in theme and execute there. Learn how to use wordpress wp_footer action hook with examples.

WP footer is an hook usually helps you to executes Scripts and Styles. Read WordPress scroll to top , uses same footer hook technique to execute bunch of code.

  • Footer hook can call scripts wp_enqueue_scripts  in footer.
  • Footer hook can call you styles and inline JavaScript.
  • Note: All the code will be written in function.php file.

WP_Footer – Hook Syntax:

wp_footer accept no parameters and return nothing. Plugins developers love to you wp_footer hook as it loads in last. You can widely use your function to add anything like, Scripts and Ajax via same function.

function your_function(){
   echo "TwoClock Website";
}

add_action('wp_footer','your_function');

Now the text will print just before </body> tag.


Set Priority to Function:

You can either set the priority the higher the number the lower the priority. Your function will execute in the last most of developer bound js to footer hook.

function priority_function(){
   echo "TwoClock is Great";
}

add_action('wp_footer','priority_function', 99);

Add Scripts via wp_Footer hook:

We will call built-in wordpress jQuery library and our own library by using stylesheet path and point the folder. Below is how to add direct jQuery file to footer.

add_action('wp_footer','call_jQuery');
function call_jQuery(){
   wp_enqueue_script("jquery");

   //you can add your own js file as well
   wp_enqueue_script('my-script', get_stylesheet_directory_uri.'/folder/script.js');
}

Add jQuery Script to Footer:

function add_my_js(){
?>
<script type="text/javascript">
    jQuery(document).ready(function($) {
      alert('jQuery scripts added');
});
</script>   
<?php
}

add_action('wp_footer','add_my_js');

WP_Footer Theme Dependent:

Mostly theme developer use the footer hook to bind they jQuery for animation. As seen theme depends on plugins so it is helpful to override the JS in the last with priority function.

Footer action depends on your theme, mostly theme support wp_footer hook. If your theme has the hook support then it will trigger. If your hook action not working then add support for footer hook.

Add support for footer hook in theme?

Are you a theme developer and want to add support for wp_footer hook then add support for it.

  • Add <?php wp_footer(); ?> before </body> tag in footer.

Leave a Reply

Your email address will not be published. Required fields are marked *