How To Fix Autoptimize Breaking bbPress Forum Styles

Autoptimize is one of, if not my favorite, WordPress optimization plugin. However, Autoptimize does have it’s own issues like minor CSS breakage.

Autoptimize has one important feature that is great for preventing issues. Autoptimize aggregates files in the order they appear on the screen. It also aggregates files by the files media type. For example, if the media type is set to print, it will aggregate all print CSS in its own file.

However some plugins, including bbPress have an issue with this feature. bbPress by default loads its CSS with the media=”screen” directive. I do not know why and I find this to be fairly annoying because nearly every other plugin in WordPress, excluding BuddyPress, bbPress, and WooCommerce usually stick to the media=”all” attribute. Due to this, Autoptimize has to generate a new CSS file. This is where Autoptimize’s important feature comes in. It combines them based on the media type. This way if you have print CSS, it is not loaded into your main combined CSS file. Or if you are not using the media print directive stylesheet, your CSS will break when combined.

The unintended consequence happens with the combined CSS, only if your theme overwrites the CSS of bbPress (not using !important) but is loaded afterward. This causes your website to lose styles because the media=”screen” stylesheet is loaded after the media=”all” sheet. Technically, Autoptimize is not at fault here. The logic behind the plugin is solid. This is because media=”all” should be loaded before the media=”screen” attribute, but most theme CSS is loaded using the media=”all” attribute. Due to the way the CSS is loaded in most themes, the result is broken forums.

In the future, bbPress may change the way the stylesheet is loaded, but there is a better fix out there that we can implement ourselves.

The Fix: Autoptimize Breaking bbPress Forum Styles

Autoptimize has an incredibly powerful and extensive API that allows us to fix this ourselves. This code can be added to the following places:

• functions.php file
• child theme
• site-specific plugin

// Fix Autoptimize + BuddyPress
function check_mediatype_bbpress($media, $tag) {
if ( strpos($tag, "bbpress.css") !== false ) {
$media = array("all");
}
return $media;
}
add_filter('autoptimize_filter_css_tagmedia', 'check_mediatype_bbpress', 10, 2);

The above code basically tells Autoptimize that the bbpress.css file should be treated like its media attribute is set to all and then aggregates it into the main stylesheet.