By Saif Bechan


2011-11-06 10:30:44 8 Comments

I know I can add a script file to the footer of wordpress that requires jquery using this code:

<?php
function my_scripts_method() {
   // register your script location, dependencies and version
   wp_register_script('custom_script',
       get_template_directory_uri() . '/js/custom_script.js',
       array('jquery'),
       '1.0',
       true);
   // enqueue the script
   wp_enqueue_script('custom_script');
}
add_action('wp_enqueue_scripts', 'my_scripts_method');
?>

But what if I want to add just a normal snippet of jquery inline, not a file. How can this be done.

Edit

I know I can use this script to add something to the footer:

<?php
function myscript() {
?>
<script type="text/javascript">
 // This depends on jquery
</script>
<?php
}
add_action('wp_footer', 'myscript');

But how do I specify the script that is used requires jquery to run.

5 comments

@Walf 2018-07-25 09:56:07

I know OP wants to specify a requirement on jQuery, and WordPress' authors should have allowed snippets to be enqueued adjacent to script files, but they didn't, so I recommend not trying to force it. If you don't want to mess with the queue or its order at all, like me (because I'm using other plugins that combine and optimise scripts), then the answer really is to use the wp_footer action like so:

<?php

add_action(
    'wp_footer'
    , function() {
        ?>
        <script>
            if (window.jQuery) {
                // your snippet
            }
        </script>
        <?php
    }
    , 21 # after enqueued footer scripts
);

@Dhinju Divakaran 2016-06-25 06:44:41

Since wordpress 4.5 you can add inline script by wp_add_inline_script(). To add a javascript snippet to the footer that requires jQuery, this code helps you

function enqueue_jquery_in_footer( &$scripts ) {

    if ( ! is_admin() )
        $scripts->add_data( 'jquery', 'group', 1 );
}
add_action( 'wp_default_scripts', 'enqueue_jquery_in_footer' );

function theme_prefix_enqueue_script() {
   if(!wp_script_is('jquery', 'done')) {
     wp_enqueue_script('jquery');
   }
   wp_add_inline_script( 'jquery-migrate', 'jQuery(document).ready(function(){});' );
}
add_action( 'wp_enqueue_scripts', 'theme_prefix_enqueue_script' );

wp_add_inline_script with wordpress jquery

@EAMann 2011-11-06 17:22:45

The easiest way to do this is actually a combination of wp_enqueue_script and the footer actions that Saif and v0idless already referenced. I frequently use jQuery in my themes and plugins, but I put all of the other scripts in the footer as well.

The best way to actually queue things up would be this:

function myscript() {
?>
<script type="text/javascript">
  if ( undefined !== window.jQuery ) {
    // script dependent on jQuery
  }
</script>
<?php
}
add_action( 'wp_footer', 'myscript' );

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

But this code snipped assumes that you're the one queueing the script, i.e. you're doing this in your own plugin or theme.

At the moment, there is no way to add an in-line script to the WordPress footer and also load it with dependencies. But there is an alternative, if you're willing.

The alternative

When WordPress works with scripts, it loads them internally to an object to keep track of them. There are essentially 3 lists inside the object:

  • registered
  • queue
  • done
  • to_do

When you first register a script with wp_register_scripts() it's placed in the registered list. When you wp_enqueue_script() the script, it's copied to the queue list. After it's been printed to the page, it's added to the done list.

So, rather than queueing your footer script to require jQuery, you can document that it needs to use jQuery and just check programatically to make sure jQuery is loaded.

This uses wp_script_is() to check where the script is listed.

function myscript() {
    if( wp_script_is( 'jquery', 'done' ) ) {
    ?>
    <script type="text/javascript">
      // script dependent on jQuery
    </script>
    <?php
    }
}
add_action( 'wp_footer', 'myscript' );

You might be able to use this same code to force jQuery to load in the footer as well, but I haven't tested that ... so your mileage my vary.

@laraib 2016-10-19 14:08:49

does your provided code snippet is accepted by WordPress plugin development standards ? If yes, then I will be using it in my plugin ... please give me a reply upon this ...

@EAMann 2016-10-20 04:51:20

The last snippet? No. WordPress plugins should always enqueue script requirements. Forcing jQuery to load outside of the queue system in this way is only something you should do on your own site where you control 100% of the environment. It is never appropriate for a plugin to do that.

@laraib 2016-10-20 05:41:16

then can u give me some working example for that please ... ????

@laraib 2016-10-20 05:42:11

Because I am developing my first ever WordPress plugin and I would love to have that accepted by the WordPress team ... waiting for any of your response please .... have your say about this so that I can create and make accepted my plugin ...

@v0idless 2011-11-06 14:17:10

Use the wp_footer action like this:

add_action( 'wp_footer', 'wpse33008');
function wpse33008() {
?>
<script type="text/javascript">
    /** INSERT SCRIPT HERE **/
</script>
<?php
}

@Saif Bechan 2011-11-06 14:18:34

This is not a good answer. I asked how I could specify the script required jQuery. If the user does not have jquery running your implementation will not run.

@Rutwick Gangurde 2011-11-06 13:30:47

You can use the wp_footer action for doing this. Check the codex for wp_footer.

@Saif Bechan 2011-11-06 14:14:28

I know, but how can you specify that the script you add to the footer is depending on jquery. Check my edit to be more spicific.

@Rutwick Gangurde 2011-11-06 15:42:21

Do you even bother to read around the codex before voting down people's answers? Have you ever read about the in_footer argument to wp_enqueue_script? Read this: codex.wordpress.org/Function_Reference/wp_enqueue_script. It tells you how to use it with the wp_footer action.

Related Questions

Sponsored Content

2 Answered Questions

1 Answered Questions

[SOLVED] Move Jquery.js to Footer

1 Answered Questions

2 Answered Questions

[SOLVED] Call the content of a page in AJAX in Wordpress

  • 2013-03-21 10:51:43
  • Cédric Charles
  • 3608 View
  • 2 Score
  • 2 Answer
  • Tags:   pages jquery ajax

1 Answered Questions

[SOLVED] How to add a dynamic javascript snippet to the footer that requires jQuery

  • 2017-01-29 12:18:10
  • ShahePars
  • 1526 View
  • 1 Score
  • 1 Answer
  • Tags:   php jquery

3 Answered Questions

[SOLVED] Using wp_enqueue_script on scripts that contain PHP

1 Answered Questions

[SOLVED] Loading a script with a dependency, is unloading another script's dependency

  • 2014-11-17 19:08:07
  • helgatheviking
  • 908 View
  • 9 Score
  • 1 Answer
  • Tags:   wp-enqueue-script

1 Answered Questions

1 Answered Questions

2 Answered Questions

[SOLVED] Enqueue jQuery in WordPress

Sponsored Content