How to create a page with post categories with pictures?

There are two scenarios to be covered in this article:

• the default page that appears once you have grouped multiple posts under the same category, and adding it to the menu to be easily accessible 
• manually creating a page that displays the post categories, along with a featured image

Default Category's Page

1

Pages with posts from a category are automatically created by WordPress. You just have to  group multiple posts under the same category.

2

Navigate to Posts > Categories and click to view the page that contains all the posts.

3

Add the category that contains the posts to the menu, by going to Appearance > Menus, clicking on Categories, selecting the desired category, and clicking on Add to Menu.

💡Result

📝 Note: Check this doc about adding a featured image to the post category.

Manual categories page

You can also manually create a page with post categories.

1

Navigate to Dashboard > Pages and add a new page.

2

Insert a title for this page. Make sure it's suggestive, as it will appear on the front end. ( e.g. Categories )

The next step is to create a grid section containing the name of the categories and their featured images. In order to do that, we will use the Otter Blocks plugin.

3

Add a Section block by clicking on the ➕ button and select the 2:1 layout.

📝 Note: Here is a dedicated section with the options of the Section Block.

4

In the first column, add the featured image of one of the post categories, using the Image block.

📝 Note: Select from the Media Library or Upload the featured image of the category.

5

In the second column, insert the name of the category, using the Advanced Heading block.

📝 Note: Here is a dedicated section with the options of the Advanced Heading Block.

Now that you have created these sections, you have to create a link to the categories page, which is automatically created by WordPress. You can do this in two ways:

• by adding a link to the title of the category

Select the name that you have typed, click the link button, type in the name of the category, and click on it once it appears ( or use the URL of the category's page ).

💡Result

• by adding a link to the featured image of the category

Select the image, then click on the three dots to open more options. Click on Edit as HTML.

In the code that appeared, after the figure class, add an <a href = "insert_the_img_src_here"> and don't forget to close it before the </figure>, by adding </a>.

💡Result

Once you have done this, repeat the steps to add all the post categories that you have. You can play with the section layouts and use its settings to create the desired categories page.

📝 Note: You can also create a custom layout for this page, to make it even more attractive, here is an example for the product categories page.