Filename cache busting for WordPress styles and scripts

To embed custom CSS styles and scripts in WordPress you should use the wp_enqueue_script(), wp_enqueue_style(), wp_register_script() and/or wp_register_style() functions. Each of these functions allows you to define a version. By default it's the version of WordPress. The version identifier will be in the URL to the script as a query string.

The version identifier is used to expire the URL. Since the browser detects the new URL as a new resource, it will use the new instead of the cached resource.

Sadly not all endpoints respect the query string. From Google Developers:

Most proxies, most notably Squid up through version 3.0, do not cache resources with a "?" in their URL even if a Cache-control: public header is present in the response. To enable proxy caching for these resources, remove query strings from references to static resources, and instead encode the parameters into the file names themselves.

So the goal is to encode the version identifier into the filename without renaming the resource on the filesystem. This is where the following plugin comes in.
Continue reading …

How to disable auto-embeds (oEmbed) in WordPress 3.5

WordPress 3.5 will remove some options from the UI. One of these options is the Embeds section.

autoembed_urls, the on-off checkbox, goes way, and oEmbed is always assumed to be on. The only reason to have a UI on/off for oEmbed is if it was easy to accidentally embed items. But it doesn't parse every link in the post, just those on their own line or inside an [embed] code.

(Andrew Nacin, Ticket #21719)

oEmbed settings in WordPress 3.4

With that there is no visible setting anymore, which let's you disable the auto-embed function. But, WordPress is not WordPress if it doesn't provide another way to disable it. Here we go.

The embeds are handled by the WP_Embed class. The constructor of the class registers some actions and filters. Also a filter for the_content:

add_filter( 'the_content', array( $this, 'autoembed' ), 8 );

Now we just need to remove the specific filter again. Since we can't use $this in the remove_filter call we need to use the global variable $wp_embed which includes the reference to the object.

// Disable auto-embeds for WordPress >= v3.5
remove_filter( 'the_content', array( $GLOBALS['wp_embed'], 'autoembed' ), 8 );

You can add this code to an existing plugin or you can use the small plugin "Auto-embeds Disabler".

Site note: If you want you can "like" our new Facebook page to get some more WordPress related resources.

How to enqueue the bundled jQuery in footer – The Right Way

Why scripts should be placed into the footer of a site:

With scripts, progressive rendering is blocked for all content below the script. Moving scripts as low in the page as possible means there's more content above the script that is rendered sooner.

The second problem caused by scripts is blocking parallel downloads.

Steve Souders in „High Performance Web Sites: Rule 6 – Move Scripts to the Bottom

WordPress comes with many bundles JavaScript libraries like jQuery or jQuery UI.
So plugins and themes doesn't need to bundle these libraries again, instead, they can use the WP_Scripts API.

The registration is controlled by the function wp_default_scripts() in /wp-includes/script-loader.php.

/**
 * Register all WordPress scripts.
 *
 * @since 2.6.0
 *
 * @param object $scripts WP_Scripts object.
 */
function wp_default_scripts( &$scripts ) {
// […]
	$scripts->add( 'colorpicker', "/wp-includes/js/colorpicker$suffix.js", array('prototype'), '3517m' );

	$scripts->add( 'editor', "/wp-admin/js/editor$suffix.js", array('utils','jquery'), false, 1 );
// […]
	// not used in core, replaced by Jcrop.js
	$scripts->add( 'cropper', '/wp-includes/js/crop/cropper.js', array('scriptaculous-dragdrop') );

	// jQuery
	$scripts->add( 'jquery', '/wp-includes/js/jquery/jquery.js', array(), '1.7.2' );

	// full jQuery UI
	$scripts->add( 'jquery-ui-core', '/wp-includes/js/jquery/ui/jquery.ui.core.min.js', array('jquery'), '1.8.20', 1 );
	$scripts->add( 'jquery-effects-core', '/wp-includes/js/jquery/ui/jquery.effects.core.min.js', array('jquery'), '1.8.20', 1 );
// […]
}

As you can see, WP_Dependencies->add() expects the following arguments: The name, the path, the dependencies, the version and last but not least the argument to enqueue the script either in header or footer. Same as for wp_register_script() or wp_enqueue_script().

Now you should have noticed that the jQuery registration doesn't have the last argument, which means the script will be enqueued in header. With the help of a filter inside the wp_default_scripts() function we can change this.
In practice:

<?php
/**
 * Plugin Name: Enqueue jQuery in Footer
 * Version:     0.0.1
 * Plugin URI:  http://wpgrafie.de/836/
 * Description: Prints jQuery in footer on front-end.
 * Author:      Dominik Schilling
 * Author URI:  http://wpgrafie.de/
 */
function ds_enqueue_jquery_in_footer( &$scripts ) {
	 
	if ( ! is_admin() )
		$scripts->add_data( 'jquery', 'group', 1 );
}
add_action( 'wp_default_scripts', 'ds_enqueue_jquery_in_footer' );

This a really clean and nice way. No need of deregister and register functions.

Of course, you should test if this breaks any functionality, especially when you are using plugins/scripts which hasn’t set dependencies correctly.