The Twenty Twenty Two Theme is Coming With WordPress 5.9 And We Need To Start Practicing with the Twenty Twenty One Theme

Big changes are coming for the WordPress Themes; so, we’ll start practicing with the Twenty Twenty One Theme.

How do you like playing with CSS and that gorgeous Twenty Twenty Theme that makes it so easy to learn! “Like a lot” Right? Well, say “bye-bye”

I’ve been working a lot on that theme, so you may wonder “Laly; Why did you stop posting about it?” I’m so glad you asked! I stopped because I’ve resumed a career to become a college professor 🤓, nkotb.blog has been draining me, and I have two cats… and ADHD! So, 🤫

From an Idea, To Grid, To “WTH”

I started developing a couple of courses (which are going to be super cheap!) so you can customize the Twenty Twenty Theme from top to bottom, with a nice “learning process structure”. And, as I was doing so, I found out that now it’s all about “grid” instead of “flex.”

So I thought, “Wait; we need to make the courses with the latest” (by “we” I mean my brain and I; “not the same!”) And thus I realized the Twenty Twenty Two theme had to be in the cool guys’ schedule and… it turns out it not only is scheduled for Dec 14, but it also comes with a “WTH” (please notice I didn’t use an “F”, and also pretend I did.)

Twenty Twenty Two Theme: What to Expect

The Twenty Twenty Two theme is going to be released with WordPress 5.9 on December 14. I’m not gonna reproduced everything that’s been already said (why do bloggers do that?); but I am going to leave you the links at the bottom so you can dig further into what I’m saying.

So! Where the “WTH” comes from? It comes from the fact that the upcoming WordPress themes are going be all about “blocks;” which is cool, for “people” … but for those of us who enjoy learning to code with CSS, the game is about to change “big time.”

Kjell, when he introduced the Twenty Twenty Two Theme, wrote,

“To take advantage of these new customization features, Twenty Twenty-Two will be built for Full Site Editing first. The theme aims to use as little CSS as possible: our goal is for all theme styles to be configured through theme.json and editable through Global Styles.”

Kjell Reigstad, Oct 6, 2021

The theme is looking great in his intro and there also a demo you can check out plus a GitHub page if you’d like to contribute; but, once again, for those of use who are used to play with CSS and WordPress template tags (PHP) and else, we’ll need to start learning about what’s coming.

Mastering the Twenty Twenty Two Theme: Practice With the Twenty Twenty One Theme!

I remember a thread we had here with @Iqbal about using or not the Twenty Twenty One theme; I said, something like “not gonna happen here” and now I feel like… 🤦🏻‍♀️

So, I developed a child theme in a couple of days for the Twenty Twenty One theme. I’d like to emphasize the “couple of days” because there’s a lot to fix. Still, you can see how it looks like at nkotb.blog (don’t forget you can use the Inspector to see my style sheet and else 😉)

And, one of the issues I’m encountering is that …, well, what the cool guys are saying: there’s not much to do with CSS or “a lot” (*) and we must rely on functions and “the blocks!”

Here are a couple of examples.

Active Links in Twenty Twenty One Theme

We’re use to use .entry-content a to change the active links of our posts; now, if we do so at the Twenty Twenty One Theme, all the links across the whole site will change, even the ones inside blocks (block columns, latest posts block, etc)

In order to take care of this, we must define the colors of “everything;” meaning, the active links in every single block.

For instance: on nkotb.blog‘s cover, I have two groups of latest posts; one doesn’t have a background color and another one has, which is something to bear in mind.

‼️ Remember CSS is “cascade style sheet”, so as long as you follow an order, the lines below are going to override the lines that are above, without the need of using the important rule 😉

.entry-content a {
	color:#326891;
}


.wp-block-latest-posts a {
	color:#333;
}

/* and if the block has a background color, black for instance */
.has-background .wp-block-latest-posts a {
	color:#fff;
}

(*) From little CSS to a whole lot of trouble; that’s the example.

How to Remove the Prefix “Category and Tag” in Archive Pages

I still wonder, Why do they keep adding the prefix “Category:” and “Tag:”? We all want to remove them!

Anyway… In the Twenty Twenty One, there’s no selector to do so, but! there’s a new hook: get_the_archive_title_prefix() which allow us to get rid of the prefix; it was actually introduced with WordPress 5.5.

If you’re looking to change this (I’ll publish a little tut on another post), all you need to do is to add to your functions.php the following:

// Remove Category and Tag Titles
// https://wordpress.org/support/topic/remove-category-titles-3/
add_filter('get_the_archive_title_prefix', 'my_custom_get_the_archive_title_prefix');
function twenty_one_get_the_archive_title_prefix($prefix) {
  if ($prefix === 'Category:' || $prefix === 'Tag:') {
    $prefix = '';
  }
  return $prefix;
}

To Sum It Up

Things are changing in a big way, and if you want to continue having control of your blog / website, you’ll need to stay up to date with the new features.

This doesn’t mean you need to run and change your theme, and develop a child theme in a couple days like I did (it’s insane; I have ADHD 🥴) It simply means: start reading, subscribe to WordPress.org newsletter and start practicing!

I strongly encourage you – if you haven’t done it yet – to instal a local host environment in your machine, install WordPress and create a child theme for the Twenty Twenty One Theme. The software you need is free and installing everything is very easy.

And… that’s a wrap!

Happy coding!

PS: I missed you guys!

Resources:

WordPress 5.9 Development Cycle. https://make.wordpress.org/core/5-9/

Reigstad K (2021) Introducing Twenty Twenty-Two

Twenty Twenty Two Demo, in the making. https://2022.wordpress.net

Learn how to use get_the_archive_prefix() from WordPress Code Reference

Cool “Grid” Guide. https://css-tricks.com/snippets/css/complete-guide-grid/

One reply on “The Twenty Twenty Two Theme is Coming With WordPress 5.9 And We Need To Start Practicing with the Twenty Twenty One Theme”

Hi Laly, thank you for mentioning my name on this post 🙂

Now I am using Twenty Twenty One (after several times change between Twenty Twenty and Twenty Twenty One) on my primary blog (diakhir.blog) which is hosted on WordPress.com. Now I am eagerly waiting for the Twenty Twenty Two.

I agree with you that WordPress is changing in a big way, and if we want to continue having control of our blog / website, we’ll need to stay up to date with the new features.

Any thoughts?