When you add a custom content type to a site, you should design its archive page. Most themes will display the archives without any custom fields. WordPress Archives let you create your own archives, including any field that belongs to the content, using simple HTML and without writing PHP.

First, remember to install and activate Toolset Views plugin.

Creating a WordPress Archive

Go to Toolset -> Dashboard and click Create archive button in the row of the post type you want to design an archive for.

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 a custom archive page from the Toolset Dashboard page
Creating a custom archive page from the Toolset Dashboard page

In the dialog box that appears, enter the name for your archive and click the Create WordPress Archive button.

Adding fields to the archive

To add post fields to your archive, scroll to the main editor in the Loop Editor section and click the Loop Wizard button.

Starting the wizard to add post fields
Starting the wizard to add post fields

In the first step of the wizard, select how the post fields should be output. We recommend using the Bootstrap Grid option which looks nice and is responsive by default.

In the second step, select post fields you want to display on your archive page.

Designing the Archive using HTML

WordPress Archives work like ordinary WordPress content. To control the layout of the archive, use HTML tags. You can wrap shortcodes with HTML tags. This 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.

Archive's template editor with some custom HTML markup
Archive’s template editor with some custom HTML markup

The editor includes a convenient syntax highlighter and you can easily craft your HTML. It is very similar to writing ordinary WordPress content, however, you are actually creating page templates.

Inline CSS and Javascript editors for Archives (optional)

WordPress Archives let you 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 main 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.

Scroll to the top of the WordPress Archive editing page, to the section called Loops Selection. There, look under the Custom Post Archives section and click the icon next to the post type for which you are editing an archive.

Link to view the archive on the front-end
Link to view the 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.