WordPress 5.9: How to easily change blog posts list layout

So with WordPress 5.9, the theme customizer is gone (don’t worry it is still there for past themes, but not for new Block Themes) and we have the new Block Editor (for Block Themes), which has a lot of promise but needs some polishing. The “Twenty Twenty-Two” theme that comes with WordPress 5.9, is a Block Theme and is now being used on this website as of this posting.

The default style that the “Twenty Twenty-Two” theme’s homepage uses to list the blog posts is one-by-one in a vertical list. For me, I felt this wasted a lot of space and I wanted blog posts to be listed with two or three side-by-side in rows. So here are the steps to do just that. Don’t worry, no coding is needed to do make this change.

From list view to grid view

  1. When you’re in the “Admin” section of your WordPress website, on the left-side navigation go to Appearance > Editor (beta).
  2. In the upper left corner click the WordPress logo and the Editor navigation will expand. In the list under “Editor” click “Templates”
  3. On the right-side is a list of templates you can edit. Click the “Home” template.
  4. In the top navigation, click the “List View” icon (the one with three horizontal lines), which will open up a panel on the left-side. You may see a lot of items listed but don’t panic, this is just showing your homepage’s structure (showing which blocks you are using).
  5. In the “List View” column on the left side, find “Query Loop” and click it.
  6. In the center column, above your posts you’ll see a horizontal bar similar to the image below this text. You will want to click the “Grid view” icon as in the image. This will order your posts in a grid format.
  7. On the far right side are the Query Loop settings. If you don’t see the Query Loop settings, make sure you select “Query Loop” in the first column on the left side.
  8. In the Query Loop settings, go down to “Columns” and you can use the slider to change how many columns you want your posts to appear in.
  9. When you’re done making changes, make sure to click the “Save” button in the top right area, and you’re done.

In conclusion

That was easy, right? No coding, just using the UI to make your changes. This is huge for WordPress and I’m excited to see what they do in future updates. I think the UI still needs more work but this is a good start.

What are your thoughts about WordPress 5.9? Are you finding it easier to use than past WordPress versions? Did this quick how-to help you or just confuse you? Please let me know what you think.


Posted

in

by

Comments

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.