Thumbnails on the Front Page for the Twenty Twenty Theme: Now Easier than ever [Update]

Before WordPress’ latest update, the “Latest Post” block didn’t allow to display featured images; so we achieved the result shown in the Twenty Twenty Demo by using columns, images and the block in question. Now, it’s easier than ever.

What Are the Options?

The first easy choice is to display one category’s posts using the block’s “Grid View”. To do that, simply follow these steps:

1. Click on the “+” button to add a “Group” block
2. Inside that group, add:
   1. a “Heading” block; then, write the name of the category you’re going to display and – from the Settings sidebar – click on “Advanced” and write custom-front-page-heading to eventually customize it with CSS;
   2. a “Latest Post” block; then, choose the “Grid View”; and – from the Settings sidebar – select your options (the category you want to display; to display featured image and size; whether to display date or not, etc)

Here are some screenshots of the steps; bear in mind the result doesn’t have any CSS applied.

The second choice, is what I shared on my previous post to have a magazine look and what we are going to re-do today; we’ll have three categories displayed in columns; each category will show: the featured image of its latest post, the link of that latest post in a bigger font size, and a few more posts listed below.

Note: With the Twenty Twenty Theme, by default, columns on desktop will be displayed in a row, and in one column on small devices.

Getting Ready (Remains the same)

You’re about to modify your Home Page, so you could: 1) set your blog on maintenance mode; or 2) since you can achieve this new cover in 15/30 minutes or so, simply take a moment to do the following:

1. Decide: Which three categories are you going to display?
2. Go to Categories and copy and paste the links (of the categories you’re gonna use) in a Text Editor;
3. Check the following: Do the latest posts of those categories have a featured image of equal size? If not, you may wanna fix that; just in case.

If you followed this tutorial previously, you’ll notice one thing has changed: on item 3, we don’t need another image; we simply need every post with its featured image.

If you’re not going to close your blog for this, take the following three steps without updating the page.

Step 1: Create the Layout With a “Columns Block”

Go to your homepage to edit it, and:

1. Add a “Columns” Block;
2. Select “3 columns; equal split;”
3. Click on the border of the whole block, and under “Advanced”, add the class .front-cols-cats (without the dot)

4. Finally, from the toolbar, click on “Wide Width” or “Full Width” (whatever works best for you)

Step 2: Blocks on Each Column

First, we’re going to add a class for every column. Click on the first column and in “Advanced” add the class: .front-col-cat-one. Repeat the same with the two remaining columns, but with the classes .front-col-cat-two and .front-col-cat-three.

Note: Adding classes to every column is not necessary, but it’s useful. Remember to not add the dot for the classes in the “Advanced” CSS.

Then, we need to add three blocks on each column. So, click on your first column and do the following:

1. Add a “Heading” Block; it will automatically be set heading as H2; inside:
   1. Write the category title;
   2. Select the title you wrote and,
   3. Add to it the link you copied;

Note: If you followed this tutorial previously, steps 2 and 3 (in this section) are going to differ. So, simply delete those two blocks you’ve inserted in those steps (the “Image” and the “Latest post” block) and follow these new steps.

2. Below, add a “Latest Post” Block, and
   1. Select your category
   2. Select to display one post only, with the date and featured image medium size
3. Duplicate that block and,
   1. Hide the featured image
   2. Select number of items you want to display (at least four)
   3. in “Advanced” give this block the class first-post-hidden

Repeat the steps inside the remaining columns.

Step 3: CSS Fun Time!

Without updating your page, simply:

1. Click on “Preview”, and another tab will open showing you something like this:

We’re going to:

• Remove the underline from the heading;
• Change the color of the links and the font size;
• Hide the first post on the second list of each column ?

2. Click on “Customize” to work on CSS
3. Add the following code:

/* -------------------------------------------------------------------------- */
/*	2.a. COVER: Categories in Columns
/* -------------------------------------------------------------------------- */
.front-cols-cats a {
	text-decoration:none;
} /*If you haven't already set for your whole blog "a {text-decoration:none;} */

/* New heading size if you haven't change it yet */
.front-cols-cats h2 {
	font-size:1.2em;
}

/* New colors on headings and links */
.front-cols-cats h2 a,
.front-cols-cats a {
	color:#222;
}

/*For the lists in each column */
.first-post-hidden li:first-child {
	display:none;
}

.first-post-hidden li a {
	font-size:0.8em;
}

.first-post-hidden li {
	line-height:1em;
}

Make it yours! With the classes you added to your columns, you can add more changes to each one of them; for instance, a different color for the heading on the first column:

.front-cols-cat-one h2 a {
	color:#ff6600;
}

When you’re ready:

4. Click on Publish and close the tab;
5. You’ll be at your Home Page ready to click “Update”.

Now tell me, wasn’t this super easy and fun?