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

This wonderful theme comes with two widgets areas in the footer, which are technically called “sidebars”. So, how about getting more widgets areas for the Twenty Twenty Theme 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; on small devices, you’ll see the widgets in rows, in order you’ve added them.

How to Create More 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!

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?

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: its style sheet and PHP files.