Post Formats Templates for the Twenty Twenty One Theme With CSS

The Twenty Twenty One theme gives us the option to select other formats than “standard” in the editor, but nothing changes when we do so. Why? Because its authors haven’t added the CSS needed to display post formats in single posts.

The authors of the Twenty Twenty One theme, have described it as “a blank canvas for your ideas and it makes the block editor your best brush,” and they were accurate. Hence, we’ll play with that canvas and flip the theme!

Post Formats on the Twenty Twenty One Theme

This theme have registered all the post formats available; the authors haven’t created templates for them nor declared any CSS for single posts, but if you check your archive pages, you’ll see they do have another style.

If you download the Twenty Twenty One theme, you’ll see among its PHP files that the archive pages display different excerpts for the post formats; and they have a cool function to do so.

For the purpose of this post, we’re going to customize the article element, without declaring a parent (single post, archive, search results, etc) which is related to the WordPress Hierarchy, so I’ll leave a note at the end.

Post Formats Layout: Before And After

If we check the elements of any post (what’s inside article) with the Developer Tools, we’ll find four elements: header, content, footer and author-bio (if you’ve chosen to display it)

In the following images, you can see the original layout and what we’ll do in this post using the CSS property grid:

On the front-end, here are the original layout and the result we’ll get:

Post Formats Templates With CSS and the Grid Property

In this example, I’m going to work with the post format “Quote”, being the container article.format-quote.

Step 1: Create a Grid Template for the Post Format

I’ve chosen to do the following:

1. to not display the div.author-bio for this example, but of course you can add it as the last row in the grid-template-areas.
2. to begin with the content instead of the title, because if we are to post a quote we’ll begin our speech with the quote, right?

article.format-quote {
	display:grid;
	justify-content:center;
	align-items:start;
	grid-template-columns: 400px 400px;
	grid-template-rows:auto;
	grid-template-areas:
		"fmain fmain"
		"fbottomleft fbottomright";
	padding-bottom:2rem;
	}
}

article.format-quote header {
	grid-area:fbottomleft;
}

article.format-quote .entry-content {
	grid-area:fmain;
	margin-bottom:4rem;
}

article.format-quote footer {
	grid-area:fbottomright;
}

article.format-quote .author-bio {
	display:none;
}

Up next, we’re going to fix the alignment of the title and what’s inside the footer (the date and the taxonomies)

/* Arrange elements at the bottom */
article.format-quote header.entry-header,
article.format-quote footer.entry-footer.default-max-width {
	border:none;
	margin:0;
	padding:0;
}

article.format-quote .entry-title {
	font-size:2rem;
}

How about removing the initial quote mark from the blockquote?

/* Remove initial quote mark from the block */
article.format-quote blockquote:before {
	display:none;
}

Finally, what’s inside footer doesn’t look good enough… so, we’re going to create a new template for it. In this case, it’s not necessary to declare the container as grid because (if you check with the Developer Tools) it already is one. So, simply:

/* A second grid template for the footer elements*/
article.format-quote footer {
	justify-content:center;
	align-items:start;
	grid-template-columns: 400px;
	grid-template-rows:auto;
	grid-template-areas:
		"fftop"
		"ffbottom";
}

article.format-quote footer .posted-by {
	grid-area:fftop:
}

article.format-quote footer .post-taxonomies {
	grid-area:ffbottom;
}

/* Fix alignment of this second template */
article.format-quote footer * {
	text-align:right;
	font-style:italic;
	min-width:300px;
}

To Bear in Mind

We haven’t declared a parent for article, nor a media query; and this, the media queries is something you may want to pay special attention.

I encourage you to download the theme, and check the style sheet to find all the media queries that have been used to make the theme responsive. Or, simply add all the snippets above inside a media query for big screens only, just to be safe and to have your new design up and running asap 😉