Thumbnails on the Front Page: A Magazine Layout

On my previous post, I mentioned how many of us want and need thumbnails on the Front Page, and how we can achieve it by using blocks and CSS. So, let’s do it!

Our result its going to look like this: we’re gonna have three categories displayed in columns; each category will show: the featured image of the latest post of each category, 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

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. In your Dashboard, go to Posts / Categories, copy the links of the categories you’re gonna use and paste them 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 (or, you can choose three images – of equal size – that represent your categories)

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, first, 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;

2. Below, add an “Image” block (the image from the latest post in that category)
3. Finally add a “Latest Post” Block, and:
   1. Select display post date (or not)
   2. Select the category you want to display
   3. Select number of items you want to display

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, remove margins from images and make the first post listed pop up.

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;} */

.front-cols-cats h2 a {
	color:#222;
}

.front-cols-cats figure {
	margin:0!important; /*I like it better this way; it's up to you*/
}

.front-cols-cats figcaption {
	display:none; /*just to be sure, eventually*/
}

/*For all the links listed*/
.front-cols-cats ul li a {
	font-size:0.8em;
	color:#333;
}

.front-cols-cats ul li {
	line-height:1em;
}

/*The dates*/
.front-cols-cats .wp-block-latest-posts__post-date {
	font-size:1.3rem;
}

/*For the first link listed*/
.front-cols-cats ul li:first-child a {
	color:#222;
	font-size: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-col-cat-one h2 a {
	color:#ff6600;
}

It’s up to you. I keep everything in black on white because I could procrastinate for hours trying to choose colors and backgrounds, and I have a serious case of ADHD.

Anyway, when you’re ready:

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

Eventually, you’ll simply need to “replace” the image for the latest post on each category, which takes seconds! Isn’t this cool?

What Else Could You Do With This Layout?

Well, you could:

1. Duplicate the Columns Block, to add more “banners” to your home page; if you want them to look different, change the class .front-cols-cats to, for instance: .front-cols-cats-middle. (Then of course, change headings, images and with one click change the category you want to display)
2. You can make one of the columns wider: simply click on them and change the percentage width starting from the first column; for instance: 25, 50, 25 (by default, they’re 33,33 each)

And, that’s a wrap!