houses-archive

WordPress Archives let you customize the standard WordPress listing pages.

You will be able to redesign any WordPress archive, including the blog (index), custom post archives, taxonomy archives, author archives and even the search results page.

Let’s see how this works for a custom post archive page. In our example, we’ll customize the archive for a ‘listings’ custom post type.

Please note that this page explains the usage of WordPress Archives when used with the Views plugin only. For maximum flexibility and usage with the complete Toolset package, please visit the page about creating layouts for archives.

If you are new to Toolset, we recommend that you start with the Toolset training course. You can jump right in to the section on creating layouts for archives.

1. Setting up a new WordPress Archive

Select Toolset->WordPress Archives.

1. Create a new WordPress Archive 2. Choose what kind of archive it is 3. Choose which archive it customizes 4. The name will be generated automatically, but you can change it
choose-archive-type-2 choose-archive-type-3 choose-archive-type-4

2. Customize pagination and add custom search

You can customize pagination in WordPress Archives and take full control of how it works and looks.

You can allow visitors to sort the front-end results, by different options.

You can also add custom search in WordPress Archives, allowing your visitors to filter content based on post relationships, taxonomies or fields. Use the Grid button to arrange your custom search controls into columns.

Custom search options are hidden by default, but you can easily display them by clicking the Screen Options at the top of the WordPress Archive editing page. Then, check the option to display custom search controls.

Enabling Custom Search On The WordPress Archive Editing Page
Enabling custom search on the WordPress Archive editing page

3. Choose the layout style and add fields

Scroll down to the Loop Output editor and add the fields that you want to display. Use HTML and CSS to style the output.

1. Open the Loop Wizard 2. Select the layout style 3. Add the fields that you want to display
select-layout-style add-fields1

When you are done with this step, the archive page will already display with your fields. Since we haven’t applied any styling yet, the results will probably be very raw. Next, we style using HTML and CSS.

4. Style the output

The Loop Output will include the fields that you’ve added, but without any styling. This HTML can include anything that you like. You can also easily insert grids to organize the output into columns.

Wrap the different fields with your HTML and CSS classes, to achieve the styling you need. You will see shortcodes for every field you’ve added. Shortcodes have square brackets around them and look like [wpv-post-link].

Our final styled archive page is ready. See how it looked before we styled it with the WordPress Archive and how it displays with our styling.

Before – default styling for custom post archive from our theme After – the custom post archive, styled with our WordPress Archive

The archive for our Listing CPT, before styling with a WordPress Archive
The archive for our Listing CPT, before styling with a WordPress Archive

Styled custom post archive for our Listing CPT
Styled custom post archive for our Listing CPT

It displays the elements that WordPress normally includes in a the Listing Custom Post Archive. Instead of the default CPT archive output, we can see the layout that we’ve designed using our WordPress Archive.


Hint: You can also add filters to your archive. Check out the tutorial on how to create a custom archive filtered by taxonomy terms