Welcome! To use this support forum, please Login or Join Today!

You are here → Home :: Forum Home :: General WordPress :: Plugins Discussion :: Thread

   

CSS & JS Minify

{name}
Rank

Total Posts: 30

Joined 2012-03-03

PM

 
Could you recommend a plugin to minify CSS and JS files? I'm aware of the WP Minify and Better WordPress Minify plugins, but stories of conflicts with other plugins are disconcerting.

Alternatively, is there a simple way to manually minify (or combine) CSS and JS files for the Element and Synapse themes?

{name}
RankRankRankRank

Total Posts: 3667

Joined 2011-04-27

PM

 
Hi, Just wanted you to know I'm looking into this. I had written a child theme function to use minify directly, but saved it on another dev machine. I'll post back to you tomorrow. Thanks.
{name}
Rank

Total Posts: 30

Joined 2012-03-03

PM

 
Awesome, Casey! Thanks for taking the time to look into this.
{name}
RankRankRankRank

Total Posts: 3667

Joined 2011-04-27

PM

 
Hi, So after some research here is what I've found with minify and WordPress...

The WP plugin is great if all theme and plugin developers register their scripts and stylesheets properly while adhering to the known issues of minify itself. That's not always the case though; Particularly with plugins that render frontend styles. Also, some plugins load their scripts and CSS dynamically when called/enque'd so caching the wrong settings may be problematic in some cases.

You could (at the very least) minify the theme. To do this, you'd install the Minify library directly on your server (without the WP plugin) from http://code.google.com/p/minify/.

To install, just extract the downloaded source and upload only the /min folder to your site root.

I've written a function below that will minify the theme without the overhead of a plugin. After you've uploaded minify (/min) you could add this to your child theme's functions.php (see additonal notes):

https://gist.github.com/4553826

The only conflict with the theme is that element-child/style.css has an @import of the parent theme's style.css (another reason why some plugin CSS breaks). If you don't plan on making any advanced customizations outside of basic colors, then you can leave this as is.

If you plan on making advanced customizations, you'll want to copy the rules from element/style.css into element-child/style.css and change line #24 from $parent_theme to $child_theme in your functions.php.

Another Note: If you do copy style.css to the child theme, it's important to not overwrite the style.css "header" portion which looks like this:

/*
Theme Name:     Element Child
Theme URI:      http: //www.simplethemes.com/
Description:    Child theme for the Element Theme
Author:         Simple Themes
Author URI:     http: //www.simplethemes.com/wordpress-themes/theme/element
Template:       element
Version:   2.2
*/


Everything below this can be replaced/changed.
{name}
RankRankRankRank

Total Posts: 3667

Joined 2011-04-27

PM

 
As for minifying the theme's javascript, you'd do it the same way. I don't think however, it would make much difference at all. The theme uses very little javascript outside of jQuery (which is already minified) and a few tiny functions that may only be costing you about .4 miliseconds.
{name}
Rank

Total Posts: 30

Joined 2012-03-03

PM

 
Casey, thanks so much for this phenomenal support. It's extremely helpful.

Just to confirm, will this child theme function also work with Synapse?

Also, will minifying of the theme create any conflicts with future parent theme updates?

{name}
RankRankRankRank

Total Posts: 3667

Joined 2011-04-27

PM

 

Just to confirm, will this child theme function also work with Synapse?

It should. I haven't tested, but I'd say yes with 99% certainty.


Also, will minifying of the theme create any conflicts with future parent theme updates?

No. Minify will just re-cache the stylesheets whenever they change so you should be good.
{name}
Rank

Total Posts: 30

Joined 2012-03-03

PM

 
Right on, Casey.

Thank you again for taking the time to explain this!