48

I just want to ask on how to print script 'javascript' at the footer using simple plugin. I'm using WordPress 3.0 any ideas?

Mikael Dúi Bolinder
  • 2,080
  • 2
  • 19
  • 44
Trez
  • 1,140
  • 5
  • 16
  • 23
  • You can also get that same performance gain by adding a `defer` tag to your scripts - see https://matthewhorne.me/defer-async-wordpress-scripts/ – diachedelic Aug 25 '17 at 04:04

5 Answers5

109

Use a functions.php file inside your theme template add this :

<?php

function add_this_script_footer(){ ?>

[YOUR JS CODE HERE]

<?php } 

add_action('wp_footer', 'add_this_script_footer'); ?>
starball
  • 20,030
  • 7
  • 43
  • 238
Nypam
  • 1,458
  • 3
  • 11
  • 25
  • 11
    Sweet. Thanks. Additionally, though, if you want to make sure it loads after another script, (ie, JQuery) you can add a priority like so: `add_action('wp_footer', 'add_this_script_footer', 20);` – Eric G Jun 15 '12 at 20:44
  • To include js code in admin footer, 'admin_footer' action can be used. – sudip Aug 04 '13 at 13:25
  • 1
    Thanks @EricG for the 3rd parameter. – roshan Dec 27 '15 at 11:32
  • 1
    I think it's important mentioning that – Gustavo Straube Aug 14 '17 at 11:03
  • 1
    While this process is one that works, it's not the correct way to do it. Scripts should be added using the `wp_enqueue_scripts` action which has an argument to indicate whether to load in the header or footer (see other example). – butlerblog May 06 '18 at 17:47
39

For an external javascript file to be linked in the footer, use this (>= WP2.8)

function my_javascripts() {
    wp_enqueue_script( 'the-script-handle', 
                       'path/to/file.js', 
                       array( 'jquery','other_script_that_we_depend_on' ), 
                       'scriptversion eg. 1.0', 
                       true);
}
add_action( 'wp_enqueue_scripts', 'my_javascripts' );

That last true means that the script should be put at the wp_footer() hook.

windyjonas
  • 2,272
  • 17
  • 19
11

Hum may be it's too late to answer, but if anyone else comes here with the same problem :

There is a plugin to do this : http://wordpress.org/extend/plugins/footer-javascript/

Or you can doing this manually by adding this short code in your functions.php :

/**
 * Automatically move JavaScript code to page footer, speeding up page loading time.
 */
remove_action('wp_head', 'wp_print_scripts');
remove_action('wp_head', 'wp_print_head_scripts', 9);
remove_action('wp_head', 'wp_enqueue_scripts', 1);
add_action('wp_footer', 'wp_print_scripts', 5);
add_action('wp_footer', 'wp_enqueue_scripts', 5);
add_action('wp_footer', 'wp_print_head_scripts', 5);
Slapandthink
  • 135
  • 1
  • 2
4

Use a functions.php file inside your theme (or child theme if exists) template add this:

function add_this_script_footer() { 
?>
<script>
`enter code here`
</script>
<?php } 
add_action('wp_footer', 'add_this_script_footer');
kapaweb
  • 41
  • 1
0

Simply

  1. Upload your javascript file as a media, (the same way you will upload images and videos)
  2. Get the link to the file, (it will look something like this http://your-domain.com/wp-content/uploads/2021/11/index.js or different depending on the site settings you have.
  3. At the bottom of your wordpress page, add a Custom HTML link block and type <script src="/wp-content/uploads/2021/11/index.js"></script>. Do not include the http://your-domain.com.
  4. If you are adding more custom HTML code, make sure to add the script at the end of your html code.

And there you have it.

Engineersticity
  • 351
  • 2
  • 5