Tutorial: Adding footer widgets in the WordPress theme

Footer widgets are a popular feature in WordPress themes to display additional information in the form of text or links at the bottom of the page. Most themes display footer widgets in several columns and offer a separate widget area for each column.

If your theme does not support footer widgets, you can add them to your WordPress theme with this tutorial. As an example we use the TwentySixteen theme and add a four-column footer widget area using a child theme .

The tutorial is structured in three steps. First we register the widgets in the backend, then the display takes place in the frontend and finally the styling with some CSS code.

Register footer widgets in the backend

First we create a new function that registers four new widget areas in the theme. You copy this function into the functions.php of your child theme. The use of a unique ID for each widget area is important for the parameters for the register_sidebar () function.

Show footer widgets in the theme

The code to display the widgets in the theme must be in the footer.php. You can copy the footer.php of the TwentySixteen theme into your child theme to overwrite the template file.

You can insert the following code using <footer> . With is_active_sidebar () we check whether the user has added widgets. With this we ensure that no unnecessary HTML markup is output if all widget areas are empty.

Add styling for footer widgets

With the first two steps, our footer widgets are already displayed successfully, but all below one another. To display the widgets in four columns, we need some CSS, which you can add to the style.css of your child theme.

Each widget column is assigned a width of 25% and a little space to the next column. With float all columns are displayed side by side and horizontally.

We use the standard styling of the widgets from the TwentySixteen theme, but you can of course adjust the colors to your liking with a little CSS code. Many themes use a dark background color to make the footer widgets stand out from the rest of the page.

Allow flexible number of widgets

We have created a four-column footer area with widgets. But what if the user only wants to display two or three widgets and doesn't need four columns? With a static number of columns, unwanted gaps arise in the layout.

One possibility is to create an extra theme option for different numbers of columns. Much more elegant, however, is the method that Leland Fiegel presents in his blog . A CSS3 technique is used with which the styling can be controlled based on the number of child elements.

This additional CSS snippet automatically adjusts the column width to the active widget areas:

Flexible widget number with flexbox

I'm a big fan of flexbox myself, which is why I prefer a flexbox solution instead of the sibling count method. Since Flexbox often produces bugs in some browsers, I wanted to mention both methods.

This CSS code can be used for a column layout with flexbox. Flex-grow ensures that the columns fill the entire width of the topic. It is necessary to specify the width as 25% so that all columns have the same width.

In my opinion, a flexible number of columns significantly improves the usability of footer widgets - what do you think of that? I look forward to your comments!