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, which each column containing its own widget area.

Three footer widget columns, as seen in the Adaline theme.
Three footer widget columns, as seen in the Adaline theme demo.

You can see live examples of footer widgets in the demos of our Cocina and Adaline themes.

They look nice in the demo, but put yourselves in the shoes of a user just starting out. Many of the “list” widgets, such as categories, monthly archives, and recent posts, wouldn’t look that great with barely any content.

Maybe to start, you’d rather just have two columns of widgets. Let’s say a text widget containing an “About This Site” blurb on the left, and a newsletter opt-in form on the right.

Two footer widget columns, using the Cocina theme.
Two footer widget columns, using the Cocina theme.

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.

Backend view of a WordPress site not using one of its footer widget areas.
Backend view of a WordPress site not using one of its footer widget areas.

No theme option needed.

Outline

We’ll accomplish the Flexible Footer Widgets technique in only three steps:

  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.

You can find a functional example theme in the Flexible Footer Widgets Theme repository.

Register the widget areas

The magic happens between lines 38 and 74 of our Flexible Footer Widgets Theme’s functions.php file.

Take note of the widget area IDs (footer-1, footer-2, footer-3) because we’re going to need them in subsequent steps.

Display the widget areas

Next, we’ll open up footer.php and plop in the following code:

Note how we wrap the entire footer-widgets div in a conditional checking if any of the footer widget areas are active. This prevents any footer-widget-related markup from being output on the page if no footer widget areas are active.

Important: Also note how the individual widget area columns are wrapped in is_active_sidebar() checks, including the associated footer-widget-area div. We want to make sure an “empty” div isn’t output in the code if the associated widget area is inactive.

Style the widget areas

Here’s where the magic starts.

At this point, if we had widgets in each of our three footer widget areas, they would stack on top of each other.

We want them to be displayed in columns, with widths that adjust depending on how many columns there are.

For example, 100% width if there’s one footer widget area, 50% width if there’s two footer widget areas, and 33.333% width if there’s three footer widget areas.

We can accomplish this sort of anticipatory width styling with pure CSS, thanks to a CSS3 technique outlined by Lea Verou: Styling elements based on sibling count.

We’ll be modifying it slightly to work with the markup we’ve laid out in our WordPress theme code already.

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 of the parent.

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 of the parent.

And so on and so forth. It’s a brilliant technique that I don’t think I would’ve ever thought of myself.

At this point, our column widths will adjust based on how many widget areas are active. Check out the Flexible Footer Widgets Theme to give it a spin yourself.

Also note that we included the .footer-widgets class in our clearfix selectors.

And that’s all there is to it

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

I have to admit, my mind was a bit blown when I first discovered the CSS technique to detect number of siblings. I’ve also used it in the Cocina theme for post pagination.

When there’s only one post pagination link (like if it were the first or last post) it displays at full width, like this:

cocina-one-page

But when there’s two, it displays at half width, like this:

cocina-two-pages

Can you think of any other practical applications for sibling detection CSS? Or any other ways to provide theme users more flexibility with less options? I’d love to hear about it in the comments.

Also, do the videos help?

4 comments

  1. Styling based on sibling count is really great. I did not know this technique before but have tested it in my latest theme when I stumbled upon your article a few weeks ago. Thanks so much for writing this down 🙂

    What do you think about using flexbox? I’m using it more and more lately and can imagine to get rid of most floats entirely. I haven’t used flexbox for footer widgets yet but it should work fine. I guess I will try it with my next theme.

    This short CSS snippet should basically do the trick for your example:

    .footer-widgets {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
        margin-right: -2em;
    }
    
    .footer-widget-area {
        width: 25%;
        padding-right: 2em;
        box-sizing: border-box;
        -webkit-flex-grow: 1;
        flex-grow: 1;
    }

    1. Hi Thomas,

      So glad to hear you got use out of this!

      I wasn’t aware of this flexbox technique before you mentioned it, but I tested it and it seems to work great.

      The only thing I’d be concerned about is weird cross-browser quirks, but assuming those are ironed out, it seems like flexbox would be the more efficient choice.

      My latest theme, Vivaro, allows up to five footer columns, and the combined all those groups of sibling selectors got a bit unwieldy.

  2. There are certainly some browser quirks, but support for flexbox is getting better and better.

    For example: I had some issue with Safari calculating widths of flex items not properly which resulted in empty gaps in a flexbox grid layout. You need some hacks with a negative margin of 1px for Safari to solve this.

    Flexbugs is sometimes helpful to solve these issues, but is a bit outdated now: https://github.com/philipwalton/flexbugs

Leave a Reply

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