If you’re working on a content-heavy website, category archive pages are essential for organizing your posts. Recently, I worked on a project that required creating visually appealing category archive pages using GeneratePress Premium and GenerateBlocks. In this guide, I’ll walk you through how to build custom category archives that look great and function well.
The Problem with Default Category Pages
Out of the box, category archive pages in WordPress often look plain or inconsistent with the rest of your site. If you’re running a blog and want each category to look polished and professional, you need to customize these pages. In my case, the default category page looked terrible and didn’t align with the rest of the site’s design.
So let’s go step by step on how to create a category archive page that works seamlessly with GeneratePress Premium and GenerateBlocks.
Step 1: Setting Up the Blog and Categories
In my starter site, I already have a blog page set up with a bunch of dummy blog posts. I’m using GenerateBlocks’ query loop to display the latest posts on the blog page, with category links listed at the top for navigation. The categories are dynamically pulled in as a list of terms, with links to the respective category archive pages.
However, when you click on a category (like “Medical”), the default category archive page looks far from ideal. We want the category archive page to match the polished look of the main blog page.
Step 2: Create the Category Archive Template
1. Enable Elements in GeneratePress Premium
Start by going to the WordPress dashboard and navigating to Appearance > GeneratePress > Modules. Ensure the “Elements” module is activated.
2. Create a New Element
Next, go to Appearance > Elements and create a new element. For this example, name it “Category Archive.” On the right-hand side, under “Element Type,” select Loop Template since we’re creating a query loop to dynamically display posts from specific categories.
Step 3: Building the Query Loop
1. Designing the Layout
Once inside the loop template, insert a container and an inner container. I used my global styles to give the outer container a medium size for consistency across the site.
Now, add a Query Loop block and choose a layout. I selected a two-column layout to mirror the blog page design. For simplicity, I removed the excerpt and adjusted the grid width to display three posts per row.
2. Adding Dynamic Categories
Next, I added a block to display the post categories dynamically. Since this is a category archive page, I chose to show the category name but didn’t add a clickable link (we’re already on the category page).
For styling, I used a dark orange color, set the font weight to 600, and transformed the text to uppercase with some letter spacing for a clean, bold look. I also added a small bottom margin for spacing.
3. Aligning the Date
To keep the design consistent, I made sure that the post date sticks to the bottom of each card. First, I set the post template container to “display: flex” with a column layout and adjusted the height to 100%. Then, by setting the top margin of the date to “auto,” I ensured the date always sits at the bottom of the card.
Step 4: Setting Up the Category Archive Display
1. Assign the Template to Categories
Once the layout is ready, we need to assign this template to all category archive pages. Under “Location,” select Post Category Archive so the template applies to all categories.
2. Inheriting the Query from the Template
To make sure the category archive pages display the correct posts, go back to the Query Loop block and toggle on Inherit Query from Template. This tells WordPress to automatically pull in the relevant posts based on the category being viewed.
Step 5: Adding a Dynamic Page Title
To enhance the user experience, let’s add a dynamic H1 title at the top of the page. Insert a headline block at the top, enable dynamic data, and select List of Terms. This will pull in the current category name and display it as the page title.
Step 6: Adding Pagination (Optional)
If you have a lot of posts, you might need pagination. By default, WordPress shows a limited number of posts based on your Settings > Reading configuration. If you want more posts on the archive pages, adjust this setting. For example, if you only want six posts per page, set that in the settings and then add pagination to your query loop.
You can add pagination directly in the query loop block by clicking Add Pagination. Now, users will be able to navigate through multiple pages of posts within a category.
Final Thoughts
Creating custom category archive pages in GeneratePress Premium using GenerateBlocks is a game changer for content-heavy websites. The key points to remember are:
- Choose Loop Template when creating the element.
- Ensure you enable Inherit Query from Template so the posts load correctly.
- Always check your blog settings under Settings > Reading to control how many posts display per page.
Once you follow these steps, your category archive pages will look consistent with the rest of your site and offer a polished experience for your visitors.
Thanks for reading, and happy designing!
