How to Use the Site Editor to Design WordPress Taxonomy Archives
I will be the first to admit that I'm a little behind with all the new features arriving in WordPress in “Full-Site Editing”, which is now called the “Site Editor”.
This is the new direction inside WordPress which allows you to design your whole site using Gutenberg blocks.
I was fortunate enough to speak with Brian Gardner from WPEngine a couple of weeks ago and he encouraged me to dig into the new Site Editor. In particular, he was enthusiastic about the Query Loop block which allows you to customize which posts to show in a block.
Because we get a lot of questions about the taxonomy pages in WordPress, I decided to try and design a taxonomy page using the Site Editor. Here's an overview of what I found. Please forgive me for any rookie mistakes.
- To start the process, go to “Appearance” then “Editor” in the WordPress admin menu.
- This leads to the main Site Editor screen. On the top of the screen, click the down arrow and choose the “Browse all templates” link.
- On this “Templates” screen you'll find different pieces of your WordPress site. These include the Homepage, the 404 page, single posts, and much more. You can redesign all of these pieces from this screen.
- We're going to click the “Archive” link you see in this image below.
- What you see in front of you is the design of your taxonomy archives. This is the default “Archive” template provided by your theme.
- We're going to try and modify this default view, so hover over the three vertical dots in the toolbar.
- Click the “Create Template part” link.
- Give your new template part a name. In my example, I'm calling it “Taxonomy”.
- Click the “Create” button.
- You are now on a screen where you can redesign the taxonomy view on your site. The Query Loop block provides many different kinds of settings. In the sidebar below, you can see options such as “Post Type”, “Columns” and “Order By”. If you wanted to do, you could swap out the Query Block entirely and replace it with one of the many other Gutenberg blocks that allow you to filter posts by taxonomy. In this image below, I've change the columns to “3”.
- On this screen, you can also customize, replace, or re-order all the blocks. You can drag-and-drop the blocks into a different order. You can use all the blocks that you normally see when using the Gutenberg editor to write posts. For example, you could remove the Query Loop block and replace it with a completely different block that displays posts according to taxonomy.
- In this example below, I've removed the post excerpt and changed the date format. This is the new layout for my taxonomy archives.
- Click “Save” to finish the process and put your new design live on your site.
Summary of my experience with the Site Editor
I came into this as a heavy user of Gutenberg for writing posts, but not having much experience in the Site Editor. The terminology and process of making these changes was confusing at first. I had to rely on my WordPress knowledge to guess that “Template Parts” was what I needed. However, these new tools always have a learning curve, and now I know where to go, I realize that making these changes isn't difficult.