Create Archive Templates for your Custom Post Types (Pages or Posts)

WCK Swift Templates allows you to create Archive Templates for your Custom Post Types, Posts or Pages without writing any PHP code.

Following the steps below you’ll be able to create a Custom Post Type Archive Template with just a couple of clicks.

Building the Custom Post Type, Custom Fields and Taxonomy

Let’s say we have previously created a Custom Post Type called “Movies”, using WCK Custom Post Type Creator and with WCK Custom Fields Creator we created a Single Custom Meta Box called Movie Information and a Repeater Custom Meta Box called Movie Actors.

1. Single Custom Meta Box – Movie Information – Contains the following fields: Poster, Release Date and Director.
2. Repeater Custom Meta Box – Movie Actors – Contains the following fields: Name, Role and Picture.

We will assign to our Custom Post Type “Movies” a “Genres” Taxonomy created with WCK Custom Taxonomy Creator.

The UI for adding a new “Movie” will look like this.

You’ll notice that Poster, Release Date and Director Fields are part of a Single Custom Meta Box called Movie Information.

On the other side Name, Role and Picture Fields will be included in the Movie Actors Repeater Custom Meta Box. This is because we want to be able to add multiple Actors to a certain Movie as well as fill in their Name, Role and Picture.

Now that we know how everything is set up, let’s get back to creating the Custom Post Type Archive Template for “Movies” using the Swift Templates UI.

Creating the Custom Post Type Archive Template using Swift Templates

Go to WCK Swift Templates tab and click “Add New”. If you have created other previous Swift Templates they will all be listed here, along with their shortcodes.

By clicking the “Add New” button, you will be taken to an interface for creating your Custom Post Type Archive Template.

We’ll create a new Swift Template and name it “Movie List”. Then we need to select a custom post type that our Archive (and Single) templates will be based on. From the dropdown select “Movies”.

Then we’ll select a Query Argument. You have a lot of options here (as seen below) starting from Posts per Page, Order, Order By etc. to Tag or Category ID.

We’ll choose Posts Per Page and use the Default Value of 10.

IMPORTANT: After this step make sure to “Publish” your Swift Template so it can generate all the variables needed at the next step.

Moving forward we’ll get to the Swift Template tab were we can start building the Archive Template. In the right side you will see a list of all the available variables for the selected Custom Post Type “Movies”.

Let’s say that we want the Movies Archive Listing to display the following movie information:

1. Title
2. Genre
3. Poster
4. Release Date
5. Director
6. Actor Names

We’ll leave out the movie Description, Actor Role and Picture and add them only in the Movies Single Template.

We can start building the Custom Post Type Archive Template by selecting the variables we need and adding them to the left side editor. And we can also add a little bit of HTML for a basic layout.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

{{#posts}}
<article id="post-{{post_id}}">
	<header class="entry-header">
    	<a href="{{post_permalink}}"><h2 class="entry-title">{{post_title}}</h2></a>
    </header>  
    <div class="entry-content">
    	<img src="{{movieinfo_poster}}" class="alignright"/>
    	<div class="alignleft">
  			<strong>Release date</strong>: {{movieinfo_release-date}}<br/>
  			<strong>Director</strong>: {{movieinfo_director}}
  			<h4>Actors:</h4>
  			<ul>
  			{{#movieactors}}
    			<li>{{name}}</li>
  			{{/movieactors}}
  			</ul>
    	</div>
  	</div>
  	<div class="entry-meta">  
  		{{#taxonomy_genre}}
  			<span class="cat-links">{{term_name}}</span>
  		{{/taxonomy_genre}}
  	</div>  
</article> <br/>
{{/posts}}
 
{{{pagination}}}

* Notice – Below the Archive Template, you’ll notice a similar box for the Single Template creation which we covered in the Create Single Templates for your Custom Post Type page.

All that’s left to do now is to Update the new Swift Template. This will generate a shortcode which can be inserted in a page that you want to contain your Movies Listing.

So let’s create a new page called “Movie List” and add the [swift-template name=”movie-list”] shortcode.

Once you view the page you’ll see the Movies Listing with all the attached Custom Fields and Taxonomies.

Feel free to move forward and style your new Movies Archive Page in any way you desire.