A Child Theme for the Twenty Twenty Theme

Choosing the “perfect theme” is one of the main worries among bloggers. I used to make tables comparing numerous themes, only to end up choosing one and then visiting another blog and go like, “Ugh! I don’t have that!”

Ok; I have ADHD and “satisfaction” is not in my dictionary; I’ll give you that. Still, satisfied or not, we’ll always need a makeover; styles change, the code behind the themes changes too; and from time to time we’ll have no other choice but to search for another theme, with all the time – and probably the money – that it takes.

What if we could stop doing that? What if we could choose one theme – which will be taken care of by someone else, for sure and for free – and we could make it our own?

That’s the freedom that creating a Child Theme gives us.

When I ended up at the WordPress Codex discovering the existence of the Child Themes, I thought, “All this time, wasting time on changing from one theme to another and wasting money purchasing themes, when I could have done it on my own.”

I also thought everybody knew about it; but one day I was at the WordPress Forum and I saw someone saying, “what’s a child theme?” And this is why I’m sharing this with you today: because if you don’t know what a child theme is, you are missing a lot.

You can have the theme, the layout you want, with a child theme, a will to learn and…, yeah, a little bit of patience. But I can promise you: it’s easy, it’s challenging, and you won’t regret entering this new world.

In this post, I’ll introduce you to the Child Themes and show you what I’ve done so far at this blog.

What’s a Child Theme?

You know what a theme is: Twenty Twenty is a Theme, and as such it can become a “parent.”

A Child Theme is like a patch you put on a parent theme, to add all the magnificent changes and magic you’d want to add. 

• The first step is to choose a parent theme; I always go with the latest of the Automattic Team, because the code in all their themes is clear as water (which helps us to learn) and they keep their themes are constantly updated;
• The second step is to create the Child Theme, which is explained beautifully at the WordPress Codex and more simply at my coding toolkit; it begins with two simple files, and it continues with a lot of fun.

What are the benefits? Plenty; you can have fun adding your changes, while the cool guys from Auttomatic work on the hard stuff keeping the parent updated; and, have I mentioned no more wasting of time and money?

A Child Theme for the Twenty Twenty Theme

These are some of the things I’ve done so far, with a child theme for the Twenty Twenty Theme.

A Topic’s Page Instead a Cloud Widget

Wouldn’t you like to offer you readers the chance to see all your topics organized? Instead of using the messy Cloud Widget, I created a page with a list of all the Topics (tags) displayed and grouped alphabetically.

The Topics’ Page is displayed in four columns in big screens, and then it adapts to fit any screen.

A Custom Editor

Yes; with a child theme, you can also customize your WordPress editor; in the Twenty Twenty Theme, for instance, the headings are too big for my taste and I need sans fonts for a better legibility while I write; so I changed it.

Here are two screenshots from before and after:

This is extremely easy to do; if you’ve already downloaded the Twenty Twenty Theme, open its folder and go to assets > css > editor-style-block.css, and in this file you’ll find the styles you see in the WordPress editor.

To modify this – as I’ll explain eventually in detail – all you’ll need to do is to copy that file, paste it in your Child Theme’s folder and add the changes you want. It is as easy as it sounds.

A Custom Archive Page

For the archive pages (for categories and tags) I made two main changes:

1. They show the posts in three columns in big screens and in one column in small devices;
2. They don’t have the word “Archive” (the archive’s prefix)

I also made another version where all the posts are listed, and every post is displayed in two columns: featured image to the left; and title, excerpt and tags to the right

A Custom Featured Image on Single Posts

The main goal for this design was to shrink the featured image, which by default takes almost the full width of the screen.

In the following screenshots you’ll see that the image is smaller and that if changes its position if there’s a caption or not. If the image has a caption, we get two columns; if it doesn’t, the image is centered.

The Bottom on Single Posts: Jetpack Sharing Icons and Numbered Pages

I moved the navigations links (number of pages when we split a post) and the Jetpack sharing buttons, right below where the content of the post ends. Here’s a screenshot: