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!
Hello, thank you very much, I just didn't understand what exactly the footer.php should look like then (parent vs. child). I'm curious! LG, Anja
Hello Anja,
Depends on the theme. In my example I am using the footer.php from TwentySixteen. You can copy this into the child theme to overwrite it.
The code to display the footer widgets can then be inserted above the actual footer.
The complete footer.php should then look like this: https://gist.github.com/Netzberufler/4a7d024e7e4ac7823bb82bd2e23066d4
LG,
Brian
For comparison, here is the original footer.php of the parent theme:
https://github.com/WordPress/twentysixteen/blob/master/footer.php
Hello Brian,
I once created the footers exactly as you indicated here. However, I would like to have the footer widgets in the area and above the page info. Is it possible to do that somehow?
Hello Steven,
The footer widgets can be inserted anywhere by overwriting the relevant template file with a child theme.
Instead of the footer.php, the header.php can also be used.
LG,
Brian
Hello Brian,
thank you very much for these valuable code snippets. It also promoted understanding for the whole topic in me! Many Thanks.
With pleasure 🙂
Thanks for the great instructions! One of the first to implement 1 to 1 without problems was 😉
With pleasure! I am pleased that the implementation worked 🙂
Hello Brian,
thanks for the great instructions, it worked great!
Do you perhaps know a way to get the widgets to sort themselves among each other at low resolutions and (only) then to use the full screen width? On the smartphone in particular, the 4 widgets are otherwise quite squeezed next to each other.
Thank you in advance and best regards
Philip
Hello Phillip,
The solution for this are CSS Media Queries. This means that the width of the footer widgets can be set to 100% for smaller resolutions:
@media only screen and (max-width: 600px) {.footer-widget-column {
width: 100%;
}
}
The size of the break can be set as desired. Alternatively, two media queries with a width of 50% for tablets and 100% for smartphones can be used.
Many Greetings,
Brian