Creating a Custom Archive Page

Archives are the content-listing pages that WordPress generates for you. The “blog page” is an archive. Each custom post type that you set up will have an archive. Even the “search” is an archive. Toolset lets you fully customize the appearance and content of these archives.

Follow these steps

  1. Go to Toolset → Dashboard and click the Create Archive button in the row of the post type you want to design an archive for.
  2. Use the WordPress Block Editor to design your archive
  3. Use Toolset blocks to add dynamic fields to the template.

New archives created using Toolset have default settings for pagination, ordering, and more. You can change these settings at any time.

Click the Block Navigation button and in the dropdown list select the WordPress Archive block. Then, use the right sidebar to tweak all the main settings for your archive.

Options for changing the main archive settings

You can also add advanced features like front-end sorting, custom search, and filters the list of posts.

For further instructions, see below.

How to style an archive page

Toolset blocks allow you to design and style everything inside the block editor.

Different Toolset blocks will have different styling options. The most common styling options are:

  • Typography – change the appearance of blocks that output text
  • Style Settings – change colors, margins, paddings and borders, drop shadows and more.
  • Advanced – block allignment, hide element, and more.

Besides styling the blocks themselves, there are two Toolset blocks that help you design your archives:

  • Toolset Container – group multiple blocks and apply styling to them: add a background, margins, paddings, and more.
  • Toolset Grid – display elements side-by-side in any type of columns: adjust column width, number of columns, and more.

Add pagination to the archive

Pagination lets you break your archive’s long lists of posts into multiple pages. Visitors can then easily and quickly switch between them.

By default, pagination is turned on when creating a new WordPress Archive.

You can find the Pagination block just below the WordPress Archive Loop. Click to select it and you will see all pagination options in the right sidebar.

For example, you can select whether pagination is numbered, uses dots, or just previous and next arrows.

Expanding the View pagination settings section allows you to change other important options:

  • Change if posts load with or without reloading the page
  • Select transition effect and duration
  • Choose caching options
  • Select a spinner

And more.

Add content before or after the archive loop

You can add custom text and other blocks before or after the main archive loop. However, it is important to put this content inside the main WordPress Archive block, but outside the WordPress Archive Loop section.

  1. First, click to select the main WordPress Archive block.
  2. To add a block before the archive loop, click the Add Other Block button at the top of the WordPress Archive block.
  3. To add a block after the archive loop, click the Add Other Block button at the bottom of the WordPress Archive block.

Change the loop style of an archive

By default, archives display lists of items in a grid. You can easily change this at any time. For example, you can display posts using a masonry or collage layout.

Click to select your WordPress Archive in the editor and then click the Block Navigation button. You will see a tree list of your archive and the blocks it contains. Click the WordPress Archive Loop to select it.

In the right sidebar, expand the Loop Style section and select the layout type you want to use for your archive page.

Add front-end sorting to an archive

Allowing users to sort the list of posts by price or rating, for example, helps them find the right content more easily.

To add sorting controls to an archive use the following steps:

  1. Click the Add Sorting button. You can find it at the top and bottom of the WordPress Archive Output block.
  2. Click the sorting control that appears and use the right sidebar to select the options.

You can select what to sort by, adjust the labels, tweak the styling, and more.

Change the layout of an archive page

Theme defines the basic layout of archive pages on the site. This includes options like the width of the page, displaying of sidebar and the page title, and more.

Using one of the themes integrated with Toolset allows you to control the layout of archive pages. You can set different layout options for different archive pages.

If your theme is integrated with Toolset use the following steps to change the layout options:

  1. Click to select the main WordPress Archive block.
  2. In the right sidebar, expand the Theme Options section and tweak the options you need.

Please note that different themes provide different options.

If your theme is not integrated with Toolset, you might try changing the layout options from the Appearance → Customize page, or from the theme’s own settings page.

Filter the list of posts

By default, an archive page outputs all posts belonging to a post type. You can add filters to display only posts that meet a certain criteria.

You can filter an archive’s output by custom fields, taxonomies, standard post fields, post relationships, and more.

Use the following steps to add a filter to an archive:

  1. Click to select the main WordPress Archive block.
  2. In the right sidebar, expand the Query Filter section.
  3. Click Add a filter and in the dialog that appears, select what to filter by.
  4. In the right sidebar, select the options for your new filter.

Add a custom search to an archive

Toolset allows you to easily add a front-end search to your archive pages. This allows users to easily find the exact content they are looking for.

Archive page with a custom search
Archive page with a custom search

Follow these steps to add a custom search to an archive page:

  1. Click to select the main WordPress Archive block.
  2. In the right sidebar, toggle the Search option on. 
  3. A section called WordPress Archive Search appears in the block editor. In it, use the buttons to add search fields, submit and reset buttons or other blocks.

To change the main options for your search, click to select the main WordPress Archive block and in the right sidebar expand the Custom Search section.

For detailed information, check out the lesson about creating a custom search.

Originally written
May 13, 2020
Updated
June 18, 2020