Want to create a custom category page in your WordPress site but have no coding skills.? In this post, we will show you how to create a custom category page in WordPress without coding using Divi Builder.
What is Divi Builder?
It is a page builder plugin for WordPress that comes with a theme builder feature. The theme builder feature allows you to create a custom theme part such as a custom footer, custom header, custom single post layout, custom category page, custom author page, and so on. No coding skill is required to create a custom theme part using Divi Builder.
You can do so using a drag-and-drop editor. Divi Builder can be installed on any WordPress theme.
How to Create a Custom Category Page Using Divi Builder
There are two ways to create a custom category page using Divi Builder. First, you can create one from a premade template. Second, you can create one from scratch. We will cover the two methods in this post. Divi Builder itself allows you to create a global custom category (for all categories on your site) or for a specific category. Read on to learn more.
Creating a Custom Category Page from a Premade Template
Although you can create a custom category page from a premade template, Divi Builder offers no premade category templates on its library, but you can get one from one of the Elegant Themes official blog posts (Elegant Themes is the developer of Divi Builder).
After downloading the template file above (which is available in a ZIP format), unzip using your favorite unzipper tool. The actual template file is available in a JSON format. Login to your WordPress dashboard and go to Divi -> Theme Builder to open the Divi Theme Builder page. Click the two-arrow icon on the right side.
On the appearing window, go to the Import tab and click NO FILE SELECTED and select the template file you have just extracted (the JSON file). Click the Import Divi Theme Builder Templates button to import the template.
Once the template is successfully imported, you should see a new template block on the Divi Theme Builder page. Click the Save Changes button.
Creating a Custom Category Page from Scratch
As mentioned, you can use Divi Builder to create a custom category page for all categories on your website or for a specific category. Creating a custom page from scratch allows you to set where the custom category page to be applied.
In this example, we will create a custom category page like the following.
It takes one section with 3 rows to create a custom category page like the one above:
- First row: To place the category title and divider
- Second row: To place the post slider and posts list
- Third row: To place posts grid
To get started, login to your WordPress dashboard and go to Divi -> Theme Builder. Add a new template block and select where you want to apply the custom category template. If you want to apply it to all categories, select the All Category Pages option.
If you want to apply it to a specific category, select your preferred category from the Specific Category Pages option (you can select multiple categories). Click the Create Template button.
Click the Add Custom Body on the template block you have just created and select Build Custom Body.
On the next step, click the Start Building button on the BUILD FROM SCRATCH option. This will open the Divi Builder editor.
By default, Divi Builder provides you a section. You can then add rows inside the section according to your needs. In our case, we need 3 rows.
— First Row
We will use the first row to place the category title and a divider. Click the green button to add a row then click the black button to add a module. The first module you need to add is the Text module.
On the Tex Settings panel, click the database icon and select Post/Archive Title. Click the checklist icon to save the change.
If you want to add an additional text (such as “articles”, “posts”) before or after the category title, you can click the gear icon.
To style up this module, you can go to the Design tab on the settings panel. You can set the typography (font size, font family, font style) and text color on the Text block. To set the margin and padding, you can open the Spacing block.
There are several other blocks you can open. Each block contains different styling options. You can play around to style up the module.
Just don’t forget to click the green checklist icon to apply the changes you made.
Once done with the Text module, add the Divider module beneath the Text module.
— Second Row
Click the green button to add a new row. For the second row, select the two-column structure.
Add the Post Slider module on the first column (the left one).
Select the categories you want to display their articles on the Content block. From this block, you can also set excerpt length. To control the elements you want to display, you can open the Elements block.
Go to the Design tab on the settings panel to style up the module. Once done with the Post Slider module, add the Blog module on the second column (the right one).
The Blog module of Divi Builder has no option to display the posts in a list style like the one above. You need to add a custom CSS to display the posts in a list like the one above. To do so, open the settings panel of the Blog module and go to the Advanced tab and open the CSS ID & Classes block. Paste the CSS class left-blog-image to the CSS Class field.
Add the Code module beneath the Blog module and paste the following CSS code to the Code field on the Text block.
<style>
@media (min-width: 981px) {
.left-blog-image .et_pb_post .entry-featured-image-url {
float: left;
width: 100%;
max-width: 150px;
margin: 0 20px 30px 0;
}
.left-blog-image .et_pb_post {
margin-bottom: 20px !important;
}
}
</style>
— Third Row
Add a new row and add the Blog module.
On the settings panel, go to the Design tab. Change the blog layout to Grid on the Layout block.
To set the number of posts on the grid, go to the Content tab. You can set it on the Post Count option under the Content block.
You can go to the Design tab to style the module.
Once you are done, click the Save button on the bottom-right corner to save the changes and click the X button on the top-right corner to exit the Divi Builder editor.
You will be taken back to the Divi Theme Builder page after clicking the X icon above. Click the Save Changes to apply the new template you have just created.
The Bottom Line
The theme builder feature of Divi Builder allows you to create a custom theme part without coding, including the category page. This gives you unlimited options to customize your theme.
You can install Divi Builder on any WordPress theme. Although some modules still require custom CSS to achieve a certain style, you don’t at least have to deal with PHP
