Debug enqueued Scripts and Styles in WordPress

WordPress can easily manage scripts and style sheets, a prerequisite is the use of the opportunities around wp_enqueue_script() and wp_enqueue_style(). A small function can help and returns the built-in scripts and styles.

Some Background

Scripts and style sheets can be introduced into WordPress in different ways, which applies to the backend and frontend. The classical methods of a meta element in the head or footer area is not recommended, because WordPress can do the management of scripts and style sheets since version 2.1 – a prerequisite is the use of the opportunities around wp_enqueue_script() and wp_enqueue_style(). Thus, various advantages are taken over directly by the WordPress core, compressing and delivering joint in one file all the scripts and style sheets. Also WordPress cares about that each script exists only once in the delivery, so there is no multiple use of jQuery for example.
Currently, there are similar approaches with different JS solutions. WordPress can take care of it and deliver optimized, each script only once and easily via the ID on the scripts.

But in order to evaluate your included scripts and style sheets, you can use the following solution where you already have all the included files in a list. The following function simply puts the addresses in the footer of WordPress, frontend – wp_footer and backend – admin_footer, this can be adjusted via hook, of course. This is only an idea.

In the following is the function which will be output via hook in backend and frontend. Parallel I’ve integrated it in the Plugin Debug Objects and the new version should go online around Christmas.

add_action('wp_footer', 'fb_urls_of_enqueued_stuff');
add_action('admin_footer', 'fb_urls_of_enqueued_stuff');
function fb_urls_of_enqueued_stuff( $handles = array() ) {
	global $wp_scripts, $wp_styles;
	// scripts
	foreach ( $wp_scripts -> registered as $registered )
		$script_urls[ $registered -> handle ] = $registered -> src;
	// styles
	foreach ( $wp_styles -> registered as $registered )
		$style_urls[ $registered -> handle ] = $registered -> src;
	// if empty
	if ( empty( $handles ) ) {
		$handles = array_merge( $wp_scripts -> queue, $wp_styles -> queue );
		array_values( $handles );
	// output of values
	$output = '';
	foreach ( $handles as $handle ) {
		if ( ! empty( $script_urls[ $handle ] ) )
			$output .= $script_urls[ $handle ] . '
'; if ( ! empty( $style_urls[ $handle ] ) ) $output .= $style_urls[ $handle ] . '
'; } echo $output; }





One response to “Debug enqueued Scripts and Styles in WordPress”

  1. […] WP-Engineer ist mir auch nach dem dritten Lesen der Inhalt des Artikels nicht klar geworden. Er hat irgendwas mit der Ausgabe von Stylesheets und möglicherweise einem […]