Toolset Layouts provides a drag-and-drop editor to design archives for your custom content types.

First, remember to install and activate both Toolset Views and Toolset Layouts plugins.

You design an Archive Layout which lists all the posts belonging to the custom post type you select. The header, footer, and sidebars are generated by your theme, while Layouts renders the archive’s list of posts.

If you want to create an archive for a custom taxonomy please take a look at the page about designing archive pages for custom taxonomy.

Creating an Archive Layout

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

Creating an Archive Layouts from the Toolset Dashboard
Creating an Archive Layouts from the Toolset Dashboard

This will open the Archive Layout with the Layouts Editor. The layout will be empty and automatically assigned to the archive page in question.

Empty and assigned archive created from the Toolset Dashboard
Empty and assigned archive created from the Toolset Dashboard

Inserting the WordPress Archive cell

You design your archive layouts using cells. For the archive to display correctly, you must insert the WordPress Archive cell.

In the cell insertion dialog, select to create a new WordPress Archive and click the Create button.

A WordPress Archive is created and includes basic settings.

Adding fields to the Archive

To add post fields to your archive, scroll to the Templates for this WordPress Archive editor, found in the Loop Editor section. There, click the Fields and Views button and select a field.

Template editor where you design how the archive lists posts
Template editor where you design how the archive lists posts

Designing the Archive using HTML

WordPress Archives work like ordinary WordPress content. Use any HTML tags to design the layout of the archive. You can wrap shortcodes with HTML tags which allows you to add classes and apply styles directly to all shortcodes.

Use the Grid button to easily arrange post information and fields into responsive columns.

Inline CSS and Javascript editors for Archives (optional)

WordPress Archives allow you to add custom CSS and Javascript, without having to create or edit theme files on the server.

The CSS and Javascript that you add to the archive only load when that archive page is being used. This way, you can separate between the design of different archive pages in your site.

To add custom CSS or JS, click to expand the CSS editor or JS editor sections below the template editor.

Adding custom CSS and JS code to an archive
Adding custom CSS and JS code to an archive

Do not need to worry about loading this CSS and Javascript. Toolset adds it automatically to the output of the archive page in question.

Viewing the Archive on the Front-end

Toolset allows you to easily see how your archive looks like on the front-end.

First, click to save and close the WordPress Archive cell’s dialog. This will take you back to the main layout editor.

Click the Preview layout button to see your archive on the front-end.

Previewing your archive on the front-end
Previewing your archive on the front-end

Need help?

Go to the Getting Started support page, leave a comment and we will reply to you.

What’s next?

Continue to the page about designing individual posts and pages or go back to the one about customizing archives.