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.

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.

 

Leave a Reply