How To Set Up And Customize WordPress Twenty Twenty Theme

WordPress 5.3 has a new default theme called Twenty Twenty. Like all new things on the web, we get more space around everything.
But what else is new? We also get MASSIVE fonts! I’m talking GIGANTIC. Stand across the room and still read this kind of huge. Also, by default it gives you a narrow area to show all the content, and embedded fonts which waste bandwidth. Insert sad face here.

TL;DR: The WordPress Twenty Twenty Theme is pretty good. But it has too much empty space around everything, a tiny width for the content area by default, and ENORMOUS fonts! But we can fix it!

What is it?

The new Twenty Twenty theme is simple and focuses on usability in the WordPress Gutenberg Block Editor.

Kinsta has a nice write-up for the new theme. Check that out for some high level details about Twenty Twenty. As they put it:

“Twenty Twenty is a minimalist WordPress theme, with a single column layout.”

Problem

Single column layout.. with a very narrow column for text. Not ideal. Actually, most Gutenberg Blocks that I’ve tried can’t be changed to wide. So text and most other Blocks are using a single narrow column. That’s unfortunate.

The great thing about WordPress is it let’s you customize pretty much anything. So if you choose to use the new Twenty Twenty theme, you can improve it! That is, if you have the patience and/or skill.

In case you were wondering, this website is now using the new WordPress Twenty Twenty theme. It had a few modifications done to change things I didn’t like. Overall, it is a well done theme. But let’s just say there is room for improvement. Mainly the large fonts, the white space around everything, and the narrow area to display text and most content. Yes I could make certain blocks “wide” in the Block Editor. But not text, and I don’t want to bother with changing so many blocks.

Continue reading for my guide to improve WordPress Twenty Twenty.
If you don’t want to make all the changes manually, you can use my project on GitHub as a template to get started.

Note: Some of this will be technical and require you to edit CSS and PHP files. Be careful! It’s good to have some experience with WordPress.

Summary of what we will improve

• Reduce heading font size
• Reduce space around headings
• Increase width of text areas
• Remove Tags from bottom of Blog and Archive Page
• Delete Category from top of Blog Page and Posts
• Remove Excerpt from Blog Page
• Delete embedded fonts
• Remove Twenty Twenty 2.0 new font – Noto Serif

Here are a few before and after screenshots of these changes from one of my previous posts. Images are reduced by 50% (on a 1080p monitor).

Where did all the empty space go! So much better!
Okay, let’s get started.

Setup Twenty Twenty Child Theme

First, create a child theme for Twenty Twenty. Then add everything below into your child theme.
As previously mentioned, if you don’t want to do this manually check out my project on GitHub. It has everything that I discuss in this post!

Reduce WordPress Twenty Twenty heading font size

If the font size of the headings in the new theme bothers you. Let’s change it!

In your child theme style.css, or the CSS editor in WordPress (In Customizer, go to Additional CSS), add the following. If the font is still too large, reduce 6.4 and 4.4, etc even more.
This will only modify headings, on “wide” screens (non-mobile).

/* Smaller Heading Font please */
@media (min-width: 700px) {
  h1, .heading-size-1 { font-size: 6.4rem; }
  h2, .heading-size-2 { font-size: 4.4rem; }
  h3, .heading-size-3 { font-size: 3.8rem; }
  h4, .heading-size-4 { font-size: 3.2rem; }
}

Also copy your style.css to style-rtl.css.

Reduce space around headings

Next up, we will trim some of the extra space around the top of pages, posts, widgets, and the footer.

Again, in your child theme style.css (and style-rtl.css), or the CSS editor in WordPress, add the following.

/* Reduce white space around stuff */
@media (min-width: 700px) {
  .widget .widget-title { margin-bottom: 2rem; }
  .post-inner { padding-top: 3rem; }
  .footer-widgets-outer-wrapper { padding: 3rem 0; }
  #site-footer { padding: 3rem 0; }
}
.singular .entry-header {
  padding: 2rem 0;
}
body:not(.singular) main > article:first-of-type {
  padding: 2rem 0 0;
}
.archive-header {
  padding: 2rem 0;
}
.error404 #site-content {
  padding-top: 2rem;
}

Increase width of text areas

The Twenty Twenty Theme uses a narrow template. Some blocks can be changed to “wide” but not text. If you don’t like the narrow text area or don’t want to manually change blocks in WordPress, then this change is pretty easy. You can change this right in the WordPress Admin area using “Bulk Actions”.
Make this change to both Pages and Posts if you want wide areas in both by default.

Repeat the same steps for your Posts using the Bulk Editor.
Remember that any new Post or Page will need this changed.

Remove Tags from bottom of Blog and Archive Page

This change will eliminate the list of tags used in a post from the bottom of the Blog Page and also the Archive Page for every post.

Again, in your child theme style.css (and style-rtl.css), or the CSS editor in WordPress, add the following.

/* Hide Tags from Blog page */
.blog .post-tags.meta-wrapper {
  display: none;
}
/* Hide Tags from Archive page */
.archive .post-tags.meta-wrapper {
  display: none;
}

Delete Category from top of Blog Page and Posts

I don’t like having the category at the top of the Blog Page and at the top of the post. So let’s remove it! It’s pretty easy actually.
Just edit your functions.php file to add this:

add_filter('twentytwenty_show_categories_in_entry_header', '__return_false');

Remove Excerpt from Post

WordPress Twenty Twenty wants to show an except at the top of every post. That’s a problem for me. All of my previous posts have an excerpt that’s shown on the Blog Page. I want to keep that, but remove the excerpt from the top of the Post. Maybe some day they will add an option for that. Until then, we need to fix it our self.
To change this, copy the file template-parts/entry-header.php into your child theme and edit line 59 to add && false like so:

if ( has_excerpt() && is_singular() && false ) {

This will always evaluate the if statement to false.
Another option is to just remove that section of code.

Don’t forget, there’s a project on GitHub with all of these changes already done. So you can use that for reference.

Delete embedded fonts

The WordPress Twenty Twenty theme has embedded fonts that can’t be easily removed (yet).

Why remove the fonts? Because it adds 450kb of unneeded files to your website. Speed is important for a website. A smaller site is a faster site, and a faster site is always good! Don’t believe me? Ask any search engine that question.
Side note: Want to know more about making WordPress faster? Check out the Guide to WordPress as a Static Site. And also this great post by Mark Saric.

Back to the fonts. Until this issue is resolved, the easiest work-around to remove the included font is to zero out the file. To do this, log in to your web server where WordPress runs. Go to the Twenty Twenty main theme and empty the font files.

$ cd ~/wp-content/themes/twentytwenty/assets/fonts/inter
$ > Inter-italic-var.woff2
$ > Inter-upright-var.woff2

This isn’t a very good option since the files will be restored when the theme is updated. Let’s hope that issue is fixed soon so it can be removed properly.

Another option is to edit the main Twenty Twenty theme’s style.css and style-rtl.css, but this is also not a good option since changes there will be overwritten when the theme is updated.

$ cd ~/wp-content/themes/twentytwenty/
$ sed -i 's,src: url(./assets/fonts/inter/Inter-upright-var.woff2) format("woff2");,,g' style*.css
$ sed -i 's,src: url(./assets/fonts/inter/Inter-italic-var.woff2) format("woff2");,,g' style*.css

This removes the fonts from being embedded, on lines 265 and 273 (for current version of the theme in WordPress 5.4) of your style.css and style-rtl.css files.

Remove Twenty Twenty 2.0 new font – Noto Serif

The update for Twenty Twenty 2.0 added a new font which is much larger than the previous font. And this is used because the above bloated embedded fonts are removed!

To remove this new font, called “Noto Serif”, edit your child theme style.css to add:

.entry-content {
  font-family: NonBreakingSpaceOverride, "Hoefler Text", Garamond, "Times New Roman", serif;
  letter-spacing: normal;
}

Conclusion

Now you have customized the Twenty Twenty theme!

It’s now easier to read and navigate because the headings don’t take up the entire page and your text isn’t squished into a tiny space. Goodbye massive fonts! The category was removed from the top, tags were removed from certain pages, and the excerpt is also gone from the top of every post! Lastly, it is also faster because the embedded fonts are removed.

Want to know more about making your WordPress website even faster? Check out the Guide to WordPress as a Static Site.