Providing flexible footer widgets in WordPress

Footer widgets are a common feature in WordPress themes. They are typically broken up into columns of three or more.

In a theme featuring the Flexible Footer Widgets technique, the user would simply have to not use one of the three footer widget areas, and the theme would automatically adjust the footer widget columns to be in halves rather than thirds.

No theme option needed.

Outline

1. Register three footer column widget areas in functions.php.
2. Output the widget area divs wrapped in is_active_sidebar() conditionals
3. Style the widget area divs depending on how many are active.

Style the widget areas

We want columns with widths that adjust depending on how many there are: 100% for one, 50% for two, 33.333% for three.

We accomplish this with a CSS3 technique outlined by Lea Verou: Styling elements based on sibling count.

For example, if a div is the first child and the last child (i.e. .footer-widget-area:nth-child(1):nth-last-child(1)), you can assume it’s the only child.

If a div is the first child and the second to last child (i.e. .footer-widget-area:nth-child(1):nth-last-child(2)), you can assume there are two children.

Similar to our tutorial about automatic column layouts, this is another way to provide WordPress theme users more flexibility with less options.