WordPress automatically generates archives of posts which are rendered by the template files of your theme, and which can be overridden with custom Archive Layouts.

The Archive Layout renders the content area of the page and is designed with the Layouts Editor. The actual list of posts that comprise the archive is generated by a special WordPress Archive cell which must be included in the Layout. Settings available in the cell allow you to customise the generated list of posts, e.g. to change the display order or even add search filters.

The same Archive Layout can be assigned to different archives, for example to an archive of custom posts, and also a taxonomy archive which displays all the posts with a given taxonomy term.

Create a new Archive Layout

To create a new custom archive go to the Toolset > Dashboard page and click the Create archive button in the row of your custom post type.

The Layouts Editor will be launched to design the archive, with content added using cells added to rows as previously described in Step 3.

The WordPress Archive cell

The WordPress Archive cell generates the list of posts and must be included.

A custom archive has two parts.

  1. The Loop Selection section sets the query options which determine which posts are loaded from the database. The settings allow you to specify how the posts are ordered and to add Query Filters to, for example, exclude certain posts from the archive.
  2. Screenshot of Archive cell Loop Selection section
  3. The Loop Output section determines how the posts in the archive are rendered, and is where controls such as pagination links are added.
  4. Screenshot of Archive cell Loop Output section

The Loop Output Editor contains largely structural markup that determines whether the results appear as a simple list, in a grid, or a table, and you use the Loop Wizard to generate this markup.

The fields that are output for each post are organised in a Content Template that appears directly below the Loop Output Editor.

When you first add a WordPress Archive cell both the Loop Output Editor and the linked Content Template are pre-populated with default markup.

You can see this default design if you preview the Archive Layout on the front end.

You can edit the default markup, or you can replace it by running the Loop Wizard.

Screenshot of archive content template

In this default template shortcodes are used to display the post title as an H1 header, the full post body content, the post featured image, and the post author and post date.

Try deleting the wpv-post-body shortcode that displays the whole post content and use the Fields and Views button to insert just the post excerpt in its place.

Watch the video to see Layouts used to design a custom archive.

Learn by doing

For the consultant archive of our training site we want to display the consultants in a grid with just their profile picture and their name, linked to the individual consultant posts.

  1. Go to the Toolset > Dashboard page and create an archive for the Consultant post type.
  2. Add a WordPress Archive cell to the existing row which spans the whole 12 columns, and choose to create a new archive.
  3. Accept the default Loops Selection settings
  4. Scroll down to the Loop Output Editor and press the Loop Wizard button, which we will use to overwrite the existing default markup.
  5. Choose Bootstrap grid for the Loop output style and select 3 columns.
  6. Screenshot of Loop Wizard

    The next step of the Loop Wizard is to choose what fields from our posts to include on the archive listing.

  7. Press the Add a field button which will add the post title.
  8. Screenshot of Loop Wizard add field
  9. For consultant posts the post title is the name of the consultant, but we want this to link to the individual consultant post, so use the dropdown to change Post title to Post title with a link.
  10. Press the Add a field button again and this time choose the consultant Profile image field from the select dropdown.
  11. Use the Edit button for the profile image to set options for this field before it is inserted. Specifically, we want to use the Medium image size, so choose that and Update shortcode to retain that setting.
  12. Lastly, we want the consultant name to appear underneath their profile image, so drag and drop the fields to reverse their order
  13. Finish the wizard.
  14. Scroll down to see the two fields gathered in a Content Template.
  15. Note that the fields are inserted without any HTML markup. This means no styling will be applied, which we can change by editing the template. We’ll use the Bootstrap helper class “text-center” to center the consultant name below the image. We will also add a custom CSS rule for a “pad-image” class which we will use to add extra whitespace around the profile images.

  16. Edit the template so that the markup matches that in the screenshot.
  17. Screenshot of template for Consultant archive
  18. Save and close the archive cell and you are returned to the Archive Layout
  19. Preview the archive and Save when satisfied with the design.
  20. Need help?

    Go to the Getting Started support page and leave a comment. Nigel, the author of these pages, or one of the other Toolset team members will reply to you.

    If you find this guide useful or have suggestions on how to improve it please add a comment to the support page

    What’s next?

    Step 5 Design individual posts and pages