Using the non-minified version of jQuery in WordPress

If you’re developing in WordPress, you’ll probably have define('SCRIPT_DEBUG', true); in your wp-config.php file, which ensures that WordPress does not load minified javascript files. Unfortunately, because of it’s large size a non-minified version of jQuery is not included in WordPress, which means debugging jQuery related issues can be a real pain. Thankfully, it’s easy to fix, and the code below can be easily be added to your custom developer plugin. The code simply checks which version of jQuery is currently registered, then deregisters it and re-registers Google’s unminified version.

if (defined('SCRIPT_DEBUG') && SCRIPT_DEBUG) {
	add_action ('wp_enqueue_scripts', 'wpcs_init');
	add_action ('admin_enqueue_scripts', 'wpcs_init');
}

function wpcs_init() {
	global $wp_scripts;
	if (isset($wp_scripts->registered['jquery']->ver)) {
		$jquery_version = $wp_scripts->registered['jquery']->ver;
		wp_deregister_script ('jquery');
		wp_register_script ('jquery', "http://ajax.googleapis.com/ajax/libs/jquery/{$jquery_version}/jquery.js");
	}
}

How to make sure the correct domain is used in WPML

If you use the WPML multilingual plugin for WordPress, and have each language on a different domain, you may have noticed that WPML does not ensure that all URLs in your page point to the correct domain. You might notice, for example, that images are pulled from the main domain, even when you’re accessing a page on another language’s domain. It’s rare that this causes problems for your site, (although it theoretically could if you have .htaccess rules in place to stop hot-linking, or if you have enabled https for one domain and not for the others), but it’s likely to have a small negative impact on your SEO.

If you want to fix this, you need to filter all of the WordPress functions that return a URL. There are lots of them, and I haven’t collected them all together. But there’s enough here to give you the picture, and if you find something is not being filtered it should be easy enough to find the appropriate function and add it to the code.

//Add all the necessary filters. There are a LOT of WordPress functions, and you may need to add more filters for your site.
add_filter ('site_url', 'wpcs_correct_domain_in_url');
add_filter ('get_option_siteurl', 'wpcs_correct_domain_in_url');
add_filter ('stylesheet_directory_uri', 'wpcs_correct_domain_in_url');
add_filter ('template_directory_uri', 'wpcs_correct_domain_in_url');
add_filter ('post_thumbnail_html', 'wpcs_correct_domain_in_url');
add_filter ('plugins_url', 'wpcs_correct_domain_in_url');

/**
* Changes the domain for a URL so it has the correct domain for the current language
* Designed to be used by various filters
* 
* @param string $url
* @return string
*/
function wpcs_correct_domain_in_url($url){
    if (function_exists('icl_get_home_url')) {
        // Use the language switcher object, because that contains WPML settings, and it's available globally
        global $icl_language_switcher;
        // Only make the change if we're using the languages-per-domain option
        if (isset($icl_language_switcher->settings['language_negotiation_type']) && $icl_language_switcher->settings['language_negotiation_type'] == 2)
            return str_replace(untrailingslashit(get_option('home')), untrailingslashit(icl_get_home_url()), $url);
    }
    return $url;
}

Adding a favicon to your site (including at the root)

Adding a favicon is an important finishing touch to building your site. If your theme doesn’t support favicons, you can add a favicon by adding the following code to your functions.php :

add_action('wp_head', 'emw_add_favicon');

function emw_add_favicon () {
	echo '<link rel="shortcut icon" type="image/x-icon" href="'.get_stylesheet_directory_uri().'favicon.ico">'."\r\n";
	echo '<link rel="icon" type="image/x-icon" href="'.get_stylesheet_directory_uri().'favicon.ico">'."\r\n"; // Shouldn't be necessary, but added for maximum browser compatibility
}

If your theme already supports favicons, chances are there’s a filter in place so you can provide your own. For example, this is how to add a favicon to the Genesis theme:

add_filter ('genesis_pre_load_favicon', 'emw_add_genesis_favicon');

function emw_add_genesis_favicon ($text) {
	return get_stylesheet_directory_uri()."favicon.ico";
}

Or, if you prefer to keep your code ultra-compact:

add_filter ('genesis_pre_load_favicon', create_function ('', 'return get_stylesheet_directory_uri()."favicon.ico";'));

There’s one final problem to solve. Many browsers look for the favicon in your domain root: i.e. at www.domain.com/favicon.ico We could of course place the icon file there, but there’s no need to. A few lines of WordPress code will redirect browser requests to the right place:

add_filter('rewrite_rules_array', 'emw_favicon_rewrite');

function emw_favicon_rewrite($rewrite_rules) {
    $new_rules = array('favicon.ico' => get_stylesheet_directory_uri()."favicon.ico");
    $rewrite_rules = $new_rules + $rewrite_rules;
    return $rewrite_rules;
}

This function works by adding a favicon line to the array of rewrite rules, every time the array is updated. This means that you’ll need to force an update of all the rules before this extra rule will be added – and the easiest way to do that is to change your permalink structure, and then immediately change it back.

Don’t edit child themes – use grandchild themes!

Child themes are the easiest way to style WordPress sites. Rather than create a site from scratch, you can create a theme that shares most of its code and styling with a parent theme. The benefits of creating a child theme instead of editing the main theme is that if the main theme gets updates, none of your changes are lost.

But what if you need to modify a child theme? If you’re working with a Framework, like Genesis, it’s very likely you are already using a child theme – and editing that brings about all the disadvantages of editing a parent theme – you lose your changes if the theme is ever updated.

The solution is surprisingly simple. Instead of editing the child theme, create a grandchild theme. It’s very similar to creating a child theme, except you do it via a plugin. You add your custom functions to the plugin, just as you normally would in functions.php (though remember your plugin will be called much earlier than functions.php, so you’ll need to make sure that any code in your plugin only runs when an action is fired). Use the wp_register_style and wp_enqueue_style functions to add your CSS (by default a grandchild theme will add your CSS to the CSS of the parent or child theme, but you can change this behaviour by using the wp_dequeue_style function). Finally filter the result of the get_query_template function to control which PHP files are executed when a page is requested.

A typical grandchild theme might look like this:

/*
Plugin Name: Grandchild Theme
Plugin URI: https://www.wp-code.com/
Description: A WordPress Grandchild Theme (as a plugin)
Author: Mark Barnes
Version: 0.1
Author URI: https://www.wp-code.com/
*/

// These two lines ensure that your CSS is loaded alongside the parent or child theme's CSS
add_action('wp_head', 'wpc_theme_add_headers', 0);
add_action('init', 'wpc_theme_add_css');

// This filter replaces a complete file from the parent theme or child theme with your file (in this case the archive page).
// Whenever the archive is requested, it will use YOUR archive.php instead of that of the parent or child theme.
add_filter ('archive_template', create_function ('', 'return plugin_dir_path(__FILE__)."archive.php";'));

function wpc_theme_add_headers () {
	wp_enqueue_style('grandchild_style');
}

function wpc_theme_add_css() {
	$timestamp = @filemtime(plugin_dir_path(__FILE__).'/style.css');
	wp_register_style ('grandchild_style', plugins_url('style.css', __FILE__).'', array(), $timestamp);
}

// In the rest of your plugin, add your normal actions and filters, just as you would in functions.php in a child theme.

The two actions to add the CSS should be familiar to you (although you may also want to read this post). The filter is the important function. You can create as many of these as you wish, for different pages. Supported pages include:

  • index
  • 404
  • archive
  • author
  • category
  • tag
  • taxonomy
  • date
  • home
  • front_page
  • page
  • paged
  • search
  • single
  • attachment

If you want more control before deciding which template file to give to WordPress, create a proper function and insert your logic code into it:

add_filter ('archive_template', 'emw_archive_template', 10, 1);

function wpc_archive_template ($suggested_templates) {
	// Your logic here
	if ($test_passed)
		return $template_file;
	else
		return $alternative_template_file;
}