How to Create a Custom One in 2022

18Apr 2022 by Moonthemes 451 Comments

Trying to create a custom WordPress category page but not sure where to start? 🤔

If you run a blog, it’s essential to have your posts organized into categories. This layout makes it easier for readers to find specific topics on your website.

However, a default category page can look unattractive or clash with your overall design. Therefore, you might consider creating a custom WordPress category page to make this content more visually appealing.

💡 Fortunately, you can customize your category pages without touching a single line of code. You can build your template using the native WordPress Site Editor (AKA Gutenberg) or one of the several popular page builder plugins, then apply your design across all your categories.

In this post, we’ll show you two different ways to create a custom WordPress category page:

  1. Using the native WordPress editor, which is 100% free. However, this only works with block-enabled themes. 🎨
  2. Using Beaver Builder and Beaver Themer, which is a paid solution. You can also use a similar approach with Elementor Pro, Divi Builder, and many other page builders. 🏗️

1. Use the WordPress Site Editor

The WordPress Site Editor is a new feature that’s constantly being improved. It enables users to edit different parts of their sites with blocks. In fact, it works similarly to the Block Editor – just applied to your theme templates (like the category page).

👉 Note that the Editor only works with block-based themes, such as Twenty Twenty-Two. Also, this feature is still in beta, but you can access it (as long as you’re using a compatible theme).

Most WordPress themes will have a default category page. However, you might choose to tweak the design to align with the look and feel of your site. You may also want to add some features to your category page, such as a search box or a video.

Let’s look at creating a custom WordPress category page using the Editor!

Step 1: Open the archive template in the WordPress Editor

To get started, navigate to Appearance > Editor in your WordPress dashboard. If you don’t see this option, it means that your theme is not block-enabled yet. If you don’t want to switch themes, you might want to use the next method instead.

Open WordPress Site Editor to create a custom WordPress category page

Selecting this option will launch the Theme Editor.

The WordPress Site Editor

As you can see, the Editor enables you to customize different templates, such as your header and footer. To access all the templates, click on the WordPress logo in the top left corner and select Templates. This will show you a list of templates available with your theme:

Templates List in the WordPress Site Editor.

You also have the option to add a new template. For this tutorial, we’ll be editing the Archive page. This page displays your post categories, tags, and other archives.

If you click on Archive, you’ll be redirected to the Editor, where you can start customizing the page:

Editing the archive template to create a custom WordPress category page

The page will include the archive title and a list of posts filed under that category by default. Let’s look at how to customize these elements.

Step 2: Customize the template

The Archive Title block displays the category’s name (e.g., Digital Marketing). The Editor enables you to customize the appearance of this element:

Customizing the archive title

For instance, you can change the text color, typography, and dimensions. You can also add a custom CSS class to personalize the category title further.

Your archive page will also contain a list of all posts falling under the selected category. If you’re using the Twenty Twenty-Two theme, the list is displayed in the Query Loop block:

The Query Loop block

You can change the layout of your posts from the Settings panel. For instance, you can customize the width of the feed and change the color of the text, background, and link:

Customizing the Query Loop block

If you want to edit the individual elements within the Query Loop (such as the post excerpt or date), you just need to click on them:

Editing the post excerpt in the Query Loop block

Additionally, you can add more blocks to your category page. For instance, you might include the Post Author block:

Adding the Post Author block to the Query Loop

👉 Note that you don’t have to follow this process for each post inside the Query Loop. You can make your changes to one post, and they’ll automatically be applied to all of them.

When you’re ready, you can go ahead and save your template. Your changes will affect every page that uses your template, including individual category pages.

2. Use a page builder plugin

As we have seen, the WordPress Site Editor enables you to make changes to your archive template (which will affect your category page). However, you might not be using a block-enabled theme, or you might be looking for more customization options. Alternatively, you might prefer to build your category page from scratch.

Fortunately, there are several page builders that help you build a custom WordPress category page. For this tutorial, we’ll be using Beaver Builder and the Beaver Themer add-on.

👉 Note that you’ll need the plugin’s premium version to create your template.

You can use a similar approach with Elementor Pro, Divi Builder, or any other page builder that offers theme building functionality.

Here’s how it works in Beaver Themer.

Step 1: Create a new template

Once you’ve installed and activated the plugin and the Themer add-on, navigate to Beaver Builder > Themer Layouts in your WordPress dashboard and click on Add New. Then, enter a name for your page title:

Adding a new template in Beaver Builder to create a custom WordPress category page

Make sure that Type is set to Theme Layout. For Layout, select Archive. Then, click on Add Themer Layout.

On the next page, you can adjust some settings for your template. For Location, you’ll need to select Post Category Archive from the dropdown menu:

Themer Layout Settings

You can apply the template to all categories or select a particular category from the dropdown menu. When you’re ready, click on Launch Beaver Builder.

Step 2: Build your category page

Beaver Builder has a user-friendly, drag-and-drop editor. You can create your page using modules, rows, and templates. To access these features, click on the + sign in the top right-hand corner:

The Beaver Builder Editor to create a custom WordPress category page

By default, the category template includes the title of the category and related posts. To edit these elements, you just need to select them.

For instance, if you click on the Posts module, you get options for customizing the layout, style, content, and more:

Editing the Posts module in Beaver Builder.

Feel free to explore the different settings for each section. For example, you can set the layout to masonry and change the color and typography of the post title, excerpts, and other elements:

Changing the layout of the posts in the category page

When you’ve finished working on your template, click on Done, then hit Publish. These settings will now be applied to your category pages, replacing the default template!

Create a custom WordPress category page today

Category pages enable users to explore posts on particular topics. They are essential parts of your blog, so it’s important to ensure that they’re easily accessible, navigable, and visually appealing. For this reason, you might consider customizing the default category template or building it from scratch.

In this post, we looked at two main ways to create a custom WordPress category page:

  1. Using the WordPress Site Editor.
  2. Utilizing a page builder tool, such as Beaver Builder.

ℹ️ To see some other sts on particular toppage builder plugins that can help you customize the category page, check out our roundup of the best WordPress page builder plugins.

Do you have any questions about creating a custom WordPress category page? Let us know in the comments section below!

Free guide

5 Essential Tips to Speed Up
Your WordPress Site

Reduce your loading time by even 50-80%
just by following simple tips.

451 thoughts on “How to Create a Custom One in 2022”

Leave a Reply

Your email address will not be published. Required fields are marked *