Adjusting column layouts based on widget area usage

Many WordPress themes feature column layout switching options, such as those pictured below.

While this sort of theme option certainly helps users visualize the different layout variations available to them, explicitly choosing one is not entirely necessary.

An Optionless Example

Let’s say a theme had a two column layout by default, with content on the left, and a widgetized sidebar on the right. If the user decided to not include any widgets, it would be safe to assume that this user wanted a one column layout.

This tutorial will cover a straightforward technique for WordPress themes to automatically adjust column layout based on the user’s utilization of certain widget areas.

Assumptions

1. You already have a sidebar widget area registered with the ID of “sidebar-1”
2. The sidebar widget area is the only thing contained inside of the sidebar div
3. Your theme supports body classes

Add a conditional body class

The following code will check if the “sidebar-1” widget area is active. If not, a no-sidebar body class is added.

We can then use this body class to add specificity to override the original 70% width rule with a 100% width rule.

As theme developers, we should always be looking for ways to provide more flexibility with less options.

Limitations

This technique can get messy with multiple “optional” columns. I’d argue that WordPress themes should follow more of a decisions, not options mindset when it comes to column layout options.

Instead of users futzing around with all the potential column layout variations, they should simply ask themselves, “do I want sidebar widgets or not?”