Advanced CMS Archive Pages

Page Template URL Settings for Archives

There are a number of different types of archive pages you may want to display on your site, to help your customers browse your store content. A few common types of archive pages are:

  • Show all posts (i.e., blog, announcement, and pages)
  • Show only one type of post (e.g., blog only)
  • Show only one category for all types of posts (e.g., interesting-things)
  • Or, a combination of the above

To configure the archive page, you use Page Template URLs, which define the URL routes and the variables used in your archive page.

URL Setting Use
:type Limit archive page to given type (e.g., blog)
:category Limit archive page to one category (e.g., popular-items)
:year/:month/:day Limit archives to date or any date part (e.g., 2004/04)
:page? Allow the archive to show a set of clickable pages with the results.

You can combine these URL Settings if you would like to filter your archives in a more advanced way (e.g., /archives/:type/:category).

Example: Configure a Category Archive

  1. Create a new theme Page Template
  2. Set the URL setting to/:type/archives/:category
  3. Add the page template HTML

This archive template will work for news, announcements, and blog posts (based on using :type in the URL settings). The page is tagged with a custom CSS class for each type of content, allowing you to write custom CSS depending on the archive type, and the post type is included in the list itself.

<div class="row">
    <div class="content">
{% if archives | length > 0 %}
    {% for post in archives %}
    
    <article class="{{ post.type }}">
        <header>
            <img src="{{ post.featured_image.thumbnail(1000, 365)|default('http://placehold.it/1000x365') }}" width="1000" alt="{{ post.featured_image.alt }}"/>
            <h2><a href="{{ post.permalink }}">{{ post.title }}</a></h2>
            <p>{{ post.published_on | date("F j, Y") }}</p>
            <p><strong>{{ post.author_name }}</strong> in <var>{{ post.type }}</var></p>
        </header>
        <aside>{{ post.excerpt | unescape }}</aside>
    </article>
    
    <hr/>
    
    {% endfor %}
    
{% else %}
    
    <article>
        <header>
            <h4>Not found</h4>
            <p>No {{ type }} posts found in category: {{ category }} {{ categoryID }}</p>
        </header>
    </article>    
    
{% endif %}
    </div>
</div>

Paginating Your Archive Pages

You can also paginate your content archives by using the standard paginate (paginate, pagination, and navigation keywords):

<div class="row">
    <div class="content">
{% if archives | length > 0 %}
{% paginate archives by 5 %}
    {% for post in pagination.items %}
    
    <article class="{{ post.type }}">
        <header>
            <img src="{{ post.featured_image.thumbnail(1000, 365)|default('http://placehold.it/1000x365') }}" width="1000" alt="{{ post.featured_image.alt }}"/>
            <h2><a href="{{ post.permalink }}">{{ post.title }}</a></h2>
            <p>{{ post.published_on | date("F j, Y") }}</p>
            <p><strong>{{ post.author_name }}</strong> in <var>{{ post.type }}</var></p>
        </header>
        <aside>{{ post.excerpt | unescape }}</aside>
    </article>
    
    <hr/>
    
    {% endfor %}
  
  <div class="pagination-centered">
    <div class="pagination">
      {% navigation %}
    </div>
  </div>
  
{% endpaginate %}    
{% else %}
    
    <article>
        <header>
            <h4>Not found</h4>
            <p>No {{ type }} posts found in category: {{ category }} {{ categoryID }}</p>
        </header>
    </article>    
    
{% endif %}
    </div>
</div>

The completed archive page will look something like this:

A paginated CMS Content Archive Page

Visit our CMS Archives Variables article for a complete list of variable associated with Archives.