Call javascript in footer the right way

  • I would like to call the javascript for my theme the right way for WordPress, and call it in my footer, so that I can get rid of the “Eliminate external render-blocking Javascript and CSS in above-the-fold content” Google PageSpeed warning messages about how slow the pages load.

    There is a bit of a description of how to do this by wpgeekster at this page, but I explored the links provided there and they don’t really show how to actually implement this.

    For example, what would I put into my functions.php in order to get them to load in_footer like wpgeekster suggests? I’m hoping for an example of code here, that I could modify and use for my theme.

    Thank you,
    JM

Viewing 10 replies - 1 through 10 (of 10 total)

  • Hello,

    All you need to do is to call the wp_footer hook and add your function which includes the JS.

    <?php
function your_function() {
  ?>
  <script>
    // JS code here
  </script>
  <?php
}
add_action( 'wp_footer', 'your_function', 100 );
?>
    Thread Starter JMunce

    (@jmunce)

    Will this prevent javascript from loading in the header?

    Moderator bcworkz

    (@bcworkz)

    Yeah it will, but Bobby’s suggestion, while it’ll work in many situations, is not the “Right” way as intended by WP core developers. The Right WordPress Way? involves using wp_enqueue_script() with the $in_footer parameter set as true. There’s a few examples on how to use the function in the linked article. Many more can be found through the links in the Resources section.

    Thread Starter JMunce

    (@jmunce)

    Hi bcworkz.

    Thank you, the enqueue and register scripts were what I was thinking would be suggested. There are examples there of use, but unfortunately not an example of how that code looks when you want to load javascript in the footer.

    Moderator bcworkz

    (@bcworkz)

    There is actually, though it doesn’t say so. The first example – “Scripts and styles from a single action hook”, has true as the final $in_footer parameter.

    Note the description above for $in_footer, that the theme must call wp_footer() for this to work. All good themes will do this, some themes are, ummm… not so good ?? The resulting HTML will end up looking like Bobby’s example, but by enqueuing the script, WP will work out any dependencies for you, even over multiple scripts.

    Thread Starter JMunce

    (@jmunce)

    Hi bcworkz,

    In my case it is a theme that is ‘not so good,’ I guess, because I am coding it and learning things like this as I progress. Yes, I read somewhere that it must call wp_footer and then include all the other calls in the parenthesis?

    Thread Starter JMunce

    (@jmunce)

    Hi bcworkz,

    In my case it is a theme that is ‘not so good,’ I guess, because I am coding it and learning things like this as I progress. Yes, I read somewhere that it must call wp_footer and then include all the other calls in the parenthesis?

    Moderator bcworkz

    (@bcworkz)

    Yes, then no. Just call wp_footer(); with no parameters. WP will add your enqueued script as an action which fires when wp_footer() is executed in your theme’s template.

    Incidentally, themes should call wp_head() for similar reasons. Have you seen the Theme Developer Handbook? It’s a work in progress, but there’s still lots of good information.
    https://developer.www.ads-software.com/themes/getting-started/

    Thread Starter JMunce

    (@jmunce)

    Ok, I appreciate the information, but I’m still back to my original problem, which is I don’t know how to use this information when it comes to actually putting it in as code on my functions.php and on my page template.

    Would it be possible to see an example of working code? From there, I would have a basis for understanding all the other points.

    Moderator bcworkz

    (@bcworkz)

    Here is a working header.php template

    <!DOCTYPE html>
<html <?php language_attributes(); ?> class="no-js">
<head>
	<meta charset="<?php bloginfo( 'charset' ); ?>">
	<meta name="viewport" content="width=device-width">
	<link rel="profile" href="https://gmpg.org/xfn/11">
	<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>

    and the footer.php

    <?php wp_footer(); ?>
</body>
</html>

    and functions.php

    <?php
add_action('wp_enqueue_scripts', 'gs_enqueue_pages', 99);
function gs_enqueue_pages() {
   $object = get_queried_object();
   // only enqueue for dealer-edit
   if ( GS_EDIT_SLUG == $object->post_name ) {
      wp_enqueue_script('gsedit', get_template_directory_uri().'/js/dealeredit.js', array(), null, true);
   }
}

    GS_EDIT_SLUG is defined on a particular custom page template, thus the script is only enqueued on the page for which it is needed.
    define('GS_EDIT_SLUG', 'dealer-edit');

Viewing 10 replies - 1 through 10 (of 10 total)
  • The topic ‘Call javascript in footer the right way’ is closed to new replies.