How to Customize the Twenty Twenty Theme With CSS – Full Guide

Since its released in 2020, the Twenty Twenty Theme is still one of most downloaded “classic themes” from WordPress. There is plenty to do with CSS and by making the most of the use of the WordPress blocks; so much that we can change the look of it to make it our own.

We can, for instance, from the simplest things to the coolest:

• add our own hex colors
• remove the so-called “blank spaces”
• expand the width
• hide the archive’s prefix and customize it
• make the tags look more fancy
• center the logo and menu, with different styles
• have full width widget areas
• have a sidebar!
• display posts in certain categories in different ways

All these things we can do look exiting, but there are a series of steps to follow so that we can customize this, and any classic theme, efficiently. And that is what we’ll do in this guide:

1. Discover and comprehend the main features of the theme
2. Come up with a nice way to keep our work organized
3. Grab some coding to tools to see what else we can find in: the theme’s files (which don’t bite) and on the front end (what people see once you hit publish)
4. Stretch our fingers to play with original designs

If you’re wondering how to add hex colors, how to “remove blank spaces”, there are basic concepts you need to know; and once you do, you’ll realize how easy it is to find all the selectors you need to flip your theme with CSS.

Steps to Customize the Twenty Twenty Theme

Here is how we are going to work: we are going to split the fun in two parts:

Part A: The Theme and The Tools We Need

This first part holds the following sections:

• Diving Into the Theme (5)
• Following the Puzzle (6)
• Climbing the Tree (6)

The goal with these first sections, is that you learn how to study the theme and start practicing with the tools you need to code like a pro.

This is the core of this guide; so please, take your time to reflect on every post.

If you commit to this first part, you’ll learn how to customize the Twenty Twenty Theme on your own.

At the end of it, you’ll have a great resource that sums up the study, so you don’t have to come back here to recall “How did I find that selector?”

Part B: Playing With CSS

On the second part, you’ll find two sections:

• Designs (Part 1) Cool CSS Tweaks
• Degins (Part 2) Layouts

The tutorials are very straight forward; they have:

1. “before and after” screenshots
2. notes (if necessary)
3. the snippets
4. resources (links to CSS tutorials regarding each topic)

I’ll be giving you pretty much everything all users look for; however, please do take your time to reflect as well.

The final result, is going to be up to you.

A Couple of Things to Bear In Mind

1. We’ll always begin our examples with an empty customizer; I am going to pretend you haven’t added anything yet because if you’ve added an important rule on something I’m trying to show you how to customize, you won’t see the result.
2. I encourage you to create a backup.css of the examples (I’ll show you how), where you can even write your notes
3. The index of this guide, we’ll be unveiled as we move forward; Why? Because if you jump to a post skipping one or many, you may miss something you need from a previous one.

Shall we begin?