If you've been working your way through this series, you now have a functioning theme with two page templates.
The steps I've demonstrated to this point are:
- preparing your markup for WordPress
- converting your HTML to PHP and splitting your file into template files
- editing the stylesheet and uploading your theme to WordPress
- adding a loop to your index file
- adding meta tags, the
wp_headhook and the site title and description to your header file - adding a navigation menu
- adding widget areas to the header and sidebar
- adding widget areas, a colophon and the
wp_footerhook to the footer file - creating template files for static pages.
In this part, I'll show you how to create another template file - the archive.php file. This file is used by WordPress to show archives of categories, tags, or any other type of archived content.
The only post listing it isn't used for is the main blog page listing the latest blog posts, which uses front-page.php or index.php.
What You'll Need
- your code editor of choice
- a browser for testing your work
- a WordPress installation, either local or remote
- If you're working locally, you'll need MAMP, WAMP or LAMP to enable WordPress to run.
- If you're working remotely, you'll need FTP access to your site plus an administrator account in your WordPress installation.
1. Creating the Archive Template
Start by creating a blank file in your theme folder and naming it archive.php. Add the following to it, in the same way as you did for the page template:
<?php /* the archive file - for displaying archives */ get_header(); ?> <div class="two-thirds" id="content"></div><!-- #content--> <?php get_sidebar(); ?> <?php get_footer(); ?>
This sets up the basis of your template file, with the header, sidebar and footer included and the #content div in place.
2. Displaying a Page Title
The title of your archive page is slightly more complicated than the title of a post or static page. An archive page could be displaying a date archive or a category, tag or post type archive, for example.
The first step is to check what type of content the archive is displaying by running a loop. You then need to rewind that loop so that you can run a standard loop to display the contents of the archive.
Inside the #content div, add the following:
<?php
/* Queue the first post, that way we know if this is a date archive so we can display the correct title.
* We reset this later so we can run the loop properly with a call to rewind_posts().
*/
if ( have_posts() )
the_post(); ?>
<h2 class="page-title">
<?php if ( is_day() ) { ?>
Archive for <?php echo get_the_date(); ?>
<?php } elseif ( is_month() ) { ?-->
Archive for <!--?php echo get_the_date('F Y'); ?>
<?php } elseif ( is_year() ) { ?-->
Archive for <!--?php echo get_the_date('Y'); ?>
<?php } else { ?-->
<?php echo get_queried_object()->name; ?>
<?php } ?>
</h2>
<?php rewind_posts(); ?-->
This checks if the archive is for a day, month, or year and, if so, displays the date in the appropriate way (for more on displaying dates, see the Codex page on the get_the_date() tag).
If it isn't a date archive, WordPress uses get_queried_object() to identify the category, tag, taxonomy or post type currently being queried and display that. Note that this must be followed by ->name otherwise nothing will be displayed.
2. Run the Loop
The loop in this archive page will be similar to the loop in index.php, but with a different structure to allow for featured images to be displayed next to the text, and using the the_excerpt() tag instead of the_content() to display an excerpt of each post instead of its full content.
Note: You can manually create post excerpts in the post editing screen, or WordPress will automatically use the first 55 words of the post.
Start by creating the basic loop. Below the code you added for the heading, add this code:
<?php // start the loop proper ?> <?php while ( have_posts() ) : the_post(); ?> <article id="post-<?php the_ID(); ?>">></article><!-- #post-theID--> <?php endwhile; ?>
This runs a loop but doesn't output any content from each post just yet.
3. Add the Featured Image
The first item in the loop is the featured image. I'm going to put this inside a <section> element which I'll float left using the OOCSS in my theme - you may need to add your own CSS.
Inside the opening
</pre> <section class="left image quarter"> <img class="size-thumbnail" alt="" src="images/featured-image.jpg" /> </section><!-- .image -->
This will fetch the featured image and display it using the thumbnail size.
4. Add the Excerpt
The excerpt is floated left as well but using OOCSS I'm giving it three-quarters width so it floats to the right of the image.
Below the featured image code, add the following:
</pre>
<section class="left archive-content three-quarters">
<h3 class="entry-title">
<a title="<?php printf( esc_attr__( 'Permalink to %s', 'compass' ), the_title_attribute( 'echo=0' ) ); ?>" href="<?php the_permalink(); ?>" rel="bookmark">
<?php the_title(); ?>
</a>
</h3>
<section class="entry-content"><?php the_excerpt(); ?></section><!-- .entry-content -->
</section>
<!-- .archive-content -->
This includes the title of the post plus the excerpt. If you wanted to, you could place the title above both the image and expect by placing that higher in the structure.
Now save your archive file and view an archive page. I've created a category called 'Archive' and am viewing that in the screenshot below:
As you can see it's displaying the name of my category and the posts with an image to the left. At the moment the images aren't showing up because I haven't added featured image functionality to my theme - this is what I'll do in the next part of this series.
Summary
Archive templates are useful for displaying archives of your content in the way that you wish to. In addition to a simple archive.php file, you can create bespoke archive templates for archives of specific categories, tags, post types or taxonomies. See the Codex page on the Template Hierarchy for details of how these work.
Comments