Reduce the number of requests in your WordPress theme

This simple code will allow you to load all of your themes css files into one request without a plugin.  I have not yet found a plugin that works with other plugins nicely as not all plugin authors play by the rules when enqueueing scripts and styles.  So i figured that I would start with my theme.  I wrote my own theme for this site based on the Twitter Bootstrap.  On its own there would be a request for the bootstrap css file and one custom one for my theme.  And the javascripts would be one for the bootstrap and one for my custom js. Add to this that I use Prettify for my syntax highlighting and you can see that the requests can start to pile up.  Let's say that your theme also uses modernizr, jquery ui, maybe a slider script, etc... it is easy to see that the js and css requests can really start to add up. Let's start with the minifier.  I use Minify for this task.  It is really easy to use and install.  Just copy the min folder to the root of your theme.  For this demo, you do not have to do any modification to the sources files.  Then you can place the following snippets into your theme's functions.php file to register and enqueue your scripts.  In my case, I wanted to load jQuery from the theme as I often find that upgrades to jQuery break some code and this will mean that all my existing code will work even if WordPress upgrades its version. You can view the source/inspect element on this page and see these two requests on my site. They will look like:

<link rel="stylesheet" id="theme_styles-css" href="http://matthewaprice.com/wp-content/themes/hendrix/min/index.php?f=%2Fwp-content%2Fthemes%2Fhendrix%2Fcss%2Fbootstrap.css%2C%2Fwp-content%2Fthemes%2Fhendrix%2Fcss%2Fprettify.css%2C%2Fwp-content%2Fthemes%2Fhendrix%2Fstyle.css&ver=3.5" type="text/css" media="all">

AND

<script type='text/javascript' src='http://matthewaprice.com/wp-content/themes/hendrix/min/index.php?f=%2Fwp-content%2Fthemes%2Fhendrix%2Fjs%2Fbootstrap.min.js%2C%2Fwp-content%2Fthemes%2Fhendrix%2Fjs%2Fprettify.js%2C%2Fwp-content%2Fthemes%2Fhendrix%2Fjs%2Fscripts.js&ver=3.5'></script>

Here is the code for your functions.php

add_action( 'init', 'map_register_scripts_styles' );
add_action( 'wp_enqueue_scripts', 'map_enqueue_scripts_styles' );

function map_register_scripts_styles() {
  // so the minifier needs relative urls, not with the full http://
  // this grabs the theme location dynamically and then parses the url so that we can end up with "/wp-content/themes/theme_folder"
  $template_location = parse_url( get_bloginfo( 'template_directory' ) );

  if ( !is_admin() ) {
    // if we are on the front end, deregister the default jquery and register my own
    wp_deregister_script( 'jquery' );
    wp_register_script( 'theme_jquery', $template_location['path'] . '/js/jquery-1.8.3.min.js' );
  }
  
  // create an array of css files to add to the minified request        
  $theme_styles = array(
    $template_location['path'] . '/css/bootstrap.min.css',
    $template_location['path'] . '/css/prettify.css',
    $template_location['path'] . '/style.css'
  );
  wp_register_style( 'theme_styles', $template_location['path'] . '/min/index.php?f=' . implode( ',', $theme_styles ) );
                
  // create an array of javascript files to add to the minified request
  $theme_scripts = array(
    $template_location['path'] . '/js/bootstrap.min.js',
    $template_location['path'] . '/js/prettify.js',
    $template_location['path'] . '/js/scripts.js'
  );
  wp_register_script( 'theme_scripts', $template_location['path'] . '/min/index.php?f=' . implode( ',', $theme_scripts ), array( 'theme_jquery' ), '', true );                  
        
}

function map_enqueue_scripts_styles() {

  wp_enqueue_script( 'theme-jquery' );
  wp_enqueue_script( 'theme_scripts' ); 
  wp_enqueue_style( 'theme_styles' );
                
}

So you can see that at least your theme's styles and scripts will be loaded with one request a piece. Note: the minifier will not perform any compression on a file with ".min" on it. So you are just including it so that all the scripts can be included with one request. This is by no means perfect, but it works on this site and where there once were 6 requests, there are now only 2. I am working on a way that would register a script to a global that could then be accessed from a theme so that my plugin's scripts and styles could be merged with the array that I use in my theme to register styles and scripts and really reduce the number of requests. Enjoy!