A few weeks ago I wrote here how one misplaced single quotation mark managed to break an entire WordPress site, resulting in the dreaded WordPress White Screen of Death. The other day I experienced a somewhat similar mishap when putting some Google Adsense code – the underlying code behind Google text ads – here on this site.
It wasn’t catastrophic; it didn’t crash the entire site. But it had unintended consequences that took a while to track down, and finding the problem involved going through the code that WordPress generates.
Like most people who use WordPress, I just cut and pasted the Adsense code into a text widget and pasted the widget inside a sidebar, within the WordPress admin interface. I’ve done this before on other sites; it’s a pretty routine thing.
And yet, when I went to the Jeff Chappell dot com’s homepage, the result was the image you see here to the right. The Google Adsense ads were showing up, but the widget down below, WordPress’ meta widget with the standard login and RSS feed links, was broken – it displayed in my browser, but it’s supposed to have an off-white background as dictated by CSS. Only it was displaying transparent with the site’s background image was showing through.
At first, because I like to use Opera – I’ve been using Opera for years – I thought it must be a browser compatibility issue. But I checked the site in the latest versions of Firefox, IE and Chrome, and each displayed the same problem, so I couldn’t blame it on Opera. At the same time I thought it might be some weird caching issue; I use W3 Total Cache, which is a great WordPress plugin, very powerful – sometimes a little too powerful. But no, this wasn’t the problem either.
So it was time to start looking at the source code that WordPress was generating. To make a long story short, the problem was … wait for it … *insert snare drum roll* … the fact that I hadn’t included a heading or title in the widget housing the Adsense code.
When you use a text or any other widget in WordPress, there is a place to put a title. I left it blank, and as a result, it didn’t produce the necessary div tags when WordPress generated the html code for the page. Consequently the necessary calls to the CSS file weren’t taking place, resulting in the broken meta widget.
The problem lies in the fact that both widgets reside in the same part of the sidebar, bound together code-wise with div tags, specifically class “block.” A look at the code reveals the exact problem. Here’s what the first several lines look like — including the problematic ones — for the lower right sidebar on this site that contains the widget with the adsense code: