Creating an Image-Based Archive Page: Getting Started
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 ‘
In your child theme, create a new functions.php file and add the following to it:
__( '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
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:
//leave space for the archive title //leave space here for the loop
Next, add the archive title which will display as the page title. This goes after the opening
post_type_archive_title() to display the name of the post type whose archive is being displayed. It wraps this inside a