One of the great things about WordPress is all of the wonderful plugins available. The downside of adding all these plugins to your site is that your often loading your plugin JavaScript and CSS files in the header when they are not being used. Some may only be used once in your sight and others only in certain sections. In this post I’ve got some tips on cleaning out unnecessary header calls in your WordPress header.

How to load plugins on demand via  the functions.php file

Using your theme’s functions file you can add in some code to specify when to load your plugin files. The way you do this will depend on if you know which pages do use the plug-in or if you only which pages won’t use it.

Step 1 – Get Plugin ID

First you need to know the name the plugin uses as its ID. For example the Contact From 7 plugin ID is ‘contact-form-7’. The best way to find this out is to view your source code and find where the css is being loaded. The ID will be in the css link tag, just ignore the ‘-css’ postfix. For example:

<link rel='stylesheet' id='contact-form-7-css' ...

Step 2 – Add function for loading scripts
Now we want to add a function to tell your scripts when to load. We’ll do this using the add_action hook in your function file. Here is an example of only loading contact 7 on the contact page and

Open your theme’s functions.php file and add the following function:

//Remove plugin scripts
function my_conditional_scripts() {
  //Only load on contact page
  if (!is_page('contact')) {
     wp_deregister_script('contact-form-7');
  }
  //Don't load these scripts on basic pages which don't use NextGen
  if (is_front_page() || is_page(array('contact','about','services'))) {
    wp_deregister_script('NextGEN');
    wp_deregister_script('nggadmin');
    wp_deregister_script('shutter');
    wp_deregister_script('thickbox');
  }
}
add_action( 'wp_print_scripts', 'my_conditional_scripts', 100 );

Step 3 – Add function for loading CSS styles
Now we need another script for the CSS files.

Open your theme’s functions.php file and add the following function:

//CSS scripts
function my_conditional_styles() {
  if ( !is_page('contact') ) {
    wp_deregister_style( 'contact-form-7' );
  }
  //Next Gen (non folio pages)
  if (is_front_page() || is_page(array('contact','about','services'))) {
    wp_deregister_style('NextGEN');
    wp_deregister_style('shutter');
    wp_deregister_style('thickbox');
  }
}
add_action( 'wp_print_styles', 'my_conditional_styles', 100 );

You may need to do a bit of testing and digging around to see what’s being loaded but this should get you started. For more information on writing conditional tags so you can control on which pages the code does/doesn’t load check out the WordPress Codex.

A little more – Removing Meta Tags

Whilst your in your functions script there are a couple more calls that we can add to speed up the load time and just clean it up a little. The following bit of code removes some Start link, Parent Link and Next/Prev posts meta data. This is added for accessibility and does improve the load speed of your next posts however you can just remove it to increase your load speed. Simple add the following to your functions file:

remove_action('wp_head', 'parent_post_rel_link', 10, 0); // prev link
remove_action('wp_head', 'start_post_rel_link', 10, 0); // start link
remove_action('wp_head', 'adjacent_posts_rel_link_wp_head'); //next prev links

There are more meta tags you may wish to remove but thats a good start. Happy WordPressing people!