WordPress 4.7 custom background image bug & workaround

If you encountered this bug but are not using Autoptimize, leave a comment below or contact me here. Your info can help understand if the regression has an impact outside of Autoptimize as well!


Gotta love Sarah, but there’s a small bug in Vaughan’s (WordPress 4.7) that breaks (part of the CSS) when Autoptimized. If you have a theme that supports custom backgrounds (e.g. TwentySixteen) and you set that custom background in the Customizer, the URL ends up escaped (well, they wp_json_encode() it actually) like this;

body{background-image: url("http:\/\/localhost\/wordpress\/wp-content\/uploads\/layerslider\/Full-width-demo-slider\/left.png");}

Which results in the Autoptimized CSS for the background-image being broken because the URL is not recognized as such. The bug has been confirmed already and the fix should land in WordPress 4.7.1.

If you’re impacted and can’t wait for 4.7.1 to be released, there are 2 workarounds:
1. simple: disable the “Aggregate inline CSS”-option
2. geeky: use this code snippet to fix the URL before AO has a change to misinterpret it;

add_filter('autoptimize_filter_html_before_minify','fix_encoded_urls');
function fix_encoded_urls($htmlIn) {
	if ( strpos($htmlIn,"body.custom-background") !== false ) {
		preg_match_all("#background-image:\s?url\(?[\"|']((http(s)?)?:\\\/\\\/.*)[\"|']\)?#",$htmlIn,$badUrls);
	  	if ($badUrls) {
			foreach ($badUrls[1] as $badUrl) {
				$htmlIn = str_replace($badUrl, stripslashes($badUrl), $htmlIn);
			}
		}
	}
  	return $htmlIn;
}

7 thoughts on “WordPress 4.7 custom background image bug & workaround

  1. Mike Irish

    Hi Frank,

    Wow!! I have been fighting this problem for weeks/months…all alone. I thought for sure it was something I did, we had a big melt-down on our Genesis theme…and thought the missing header.png came from that.

    What I did just today before reading this was ti create a 1 x 1 trans. png and uploaded the image so the file will now be ‘found’.

    Along with this I was going to delete the AO cache and start-over…what do you think?

    Thanks, Mike

    Reply
  2. Mike

    Thanks!
    I looked at “also aggregate inline CSS” it was already unchecked. My trans 1 x1 png worked…no degrading of the site. Then 4.7.1 came out…all seems well!

    Thanks, Mike

    Reply
  3. Scharlotte

    Es ist eine Frechheit, dass alle Anleitungen oder wichtige Informationen in Englisch geschrieben werden. Dazu gibt es Pseudo- HELP -Videos, von einem Englisch sprechenden Inder. . Ich weiß nicht, was und ob dieses Plugin überhaupt irgendetwas optimiert, weil ständig neue Probleme auftauchen.. Ich lese nur immer: “Gib mir ein Geld!”

    Reply
    1. frank Post author

      Well, given I don’t speak German (my mother-tongue is Dutch, English & French are battling for 2nd place in my head & heart) it seems weird you’d expect me to write in German, no? But I guess your remarks are more of a general nature :-)

      And as far as money is concerned; do not donate to me ;-)

      Reply

Leave a Reply

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