We all know that when we're add a script or style to WordPress, we should use wp_enqueue_script( $handle, $src, $deps, $ver, $in_footer ) and wp_enqueue_style( $handle, $src, $deps, $ver, $media ) as in:

<br />
function themeslug_enqueue_style() {<br />
wp_enqueue_style( 'core', 'style.css', array('twentytwelve-style') );<br />
<p>function themeslug_enqueue_script() {<br />
wp_enqueue_script( 'my-js', 'filename.js', array('jquery') );<br />
<p>add_action( 'wp_enqueue_scripts', 'themeslug_enqueue_style' );<br />
add_action( 'wp_enqueue_scripts', 'themeslug_enqueue_script' )<br />

$deps (dependencies), the handle name and an optional parameter, lets you control when/where your script or style should be added. If $deps is array('jquery'), your script will be loaded after jquery is loaded.

The problem is, which one exists and in which order are they loaded ?

I've written an add-on to Debug Bar that list the loaded scripts and styles, it's available at:


Script and styles loaded on the front-end: Go to the front-end, and on the admin bar choose Debug and view Script & Style Dependencies

Back-end: Do the same, on the admin bar choose Debug and view Script & Style Dependencies

Note, the front-end and back-end loads different scripts and styles. Also, different pages on the front-end and back-end can load different scripts and styles.

1.0.3 Fixed bug
1.0.2 Added styling
1.0.1 Bugfix, fixed listing of styles and their dependencies
1.0 Initial release