WordPress + MaxCDN + W3 Total Cache broken styles on main page fix

I recently hooked up one of my WordPress blogs to use MaxCDN (set up via the W3 Total Cache plugin) for serving stylesheets, images, and other things. Everything was going great except the main page of my blog was completely unstyled. Curiously enough, all of the other posts of my site had styling.

The console output in Chrome was a little help, showing me that the page was trying to find the .css and .js files at http://array/wp-content and http://array/wp-includes.

The “missing file” error stack looked like this:

GET http://array/wp-content/themes/blognametheme/style.css?ver=2.2.7 net::ERR_NAME_NOT_RESOLVED
GET http://array/wp-includes/css/dashicons.min.css?ver=4.4.2 net::ERR_NAME_NOT_RESOLVED
GET http://array/wp-content/plugins/jetpack/css/jetpack.css?ver=3.9.4 net::ERR_NAME_NOT_RESOLVED
GET http://array/wp-includes/js/jquery/jquery.js?ver=1.11.3 net::ERR_NAME_NOT_RESOLVED
GET http://array/wp-includes/js/jquery/jquery-migrate.min.js?ver=1.2.1 net::ERR_NAME_NOT_RESOLVED
GET http://array/wp-content/plugins/jetpack/modules/wpgroho.js?ver=4.4.2 net::ERR_NAME_NOT_RESOLVED

Basically, 20 minutes of Googling and reading about W3 and caching later, it dawned on me that the problem might be minification. I unchecked minification in W3 Total Cache and now it works.

w3_turn_off_minify

Moral of the story: if you get some weird styling or jquery issues on your WordPress blog, try unchecking minify in W3 Total Cache.

Leave a Reply

Your email address will not be published. Required fields are marked *