Subscribe via

Tutorial: Get WP Minify to Process Your JS and CSS Files

This tutorial only applies to WP Minify pre-2.0.

You should use this tutorial if you still notice some Javascript and CSS files not being processed by WP Minify after activating the plugin.

Problem

WP Minify only sees scripts and styles enqueued via the wp_enqueue_script() and wp_enqueue_style() function. So if your theme or plugin does not use these functions for printing Javascript or CSS references, then WP Minify will not include them into the Minifying process.

How to Enqueue Scripts

To enqueue a Javascript file use the following PHP contruct:

function my_load_js() {
  wp_enqueue_script('my_handle_name', 'http://example.com/path/to/file.js');
}
add_action('init','my_load_js');

To enqueue a Javascript file that is required to be loaded after another Javascript file, you can specify the dependent script’s handle as the third parameter. The following example will load second_file.js after first_file.js:

function my_load_js() {
  wp_enqueue_script('my_handle_name_first', 'http://example.com/path/to/first_file.js');
  wp_enqueue_script('my_handle_name_second', 'http://example.com/path/to/second_file.js', 'my_handle_name_first');
}
add_action('init','my_load_js');

More information on wp_enqueue_script() on WordPress Codex.

Make sure you add_action on the init hook and not the wp_print_scripts or wp_print_styles hook. It is too late for WP Minify to intercept these scripts and styles once it gets to the wp_print_scripts and wp_print_styles hooks.

How to Enqueue Styles

Use the same construct as the previous section except with the wp_enqueue_style() function instead.

Final Words

I have always been a believer of wp_enqueue_script() and wp_enqueue_style() functions. If your plugin is not using these functions yet, please upgrade it so that it can take advantage the WP Minify engine! If you do not own the plugin, please nudge your plugin author towards this article and request that they upgrade their plugin!

Save and Share
StumbleUpon
Reddit

10 Responses to “Tutorial: Get WP Minify to Process Your JS and CSS Files”

[go to last comment]
  1. Mark

    Do you happen to know off hand any popular plugins that do use this technique. I cant seem to get this to minify anything in my blog, css, js, etc… Would love some help.. Thanks.

  2. Mark

    PS, I think that you have a great theme as well on this site. Love the features….

  3. reelseo

    Is it possible that I only need to make a change to my theme to get this to work? Im not a developer but I can understand HTML, CSS, and some PHP and am working on my own theme… Thanks again.

  4. Thaya Kareeson

    Hi Mark
    This is the WordPress standard way of queuing JavaScript and CSS files. A lot of "good" plugin developers use it.

    You can add your JavaScript and CSS files in your theme to the list on the WP Minify options page and comment them out in your theme.

    As for JavaScript and CSS files referenced in each plugin, I would recommend that you contact the plugin developer to make sure they queue their JavaScript and CSS files properly. It's a lot cleaner and definitely easy to do by following this post.

  5. reelseo

    Thanks for the response…. I see that I can add the JS and CSS files in the options page. however, I cant comment them out of the theme as they are loaded via WP-head in the header of my theme…. Does that make sense? How can I comment them out of the head on my site?

    I read the post you mentioned but because I am not the plugin developer, I cant make those changes. I certainly will let those developers know about the resource mentioned.

    Lastly, what do you use for related posts at the bottom of your posts and as part of the WP Greet Box plugin?

    Thank you soo much in advance. Happy to pay you for your guidance here as I am in the middle of a site-redesign and a bit over my head… ;-) My site is ReelSEO.com and you can preview what I am working on at reelseo.com/?theme=3sidebars… lots more work to do.

    PS – the features in your theme here are really amazing and outstanding.. I also use WP-Greet and now, this commenting tool and am thrilled as they are some of the best plugins I have ever seen. Very well thought out, comprehensive, etc…. Do you do any theme development or know those who do to the level shown on this blog?

  6. Darren

    nice plugin, HOWEVER, I am specifying files to be NOT minifyied, and the plugin seems to be ignoring this instruction, any idea what I could be doing wrong?? I am specifying the link like this;

    blog/wp-content/plugins/jquery-lightbox-balupton-edition/js/jquery-1.3.2.min.js

    my blog location is specified as blog/

  7. Jae Jun

    Im having the same problem as Darren. I am currently using WP-greet box and minifying is disabling the CSS and JS of this plugin.

    My blog is on the home path and I've entered

    /wp-content/plugins/wp-greet-box/css/wp-greet-box.css

    in the last ignore box but nothing…

  8. Thaya Kareeson

    Hi ReelSEO. I am terribly sorry for the late response. I've been very slammed with work and life lately so I have neglected this blog a bit.

    Back to your questions:
    "Lastly, what do you use for related posts at the bottom of your posts and as part of the WP Greet Box plugin?"

    They are actually separate plugins. The ones I use for my posts is "Yet Another Related Posts Plugin" and the one that I use with WP Greet Box actually comes with WP Greet Box itself.

    "Do you do any theme development or know those who do to the level shown on this blog?"

    Although I did theme this blog myself, I don't do any theme development. Graphics design has never been my specialty so I'm a bit shaky at taking up any theme projects.

    "I see that I can add the JS and CSS files in the options page. however, I cant comment them out of the theme as they are loaded via WP-head in the header of my theme…. Does that make sense? How can I comment them out of the head on my site?"

    I think the plugins that you use are using something like add_action("wp_head", "some_function") where "some_function" actually does the script and CSS reference printouts. You will have to comment this out in your plugins if you want to add them manually.

    That said, I wouldn't recommend doing all that work yet since I am planning on enhancing this plugin to be able to pick up these JavaScript and CSS calls on the fly without any hacks to your plugins/themes. Please stay tuned!

  9. Thaya Kareeson

    Hi Darren. Thank you for visiting and reporting this bug. I will inspect and fix it by the next release.

  10. Thaya Kareeson

    Thanks for confirming this bug Jae Jun! I will get the next release out as soon as time permits!

[go to first comment]

Leave a Reply