Discover in this tutorial how to get the footer to always be displayed at the bottom of the screen in a WordPress theme.
By default, most WordPress block themes display the footer right where the content ends.
That means that if there is little content on a page, the footer appears in the middle of the page leaving a lot of white space below it.
Like this:
If you don’t like this effect and prefer the footer to always stay stuck at the bottom, you can achieve this with a little CSS.
Steps to make the footer appear at the bottom of the page in a block theme
1. Add a custom CSS class to the content group
Go to the “Site Editor” and choose the template(s) where you want to apply these changes. Depending on the theme you will have different templates with different structures.
For this example we are going to use the “Page” template from the Twenty Twenty-Three theme. In the block list view you can see that it has 3 top levels:
- Header: the header
- Group: the content
- Footer
Choose the group block and go to the “Advanced” section and add content-group under “Additional CSS class(es)” of the block.
2. Add custom CSS to the theme
To add additional CSS to a block theme you need to go to the “Site Editor”, click on the “Styles” icon, then click on the 3 dots to bring up the “Additional CSS” option. Here are some screenshots to help you access it:
Once you are in this section paste the following CSS:
To see this and another 919 code snippets of this website, login or subscribe here.
With the previous snippet, you take advantage of the CSS flexbox features so that the footer is always fixed at the bottom of the page.
The result would look like this:
Simple, isn’t it?
This snippet should work with any block theme but if you see that in your case the text is too close (or separated) from the border you can modify the min-height value.
Conclusion
If you don’t like the footer to be “unhooked” from the footer, now you know how to force it to stick at the end using CSS.
Any questions? I read you in the comments.
And if you want to give me any suggestion for future tutorials, leave it in the contact form. Advantages of being a subscriber. 😉
