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.

scott hartley

About the author

Scott is a web performance geek, lover of all things coffee, and avid video game player. His WordPress work delves into web performance, web security, and SEO.

2 thoughts on “How To Fix Autoptimize Breaking bbPress Forum Styles”

  1. THANK YOU SO MUCH FOR THIS! I had resorted to dequeue/enqueue on a ton of buddypress and bbpress styles. This will simplify things a lot. You should cross post to the bbpress site and buddy press site if you haven’t already. Heck – I’d think about turning it into a compatibility plugin!

    Reply

Leave a Comment