How to Create More Footer Widget Areas For the Twenty Twenty Theme, With CSS

With nothing but CSS and a fun time, create four columns for the footer in the Twenty Twenty Theme.

The Twenty Twenty Theme comes with two widgets areas in the footer, which are technically called “sidebars”. So, how about getting more with CSS only and achieve this:

It looks good, right? We are going to use the flex property to split the areas in columns (each area, in two columns), and the resulting four columns will appear only on Tablets and bigger devices.

How to Create Widget Areas (a Quick Intro)

To get more areas we could:

  1. Register more sidebars in our functions.php file (if we’re working with a Child Theme), or,
  2. Tweak it with CSS only, using the flex property.

Since we haven’t started developing our child theme, we’ll go with option “2”

Step 1: Adding Widgets

For this example, I added three widgets on each area; to try a little bit of everything, I added: an Archives Widget, a Recent Posts Widget and a Categories Widget, on the first footer area; and on the second, an Image, a Custom HTML and a Text widget.

Without our CSS, the Twenty Twenty Theme will show those widgets like this:

And, since we’re here is because we don’t like that. So, let’s fix it!

To keep track of how the widgets will be behaving, I numbered them.

Step 2: Adding CSS

First, we are going to:

  • use the flex property to split each widget area in two columns
  • resize the fonts
/*Four columns in the Footer*/
/*For Tablets and bigger devices*/
@media (min-width:48em) {
.footer-widgets.column-one,
.footer-widgets.column-two {
	display:flex;
	flex-wrap:wrap;
	justify-content:flex-start;
	align-items: flex-start;
}

.footer-widgets.column-one > *,
.footer-widgets.column-two > * {
	min-width:49%;	
	max-width:49%;
	margin-top:0;
	margin-bottom:1em;
	padding-right:1em;
}

	/*Fonts*/
	.footer-widgets h2,
	.footer-widgets a,
	.footer-widgets p,
	.footer-widgets .post-date {
		font-size:1.6rem;
	}
	
	.footer-widgets li {
		line-height:2rem;
	}
/*Note: Special considerations will go here*/
}

After that, we’ll see this:

As you can see, it doesn’t look like the result I showed you at the beginning; here are the problems (for the widgets we used):

  • the size font of the post count in the Archives and Categories remain big;
  • there is blank space between the two widget areas (widgets 1.2 and 2.1);
  • the image (2.1) overflows;
  • the Categories widget (1.3) ended up at the bottom, and
  • how about making the “License” widget wider?

So now we are going to take care of those “special considerations”

Please note that this second list of snippets, must be inside @media (min-width:48em) {}, that’s why I left a note in the previous list of snippets.

/*Special considerations*/
	/*to fix size of the post count*/
        .footer-widgets .widget_archive li,
	.footer-widgets .widget_categories li.cat-item,
	/*font size in custom html*/.footer-widgets .custom-html-widget {
		font-size:1.5rem;
	}
	
	/*to reduce the space between 1.2 and 2.1*/
	.footer-widgets .widget_recent_entries {
		padding-right:0;
	}
	
	/*to make sure images don't overflow*/
	.footer-widgets figure  {
	max-width:90%;
	margin:0;
	}
	
	/*to bring the categories block up*/
	.footer-widgets .widget_categories {
		margin-top:-12em;
	}
	
	/*to make the last widget in the second column wider*/
        .footer-widgets.column-two div:last-child {
		max-width:100%;
	}

After that, you should see the following:

Wasn’t that easy?

Give me a hight-five ✋🏻 with a like or a comment, or – better yet – subscribe for more!

On a Final Note

This was a “quick fix;” I came across another comment on the Twenty Twenty Forum asking for this, and I thought it could be something you’d really enjoy. I haven’t apply it to my blog yet.

There’s a lot you can do with flex but it’s tricky and you’d need to get familiar with it and specially with your theme, with your CSS style sheet. So, you may want to check this out:

  • First time here? Learn what you need to customize the Twenty Twenty Theme with CSS;
  • Using Flex: in my Coding Toolkit, find a Complete Guide to Flexbox;
  • Custom colors: in a previous post, I shared with you how to customize the hex colors with CSS;
  • How to find more selectors? If you are not familiar yet with HTML and CSS, a selector is, for instance, .widget_categories to customize the Categories Widget. If you add a widget we didn’t use in this example, check out how to use the Inspector (a funny little thing you’ve got in your browser) so you can find them on your own.

And, that’s a wrap!

If you have more ideas you’d like me to post, hit me with a message on my Contact page 😊

1 reply on “How to Create More Footer Widget Areas For the Twenty Twenty Theme, With CSS”

Any thoughts?