Customizing the Twenty Twenty Theme with CSS only

WordPress has released the Twenty Twenty theme, and there is plenty to customize it with CSS; which means … it’s time to stretch our fingers and have some fun!

I must say, I’ve been waiting for a theme like this; it looks great, it has a lot of options to customize it (including colors and templates) and it’s optimized to make the most of the “blocks;” but, since we always want another menu, thumbnails on the front-page! another color, “a footer in the header”, we say, “Let the coding, begin.”

I started developing a Child Theme for the Twenty Twenty Theme (which is what you’re seeing at this blog), expecting to change multiple PHP files; however, when the author wrote that he designed it “with the flexibility of the block editor at its core,” he wasn’t lying; except for one little tweak on my footer credits, every single change I made for this theme, I did it using CSS only. The grid on my cover? Blocks and CSS. ^[1]

Therefore, I’ll begin sharing cool changes you can achieve with nothing but CSS; plus, since I don’t know you yet :), I’ll guide you through an “ADHD / procrastination proof” process to install the theme, so you can work on it without having to set your blog as private or on maintenance mode, for no longer than fifteen minutes probably.

Tools, Wisdom, a Cheat Sheet and a Bonus!

There are three things I consider essential before customizing a theme: 1) having a WordPress and a Coding Toolkit; 2) creating a child theme; and 3) “knowing the theme” by going to the source.

Toolkits to Blog at WordPress and Learn How to Code

I have a Blogging Toolkit you may wanna check out. There you’ll find: useful links from “the source” which helped me to learn how to code; and the plugins I use and consider essential.

In my Coding Toolkit, you’ll see: a) basic concepts plus tutorials; and b) how I work: on a local host, using a Text Editor for Code and a software to upload my files to the server) Even though you don’t need these tools now, I strongly suggest you install – eventually – a Text Editor for Code; it’s game changing.

Why Do We Need A “Child Theme” and What Is It?

Second, to add changes to a theme, I always create a Child Theme; if you don’t know what it is, think about it as a patch (very easy to make) that you attach to a parent theme (in this case, the Twenty Twenty Theme)

Among its many advantages, there is one that’s very important: by adding changes through a child theme, when the parent theme gets updated, we won’t lose those we have made.

This is something you don’t need to do now to install the Twenty Twenty Theme, but if you’ve never heard about it, you may want to check it out.

Go to The Source!

Third, I am a “go to the source” advocate; unless you ask me to, I won’t get into the details that authors have already addressed; for example, I won’t write about how to customize the Twenty Twenty Theme “options”, because its author already did that; instead, I’m gonna give you the source, what you’ll really need to get familiar with, if you truly want to learn.

Why do I put emphasis on this? Because there are people copying and pasting information, just to get traffic, and many, many times they only confuse us; if you Google “how to create a child theme,” you’ll get 309,000,000 results! Why do they do that?  When I started developing child themes, I used to jump from one YouTube tutorial to another, until I found out that the nice people from WordPress have already developed a whole handbook about it! “The source”, another thing that’s game changing.

A Cheat Sheet for The Twenty Twenty Theme

That being said, I prepared a Cheat Sheet with everything you need to know about this theme, which includes: an index of the files, and index of the style sheet and every single link related to the theme (demo, details, download page, support forums); plus, you’ll get a bonus which I’ll explain later on. [2]

Twenty Twenty Theme: Common Questions

There are two questions I bet you’ll have about this theme: “Why can’t I add thumbnails to the front page? The demo shows them!”, and two, “Why can’t we have the option to use a hex color for links, buttons and accents?” Those questions will rise if you haven’t gone to the source and read carefully the details about the theme (I never do…) Therefore, I’m gonna save you some time with that 😉

FAQ 1: Thumbnails on the Front Page ^[3]

This is my all-time favorite; everybody wants thumbnails on the front-page. The Twenty Twenty Demo may confuse you a little bit, because its front page shows what seems to be posts with thumbnails.

However, if we read the details, we’ll see it doesn’t have “posts with thumbnails,” but, instead, a layout created with blocks. If you want to achieve that: 

1. Go to your home page to edit it, 
2. Create a “Columns Block” with two columns; 
3. Then, on each column: add an image, a heading, a paragraph (for the description) and a button (to use as a “read more” link) 

Can we have something like that but with “Latest Posts”? Yes, we can. That’s how my categories are shown on my front page; I’ll publish a tutorial to achieve this up next.

FAQ 2: Hex Colors for Links, Buttons, Accents

I got really mad when I looked at the customizing option for colors and saw a slider for the palette.

So, instead of reading “the Details”, I headed over the support forum… only to find out that, “I should have read, the details,” where it says, “The colors of the elements on your site are automatically calculated based on the background colors you pick. This ensures that the color contrast is always high enough to be accessible to all visitors.” Enough said. Always, go to the source. (I’ll try to keep it in mind too)

Can we change those colors one by one, with CSS? Of course we can; this is going to be the third tutorial I’ll publish regarding this theme.

Installing the Twenty Twenty Theme

With your WordPress latest update, the Twenty Twenty theme will be automatically installed; so what we actually need to do, is to “activate” it.

Do you know how to do this? Just in case, go to Appearance / Themes, and there you’ll have it; click on “Live Preview”, and you’ll see the nine options this theme offers.

You’ll also notice, that there are a few things you may want to do before activating the theme (without the need to close your blog, as I mentioned at the beginning); here’s a list:

1. Create a logo
2. Create the five menus the theme offers (and simply save them without assigning them to a “display location”)
   1. Desktop Horizontal Menu (with few links)
   2. Desktop Expanded Menu (with a bunch of links showing the structure of your blog)
   3. Mobile Menu (if you want; it’s a great option)
   4. Footer Menu (ie. About link, privacy policy, contact)  
   5. Social Menu (with your Social Links Menu)
3. Create a draft of your cover (I usually do this on paper)

My humble advice: first, work on the list; then, once you’re done, set your blog as private or on maintenance mode; finally, activate the theme, go through the first eight options (where you’ll get the chance to assign the menus you’ve created) and click on “Publish” to save your changes. 

Resizing Headings on the Twenty Twenty Theme, With CSS

For a blog, I believe the headings are too big. In the style.css of Twenty Twenty (which you’ll get when you download the theme), you’ll find the selectors under “2. Element Base” (lines 314 to 346); when I copied those lines and pasted them on the customizer, I realized that, just by doing so, the font sizes were smaller. Therefore:

Go to “Add Additional CSS”, copy and paste the following:

For the color font throughout my blog, I chose to change its color (it’s up to you)

/* ---------------------------------------------------------------- */

/*	1. Fonts
/* ---------------------------------------------------------------- */

body {
	color: #222;
}

To change the font size of the headings:

/* 1.a. Headings */
h1,
.heading-size-1,
.archive .heading-size-1 {
	font-size: 4.6rem;
}

h2,
.heading-size-2 {
	font-size: 3.2rem;
}

h3,
.heading-size-3 {
	font-size: 2.8rem;
}

h4,
.heading-size-4 {
	font-size: 2.4rem;
}

h5,
.heading-size-5 {
	font-size: 2.1rem;
}

h6,
.heading-size-6 {
	font-size: 1.6rem;
}

If you look at your widgets, you’ll see it would be nice to change their font size too:

/* 1.b. Widgets */
.widget-content * { 
		font-size:0.955em;
}

.widget-content a {
		font-weight:400;
}

Last but not least, the Drop Cap! By default, you may have noticed it doesn’t use the same font a paragraph does and, personally, I believe it’s too big too.

/* 1.c. Drop Cap */
.has-drop-cap:not(:focus)::first-letter {
	font-family: NonBreakingSpaceOverride, "Hoefler Text", Garamond, "Times New Roman", serif;
	color:#222;
	font-size:3.6em; /* taking two lines of the paragraph */
}

The color of the Drop Cap, is managed with that slider we mentioned before; so, now you have one of the selectors you’ll need to customize the accent colors individually. 😉

And that’s a wrap for today! But…, there is one more thing I wanna share with you.

How Sublime Text Comes in Handy (and the bonus explained!)

I mentioned at the beginning that using a Text Editor for Code (such us Sublime Text), it’s game changing; here’s one simple example: today you wrote 56 lines of code, and it’s barely the beginning!

On my CSS, for instance, I have over 1000 lines so far; so it could be very hard to keep track of what I’ve done with the Customizer (which is so thin!) This is one of the reasons why I use Sublime Text: to keep a local copy of what I did on my computer, arrange the content and even make a table of content.

With your Cheat Sheet, you’ll receive a css file (customizing-twenty-twenty.css) which holds the lines we wrote today. You can open it with a simple Text Editor (such us TextEdit on MacOS, always in “plain text”) but if you use Sublime Text it would be…, you know it: game changing.

So now, you can:

Step 1: In a few minutes, learn why Sublime Text is going to help you, download it and install it; it’s all in my Coding Toolkit / Sublime Text;

Step 2: Tell me how much fun you had today!

Useful links (as promised)

• How to create a Child Theme;
• The WordPress Theme Handbook;
• How to use the “Latest Posts Block”;

---

Updates (Jan, 2021)

[1] I don’t have the grid on my cover anymore, but you can still can create your own with “How to Create an Image Grid, with CSS, for Your Blog’s Front Page“

[2] Since many things changed since I published this post, I need to update the Cheat Sheet. It’s coming asap ?

[3] Adding thumbnails to the front page is now possible thanks to the “Latest Posts” Block