Using images when displaying an archive listing in WordPress can be very powerful. It can increase the visual appeal of your archive pages and your site overall and it can help to illustrate what your site is all about.

WordPress makes this easy with featured images, enabling you to display the featured image for each post when outputting that post via the loop.

This tutorial is the first of a two part series in which you'll learn how to create a template file to display images for a custom post type archive and style that archive page to create a grid of images with the post titles overlaid when the user hovers over an image.

In this first part you'll learn the following:

• How to register a custom post type to work with when creating the archive page
• How to code the loop to display the images and titles correctly
• The parameters and classes you'll need to add to the image and title to maximise accessibility and make it possible to add CSS to style the image grid

In the next part you'll learn how to code the CSS to display your image grid with the hover effect.

Resources You'll Need for This Tutorial

This tutorial uses a child theme with the Twenty Twelve theme as its parent. You'll need a WordPress installation set up with this theme installed (it should be installed as the default). If you're unsure of how to set up a child theme, see the instructions on the WordPress Codex.

You'll also need a code editor with FTP access to your site, unless you're developing locally in which case you won't need FTP.

You can download the code bundle, including the child theme files, using the Download link above.

Registering the Custom Post Type

The first step is to register your custom post type of 'animal'.

In your child theme, create a new functions.php file and add the following to it:

<?php
// register a custom post type called 'animals'
function wptp_create_post_type() {
	$labels = array(
		'name' => __( 'Animals' ),
		'singular_name' => __( 'animal' ),
		'add_new' => __( 'New animal' ),
		'add_new_item' => __( 'Add New animal' ),
		'edit_item' => __( 'Edit animal' ),
		'new_item' => __( 'New animal' ),
		'view_item' => __( 'View animal' ),
		'search_items' => __( 'Search animals' ),
		'not_found' =>  __( 'No animals Found' ),
		'not_found_in_trash' => __( 'No animals found in Trash' ),
	);
	$args = array(
		'labels' => $labels,
		'has_archive' => true,
		'public' => true,
		'hierarchical' => false,
		'supports' => array(
			'title',
			'editor',
			'excerpt',
			'custom-fields',
			'thumbnail',
			'page-attributes'
		),
		'taxonomies' => array( 'post_tag', 'category' ),
	);
	register_post_type( 'animal', $args );
}
add_action( 'init', 'wptp_create_post_type' );
?>

This registers the custom post type using two parameters:

• 'animal', the name of the custom post type
• $args, the array of arguments for the custom post type. These include arguments for support, whether the post type is hierarchical (it's not, so behaves like a tag), whether the post type has an archive, which mst be true for your archive page to work, and the labels, which are defined as an array using $labels.

The function to register the custom post type is then hooked into WordPress using the 'init' action hook, which means it runs when WordPress is intialised.

Save your functions.php file.

The new post type will now be displayed in the WordPress admin menu as shown in the screenshot:

Having done this, the next step is to add some data. Add some animals, with a featured image and some dummy text for each. You will then have a list of animals:

Making the Archive Listing URL Work

Before working on the template file to list posts from your new custom post type, you need to set up your permalinks so that you can easily access the page in your site which displays the archive for the new custom post type.

In the Permalinks screen, edit the permalinks settings so that 'pretty permalinks' are turned on, by clicking on the %postname% option. This means that you will be able to easily type in the URL of the post type's archive.

Save your changes to permalinks.

Viewing the Archive Page

In your browser, type in the URL of your site followed by /animal to display the archive. In the case of my demo site the full URL is http://rachelmccollin.co.uk/wptutsplus-image-archive/animal/. This will display the archive for your custom post type:

As you can see, at the moment the page is displaying the featured image, title and all of the content for each animal. If you scroll down the page you'll see all of them listed.

The next step will be to create a template file to display just the image and the title for each animal.

Creating a Template File for the Custom Post Type Archive

To display the animals correctly, you're going to create a template file specifically for displaying archives of that custom post type.

Adding Include Tags and the Archive Title

In your child theme, create a new blank file called archive-animal.php.

Add the code to call the includes - the header, footer and sidebar, plus the opening and closing tags for the elements to display on the page. These elements are consistent with other template files using the Twenty Twelve theme and will preserve the parent theme's styling:

<?php get_header(); ?>
<section id="primary" class="site-content">
	<div id="content" role="main">
		//leave space for the archive title
		//leave space here for the loop
	</div><!-- #content -->
</section><!-- #primary -->

<?php get_sidebar(); ?>
<?php get_footer(); ?>

Next, add the archive title which will display as the page title. This goes after the opening <div id="content" role="main"> tag:

<header class="archive-header">
	<h1 class="archive-title">
		<?php post_type_archive_title(); ?>
	</h1>
</header><!-- .archive-header -->

This uses post_type_archive_title() to display the name of the post type whose archive is being displayed. It wraps this inside a <header> and an <h1> tag to preserve consistency with the parent theme in terms of semantics and styling.

Adding the Loop and Populating It With Content

Next, below the archive header, add the basic code for the loop:

<?php
// Start the Loop
while ( have_posts() ) : the_post(); ?>
	// leave space here to add the content output for each post
<?php endwhile; ?>

You now have an empty loop running in your archive pages, but it won't output anything yet.

Add the following inside the loop:

<?php
// Start the Loop
while ( have_posts() ) : the_post(); ?>
	// leave space here to add the content output for each post
<?php endwhile; ?>

You now have an empty loop running in your archive pages, but it won't output anything yet.

Add the following inside the loop:

<article class="entry-content">
	<?php $attr = array(
		'class' => "archive-image",
		'alt' => trim( strip_tags( $wp_postmeta->_wp_attachment_image_alt ) ),
	); ?>
	<a href="<?php the_permalink(); ?>"><?php the_post_thumbnail( 'thumbnail', $attr ); ?></a>
</article>

This uses the_post_thumbnail() to display the featured image for each post (or each animal). The parameters for this are as follows:

• 'thumbnail' - the size of image which will be displayed, which is the thumbnail size
• $attr - an array of attributes: the class of the img element output by the the_post_thumbnail() function, which will be used for styling; and the 'alt' attribute, which uses strip_tags to display any alt attributes defined when the image was uploaded minus any HTML tags. This uses $wp_postmeta to access the metadata for the image

This image is inside a link to the post permalink (<a href="<?php the_permalink(); ?>">).

The next step is to add the post title below the image. Do this by adding the following code beneath the code to display the featured image but above the closing </article> tag:

<h2 class="archive-title"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>

This adds the title of the post (i.e. the name of the animal) inside another link to the post permalink, which again is inside a h2 tag with the archive-title class. Adding this class will help with styling later on and the h2 tag adds semantics to the post title and is helpful for accessibility.

Your complete template file will now contain the following:

<?php get_header(); ?>

<section id="primary" class="site-content">
	<div id="content" role="main">
		<header class="archive-header">
			<h1 class="archive-title">
				<?php post_type_archive_title(); ?>
			</h1>
		</header><!-- .archive-header -->

		<?php
		// Start the Loop
		while ( have_posts() ) : the_post(); ?>

		<article class="entry-content">
			<?php $attr = array(
				'class' => "archive-image",
				'alt' => trim( strip_tags( $wp_postmeta->_wp_attachment_image_alt ) ),
			); ?>
			<a href="<?php the_permalink(); ?>"><?php the_post_thumbnail( 'thumbnail', $attr ); ?></a>
			<h2 class="archive-title"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
		</article>

		<?php endwhile; ?>

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

<?php get_sidebar(); ?>
<?php get_footer(); ?>

Save your template file and return to the archive page in your browser. When you refresh the page you will find that the image and title is now displayed for each post. In addition, the page title has changed from 'Archives' to 'Animals', which is much more helpful. Here's how the archive page looks now:

You now have the images and titles in place but they're displayed one beneath the other, and there's no hover effect. In the next part of this tutorial I'll show you how to add the CSS which will do three main things:

• Display the images in a grid
• Hide the titles
• Make the titles appear when the user hovers their mouse over an image

After doing that, you'll have an attractive image-based archive listing which you can use for any projects where posts make use of featured images.

Useful Resources

Codex pages:

• Child themes
• Template hierarchy
• The loop
• Displaying featured images with the_post_thumbnail

Tutorials:

• Creating child themes
• The complete guide to custom post types
• A beginner's guide to the loop
  
• How to add featured images to your theme