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, just hanging??‍♀️, 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.

To follow this new series, check out the topic #Twenty Twenty Child Theme, or better yet, subscribe!

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 have a page with a list of all the Topics (tags) of this blog, displayed and grouped alphabetically.

The Topics’ Page I created, 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

My archive pages (for categories and tags) have 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”.

And I used to have it with two columns (featured image to the left; and title, excerpt and tags to the right)

Archive’s layout in big screens

A Custom Featured Image on Single Posts

Again, too big. For this kind of blog, where I want people to focus on my writing, the featured image covering almost the whole width and height of the screen didn’t feel adequate.

In the categories I’ve chosen to display featured images, now I have: a smaller one placed slightly to the left, with the caption to the right; and, if there’s no caption, the image moves to the center of the screen.[*]

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:

Screen shot from “43 Reasons Why”

Step By Step

Over the following posts, I’ll explain how to make the child theme I have running on this blog. In the meantime, you may want to do the following:

  1. From my Coding Toolkit, see how having a text editor for code, such us Sublime Text is game changing, and give it a try! (if you haven’t done it yet)
  2. Also from my Coding Toolkit, check out How to Create a Child Theme
  3. To see how easy working with a Child Theme is, check out this Jetpack tutorial on how to move the sharing buttons; we’ll apply those changes with a child theme, but you can start seeing how simple the process is.

[*] This post have been updated on Jan 21, 2021. For this new version of the Child Theme for Twenty Twenty, I’ve chosen not to display featured images and I’ve changed the bottom meta of my posts.

Laly York. Neurodivergent Gen-X writer / B.Ed. / Lawyer. Writing, coding and taking pics. From Jupiter, living in a soap opera; flying on the web with three blogs.

Any thoughts?