Using WordPress for Ecommerce, Part 54: Archive Page

Whether displaying a list of articles or a product grid, category pages are an important part of nearly any web development project.

I have taken a pause, if you will, in the Alien Authority development, project to look back and make sure that I have the site functioning just the way I want it before move into the next major section of development.

This article in the 54th installment of a series created to demonstrate how to use WordPress to develop an ecommerce site that sells virtual products from start to finish. The series addresses the (a) site-planning process, (b) graphic design, (c) plugin selection, (d) payment processing setup, and (e) virtual product delivery. This series also provides specific site-coding examples.

The Series to Date

• Part One: Defining the Project
• Part Two: Logo and Color Palette
• Part Three: CSS Grid, Home Page Design
• Part Four: Facing Design Challenges
• Part Five: Install WordPress, Copy Theme
• Part Six: Create a Custom Post Type
• Part Seven: More Functions for the Custom Post Type
• Part Eight: Draft HTML5 Markup
• Part Nine: CSS Begins, Font Glitch
• Part Ten: CSS Work Continues
• Part 11: jQuery Lends a Hand
• Part 12: CSS for Articles, Newsletter
• Part 13: CSS for Social Links, the Footer
• Part 14: Tablet Layout Begins
• Part 15: Tablet Layout Continues
• Part 16: Articles and Videos Styled
• Part 17: 480-Pixel-Wide Footer
• Part 18: 480-Pixel CSS Coloring
• Part 19: Colors Like a Rainbow
• Part 20: The Next Size Up
• Part 21: Finishing the 640-pixel Wide Layout
• Part 22: The Remaining Layouts
• Part 23: Completing Remaining Layouts
• Part 24: Theme Building Begins
• Part 25: Switching Style Sheets
• Part 26: Completing the Header.php File
• Part 27: The WordPress Loop
• Part 28, Managing Thumbnails and Article Teasers
• Part 29: A Third Loop and the Footer
• Part 30: Newsletter Page Template and Database
• Part 31: Composing the Newsletter Form
• Part 32: Processing Newsletter Form Data
• Part 33: Integrating MailChimp
• Part 34: Modifying the Page Template
• Part 35: The Contact Form
• Part 36: When Users Submit
• Part 37: Additional CSS, and Getting Ready for RSS
• Part 38: Plugin Localization and Settings Link
• Part 39: Connecting to the Database Table
• Part 40: Adding a Style Sheet to a Plugin
• Part 41: Cloning Form Elements
• Part 42: Populating The Options Form
• Part 43: Showing and Hiding Options
• Part 44: Cleaning Up the Plugin
• Part 45: Get the RSS
• Part 46: Working the Feeds
• Part 47: Timing Cron-like Events in WordPress
• Part 48: Creating the First Digital Product
• Part 49: Presenting Individual Products
• Part 50: Displaying Category Pages
• Part 51: Adding Text to a PDF
• Part 52: Font Problems
• Part 53: Search the Past

In the previous article, I mentioned that I don’t believe there is any such thing as a perfect development project, and frankly when I am building a site as an illustration for an article series that project can become even more disjointed.

As such, I took a step back from my development schedule to really look through the Alien Authority website, which as you may know from earlier articles in this series will sell alien abduction certificates.

In the last installment, I made changes to the search form and the search results page.

In a similar fashion, in this article I am going to update the Alien Authority’s article and video category pages, or rather the template for these pages. At the moment this page does not display properly.

Image may be NSFW.
Clik here to view.

The Alien Authority site’s category pages were not displaying properly.

Create an Archive Page Template

To reformat this page — and give it the appropriate content — I created a new PHP document and gave it the standard WordPress template comment.

<?php
/**
 * The template for displaying Archive pages.
 *
 *
 * @package WordPress
 * @subpackage aa
 * @since aa 1.0
 */

get_header(); ?>

This file needs to be called archive.php or category.php, so that WordPress knows when to use it.

WordPress uses a template hierarchy to decide which template to use for a particular request. The archive.php file is the most generic archive-type template. For the Alien Authority site, it will be fine to manage category pages housing lists of articles, but I could have also chosen to be a bit more specific and named this file category.php. It is also possible to have archive type templates for authors, tags, taxonomies, dates, or even custom post types.

Next, the archive.php file needs a WordPress loop. The loop has been a common feature on every template created for the Alien Authority site.

<div id="content" role="main">

	<h1 class="page-title"><?php single_cat_title(); ?> </h1>
	<?php query_posts( 'posts_per_page=10' ); ?>
	<?php if ( have_posts() ) : ?>
	<?php /* Start the Loop */ ?>
		<?php while ( have_posts() ) : the_post(); ?>
			<ul id="category-list">
				<li>
					<h3><a href="<?php echo get_permalink(); ?>"><?php the_title(); ?></a></h3>		
					<?php the_excerpt(); ?>					
				</li>
			</ul>
		<?php endwhile; ?>
	<div class="pagination">
		<?php previous_posts_link(__('Newer Entries')) ?>
		<?php next_posts_link(__('Older Entries')) ?>
	</div> <!-- end .pagination -->

	<?php else : ?>

	<article id="post-0" class="post no-results not-found">
		<h1 class="entry-title">Nothing Found</h1>
	</article><!-- #post-0 -->

	<?php endif; wp_reset_query(); ?>

</div><!-- #content -->

For this particular loop, notice that I am setting the first h1 element to a value of the category’s title using the WordPress function single_cat_title().

<h1 class="page-title"><?php single_cat_title(); ?> </h1>

As with other loops, the content is added to the page using a while statement. One difference here, however, is that I have limited the page so that it shows just the most recent ten posts.

<?php query_posts( 'posts_per_page=10' ); ?>

Lower in the code, I reset the query.

<?php endif; wp_reset_query(); ?>

I also added pagination, so that users can click to see the next ten posts.

<div class="pagination">
	<?php previous_posts_link(__('Newer Entries')) ?>
	<?php next_posts_link(__('Older Entries')) ?>
</div> <!-- end .pagination -->

I also added the WordPress footer.

<?php get_footer(); ?>

I added some styles, leveraging the code used in the previous article. This code was from style.css.

/* SERP and Catalog */
ul#serp-list, ul#category-list { 
	margin: 0;
	padding: 0;
	list-style: none;
}

ul#serp-list li h3, ul#category-list li h3 { margin-bottom: 5px; }
ul#serp-list li p, ul#category-list li p { margin-top: 0; }

ul#category-list li { margin-bottom: 20px; border-bottom: 1px dotted #282828; }
ul#category-list li:last-child { border-bottom: none; }

With these changes, the category pages are now properly laid out.

Image may be NSFW.
Clik here to view.

The updated archive.php file lays out the category page.

Summing Up

In this article, I updated the archive.php file responsible for adding content to and laying out the category pages on the Alien Authority website.

Related Articles

• Book Review: The WordPress Anthology
• 29 New WordPress Tutorials
• WordPress Theme Development Part 1: Installation and Graphic Design