How does WordPress insert javascript files?

You probably think in a WordPress’ php file it will echo a <script src='xxx'> in order to load a javascript file to the generated HTML, like

<?php

....

echo "<script src='jsfiletoload.js'></script>";

....

?>

Unfortunately, things are not so simple. WordPress have a global object $wp_scripts to manage all javascript files. All js files are registered in $wp_scripts(i.e., stored in $wp_scripts->register[] with names called handles as the key). The global object is newed when calling wp_enqueue_script() at the first time(wp_enqueue_script( 'common' ) in wp-admin/admin.php if you access the admin panel), and a bunch of default js files are registered in the constructor. Every time you call wp_enqueue_script() with a handle, the handle will be added to $wp_scripts->queue[]. Later, when wordpress needs to print the script tag that is used to load those js files indicated with wp_enqueue_scrip, it will construct a string like “load-scripts.php?load%5B%5D=jshandle1,jshandle2,jshandle3” as the src attribute of the <script> tag. jshandle1,jshandle2,jshandle3 are the queued js handles with wp_enqueue_scrip. Now we know wordpress does not put the js file name directly into the src attribute of <script>, but uses a php script load-scripts.php to load all needed js scripts at once. In fact, load-scripts.php simulates a large js file that includes the content of all js files. load-scripts.php also constructs the global object $wp_scripts which registers all js files in the system, but only concatenates and outputs the scripts indicated by the load parameter.

But when does wordpress print the <script> tag? WordPress does some action such as do_action( 'admin_print_scripts' ) in wp-admin\admin-header.php to print the tag. So you can add an action handler to that action.

If you access wp-admin/index.php, WordPress will enqueue the following scripts to output the script tag in <head>:

common
admin-bar
dashboard
customize-load
plugin-install
media-upload
thickbox
utils
svg-painter
wp-auth-check

The actual output of script tag is done in admin-header.php by calling do_action( 'admin_print_scripts' ); A function print_head_scripts is hooked to this action in default-filters.php. print_head_scripts calls the functions in $wp_scripts to prepare the parameter string of loadsripts.php according to what were queued in $wp_scripts, then outputs the script tag by calling _print_scripts().

Then WordPress enqueues the following scripts to output the script tag in footer:

word-count
quicktags
wplink

The actual output of the script tag is done in admin-footer.php by calling do_action( 'admin_print_footer_scripts' ); A function _wp_footer_scripts() is hooked to this action in default-filters.php and called now to output this script tag at the footer part of the page.

To summarize:

All js files that may be used by wordpress are registered with their handles in $wp_scripts in wp_default_scripts(). For example, if you want to use plupload.dev.js, you should add a line in this function:

$scripts->add( 'plupload', '/wp-includes/js/plupload/plupload.dev.js', array('moxie'), $versionofplupload );

The first parameter of add is the handle of this js, the second parameter is the path of the url of the js, the third parameter is the handles of jses the current js is dependent on, the last parameter is the version of plupload. Since plupload depends on moxie, you should add moxie before that line:

$scripts->add( 'moxie', '/wp-includes/js/plupload/moxie.js', array(),$versionofmoxie );

If a webpage needs the <script> tag to refer to plupload, you should call the following function:

wp_enqueue_script('plupload');

At proper time later, both the plupload and the dependent moxie script will be output. You do not need to call wp_enqueue_script(‘moxie’), which is done automatically since wordpress has known the dependency relationship between the two scripts.

Note that if SCRIPT_DEBUG is defined to be true in wp-config.php, the scripts won’t be concatenated by load-scripts.php(i.e, the webpage outputs the two scripts directly, not <script src=”load-scripts.php?load[]=moxie,plupload”></script>), but would rather be output separately to make debugging easier.

Did you like this?
Tip admin with Cryptocurrency