Widget Titles, WordPress and Broken Code

Skipping a WordPress Widget title can unintentionally break your div tags and CSS.Who Knew Skipping a Widget Title Would Break the CSS of the Widget Underneath?

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.

Insert WordPress widget title, and viola, problem solved.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:

[html]

Paying the Bills

[/html]

The key turned out to be the div class “widgetcontent” — or so I thought at first. As you can see from this snippet of code below, generated when I take away the title text in the WordPress widget window, without the corresponding div tags that handle the widget title being called upon in the code produced, the div tags with the widgetcontent class aren’t produced either:

[html]

should be the one that appears broken, looked fine. I couldn’t suss out at first why this was happening (in all four browsers, no less), but it ultimately didn’t matter, as I had discovered the problem.

It still bugged me though. After taking another look at the entire chunk of code enclosed by the “block” div tags, I figured out what was really going on. When we skip the widget title, we end up with one to many closing div tags, so while the Adsense widget is enclosed in the proper “block-content” div tags, the meta widget underneath is not, resulting in the transparent widget — a look at the CSS file reveals that it is indeed the missing block-content div tags for the widget on the bottom that give us the unwanted transparency.

Anyway, if you’re exceptionally nerdy and want to see for yourself, here’s the entire chunk of offending code. If you match up the div tags — easy to do in Notepad++, incidentally — it’s easy to see where the boo-boo occurs.

[html]
div class=”block”>





[/html]

In any event, I hope this may help other folks in the future who encounter a similar problem. Who would have thought that skipping a widget title would create a hassle?