InfiniSites Tutorial: How to Customize a Specific Category Layout

If you’ve been following along, we’ve already learned how to customize the main blog/articles and the post/article layouts. This week we’re diving much deeper and customizing the layout for a specific category.

Why Would You Need a Category Specific Layout?

Perhaps you want to offer a download that pertains to that category, but not others. Maybe you want to have a newsletter signup form or some other call to action. Or you might just want to make it different just for the sake of being different. Regardless, I’m going to walk you through how to setup and customize a layout for a single, specific category. Warning: this is tutorial is a little more advanced than previous tutorials. I suggest that you learn how to customize posts/articles and blog/articles layouts before you attempt this tutorial.

Preparing Articles for a Category Layout

For articles to show up in a category layout, they must be assigned to that category, so before we get started make sure your articles are assigned to the category you want to single out. If that category doesn’t exist yet:

1. Make sure you’re logged in, and on the backend navigate to the Post – Categories section.
2. Then simply add the name of the category, choose a parent category if needed, feel free to enter a description, and click the add new category button.
3. Navigate to the Post – All Posts section, check the articles you want to add to your new category, then choose edit from the bulk options dropdown, check the newly created category, and click update.

Creating a New Category Archive Layout

To be able to edit a specific category layout, we first need to create the layout and choose the category that it applies to.

1. Again in the backend, navigate to the Builder – Themer Layouts section and click the add new button.
2. Give your new layout a name (they name of the category might be a good choice), choose themer layout for the type and archive for the layout, then click the add themer layout button.
3. Next, choose post category archive from the location dropdown, select the name of the category you want to assign to the layout, and click the update button to save your changes.

Customizing the Category Archive Layout

Now that the category and posts are ready, it’s time to edit the layout.

1. The easiest way to get from the backend to your newly created category is by going to the Post – Categories section, then clicking the view option under that category. That will take you directly to that category’s url. To get to the category from the frontend of the website, navigate to your blog/articles page, click on an article that is assigned to that category, and click on the category link at the bottom of the article.
2. Now that you’re on the category archive, hover over (but don’t click) the InfiniBuilder button at the top of your website, then select the category archive option (the name of the layout you created earlier) that says “ARCHIVE’ to the right.
3. Editing the blog/articles layout is just like editing a page. Click the wrench icon on the Posts module to make all kinds of changes. The Layout tab is where the bulk of the options are. Panels include:
   • Layout
   • Post
   • Featured image
   • Post info
   • Post content
4. You can make changes to colors and fonts in the Style tab.
5. You can also filter what content is displayed and how it’s ordered using the Content tab
6. If you have a lot of posts, the Pagination tab will allow you to choose how additional posts are loaded, and to control the number of posts that are displayed on each page.
7. Just like editing a page, you can add other modules by dragging them onto your layout from the modules panel. If you’re looking for Category, Archive, Recent Posts or Tag Cloud modules, you’ll find them under WordPress Modules in the group dropdown.
8. Once you’re happy with the layout, don’t forget to save and publish your changes.

Now that you know how to create and customize a specific category layout, take a look at our other tutorials that walk you through how to add a PDF download button and a newsletter signup form. As always, if you decide you don’t want to tackle this yourself, just let us know and we’ll be happy to take care of it for you.