Conditional headers (depending on the plugins)

[KnxDT]

I'm trying to optimize my sites doing this: Less javascript and CSS in the headers.

The problem is that, for example, when I use CForms 7 plugin, I only use it in pages, so I'm editing the code of the plugin adding the conditional function is_page() inside the function that pulls the add_action for the wp_head.

When I use Polls, I do something similar: I'm not using them in the homepage anymore, I'm using more (functionality) in the post to show them only in the single_post, so I did something similar: Added the is_single() conditional just to print the javascript and CSS files when I visit a single-post.

And so on...

However, here I have several problems:

- I have to be careful when I update the plugins.
- I still having problems like: Javascript and CSS files loading in ALL single-post, and not only in those when I have polls (in the case of poll).

I'm using a cache plugin (W3 Total Cache) to minify them (to combine them), but I just want to optimize more.

Maybe an alternative could be to directly input the javascript code in the HTML Tab of the post. Maybe another one could be use custom fields and modify the header.php of the theme to add a conditional function that connects the code inside the custom fields and the plugin (and delete the wp_head() function in the header.php)... I'm not sure.

Do you have any ideas? Thank you very much :)

[chipbennett]

There are at least a couple options: Plugin-specific hooks, or running a Loop to determine if code is needed, then rewinding.

More explanation in the morning!

[Ryan]

I unhook the built-in plugin scripts and CSS via a separate plugin, then manually add them back in. This way it doesn't matter if the other plugin is updated, since you aren't using their scripts and CSS files anyway.

I wrote a plugin which unhooks the Contact Form 7 plugins' CSS scripts. You can download it here:
http://pixopoint.com/products/deregi...form-7-plugin/

[KnxDT]

Thanks Ryan. I have a question: When you say that you "manually add them back in". Where do you do this? Inside the post? In the header.php file? (as static text).

I'm checking the code to get some ideas. Thanks again.

[kaspars]

If you already have them combined, they get stored in user's cache and are loaded from the cache on all the following page requests.

If you'll have different content of the same combined js and css file, it has to be reloaded on every page request. This means you'll need to have different file names on each request (so they don't get cached locally) or a no-cache directive in the response headers of those files.

There is nothing better than a combined CSS and JS file for all your scripts and stylesheets with a far future expiry time.

[KnxDT]

Yep, I want to combine the scripts, but only the ones that I'm gonna use (in a specific page).

[kaspars]

As I said -- you shouldn't do it, because it will lead to slower load times due to an extra request for a fresh JS file on every page load.

[Ryan]

When you say that you "manually add them back in". Where do you do this?

The same way you would add any script or CSS file to a page. Typically by using wp_enqueue_script() or wp_enqueue_style() in your themes functions.php file or in a plugin file.

EDIT: If you don't know what wp_enqueue_script() and wp_enqueue_style(), try Googling them. They're important to understand for unhooking and rehooking CSS and JS files in plugins/themes.

To get you started ....

 /* Load stylesheets
 * @since 0.1
 */
function random_stylesheets() {
    if ( is_page() )
        wp_enqueue_style( get_stylesheet_directory_uri() . '/random.css', false, '', 'screen' );
}
add_action( 'wp_print_styles', 'random_stylesheets' ); 
  

[KnxDT]

The same way you would add any script or CSS file to a page. Typically by using wp_enqueue_script() or wp_enqueue_style() in your themes functions.php file or in a plugin file.

EDIT: If you don't know what wp_enqueue_script() and wp_enqueue_style(), try Googling them. They're important to understand for unhooking and rehooking CSS and JS files in plugins/themes.

To get you started ....

 /* Load stylesheets
 * @since 0.1
 */
function random_stylesheets() {
    if ( is_page() )
        wp_enqueue_style( get_stylesheet_directory_uri() . '/random.css', false, '', 'screen' );
}
add_action( 'wp_print_styles', 'random_stylesheets' ); 
  

Yep, you are right. I didn't know it. Interesting material, I will check the Wordpress Codex again. Thanks, Ryan.