WordPress

The Ultimate WordPress Theme Tutorial (10)

The Archive, Author, Category & Tags Template

Posted on  by Ian Stewart

 

Much like we did with index.php, we’re going to get one master template done right and use it to build our other templates. Our master Template in this case is the Archive Template.
What archive.php does (and all it’s related templates) is show posts based on a select criteria. A date range, or posts by a certain author, a category, or a tag. So, basically, it’s a lot like index.php. If you can read the name of the template you can figure out what it’s going to spit out.
Let’s start again with our template-template from the previous lessons and build on top of it.

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
<?php get_header(); ?>
        <div id="container">
            <div id="content">
                <div id="nav-above" class="navigation">
                </div><!-- #nav-above -->
                <div id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
                </div><!-- #post-<?php the_ID(); ?> -->          
                <div id="nav-below" class="navigation">
                </div><!-- #nav-below -->                  
            </div><!-- #content -->
        </div><!-- #container -->
<?php get_sidebar(); ?>
<?php get_footer(); ?>

The Archive Template

Here’s the scheme of an Archive Template:

  1. Call the_post()
  2. Check to see what kind of template this is
  3. Produce an appropriate template
  4. Rewind the posts with rewind_posts()
  5. Do the usual loopy WordPress stuff

Here’s the #content of your archive.php Template. Note the Conditional Tags at the top for checking to see what kind of template we’re in.

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
<?php the_post(); ?>         
<?php if ( is_day() ) : ?>
                <h1 class="page-title"><?php printf( __( 'Daily Archives: <span>%s</span>', 'your-theme' ), get_the_time(get_option('date_format')) ) ?></h1>
<?php elseif ( is_month() ) : ?>
                <h1 class="page-title"><?php printf( __( 'Monthly Archives: <span>%s</span>', 'your-theme' ), get_the_time('F Y') ) ?></h1>
<?php elseif ( is_year() ) : ?>
                <h1 class="page-title"><?php printf( __( 'Yearly Archives: <span>%s</span>', 'your-theme' ), get_the_time('Y') ) ?></h1>
<?php elseif ( isset($_GET['paged']) && !empty($_GET['paged']) ) : ?>
                <h1 class="page-title"><?php _e( 'Blog Archives', 'your-theme' ) ?></h1>
<?php endif; ?>
<?php rewind_posts(); ?>
<?php global $wp_query; $total_pages = $wp_query->max_num_pages; if ( $total_pages > 1 ) { ?>
                <div id="nav-above" class="navigation">
                    <div class="nav-previous"><?php next_posts_link(__( '<span>&laquo;</span> Older posts', 'your-theme' )) ?></div>
                    <div class="nav-next"><?php previous_posts_link(__( 'Newer posts <span>&raquo;</span>', 'your-theme' )) ?></div>
                </div><!-- #nav-above -->
<?php } ?>           
<?php while ( have_posts() ) : the_post(); ?>
                <div id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
                    <h2 class="entry-title"><a href="<?php the_permalink(); ?>" title="<?php printf( __('Permalink to %s', 'your-theme'), the_title_attribute('echo=0') ); ?>" rel="bookmark"><?php the_title(); ?></a></h2>
                    <div class="entry-meta">
                        <span class="meta-prep meta-prep-author"><?php _e('By ', 'your-theme'); ?></span>
                        <span class="author vcard"><a class="url fn n" href="<?php echo get_author_link( false, $authordata->ID, $authordata->user_nicename ); ?>" title="<?php printf( __( 'View all posts by %s', 'your-theme' ), $authordata->display_name ); ?>"><?php the_author(); ?></a></span>
                        <span class="meta-sep"> | </span>
                        <span class="meta-prep meta-prep-entry-date"><?php _e('Published ', 'your-theme'); ?></span>
                        <span class="entry-date"><abbr class="published" title="<?php the_time('Y-m-dTH:i:sO') ?>"><?php the_time( get_option( 'date_format' ) ); ?></abbr></span>
                        <?php edit_post_link( __( 'Edit', 'your-theme' ), "<span class="meta-sep">|</span>ntttttt<span class="edit-link">", "</span>nttttt" ) ?>
                    </div><!-- .entry-meta -->
                    <div class="entry-summary">
<?php the_excerpt( __( 'Continue reading <span>&raquo;</span>', 'your-theme' )  ); ?>
                    </div><!-- .entry-summary -->
                    <div class="entry-utility">
                        <span class="cat-links"><span class="entry-utility-prep entry-utility-prep-cat-links"><?php _e( 'Posted in ', 'your-theme' ); ?></span><?php echo get_the_category_list(', '); ?></span>
                        <span class="meta-sep"> | </span>
                        <?php the_tags( '<span><span>' . __('Tagged ', 'your-theme' ) . '</span>', ", ", "</span>ntttttt<span class="meta-sep">|</span>n" ) ?>
                        <span class="comments-link"><?php comments_popup_link( __( 'Leave a comment', 'your-theme' ), __( '1 Comment', 'your-theme' ), __( '% Comments', 'your-theme' ) ) ?></span>
                        <?php edit_post_link( __( 'Edit', 'your-theme' ), "<span class="meta-sep">|</span>ntttttt<span class="edit-link">", "</span>ntttttn" ) ?>
                    </div><!-- #entry-utility -->
                </div><!-- #post-<?php the_ID(); ?> -->
<?php endwhile; ?>           
<?php global $wp_query; $total_pages = $wp_query->max_num_pages; if ( $total_pages > 1 ) { ?>
                <div id="nav-below" class="navigation">
                    <div class="nav-previous"><?php next_posts_link(__( '<span>&laquo;</span> Older posts', 'your-theme' )) ?></div>
                    <div class="nav-next"><?php previous_posts_link(__( 'Newer posts <span>&raquo;</span>', 'your-theme' )) ?></div>
                </div><!-- #nav-below -->
<?php } ?>

The Author Template

Not a lot is going to change with our Author Template. You’re going to like this one. Copyarchive.php and rename it author.php. All we need to change is the page title section.

1
2
<h1 class="page-title author"><?php printf( __( 'Author Archives: <span>%s</span>', 'your-theme' ), "<a class='url fn n' href='$authordata->user_url' title='$authordata->display_name' rel='me'>$authordata->display_name</a>" ) ?></h1>
<?php $authordesc = $authordata->user_description; if ( !empty($authordesc) ) echo apply_filters( 'archive_meta', '<div>' . $authordesc . '</div>' ); ?>

Easy, right?

The Category Template

The Category Template is another simple template now that we have a proper Archive Template. Copy archive.php and rename it category.php.
Now open up functions.php. We’re going to drop a custom function—from the brilliant Sandbox Theme—in there that’s going to make our Category Template a little more usable.

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
// For category lists on category archives: Returns other categories except the current one (redundant)
function cats_meow($glue) {
    $current_cat = single_cat_title( '', false );
    $separator = "n";
    $cats = explode( $separator, get_the_category_list($separator) );
    foreach ( $cats as $i => $str ) {
        if ( strstr( $str, ">$current_cat<" ) ) {
            unset($cats[$i]);
            break;
        }
    }
    if ( empty($cats) )
        return false;
    return trim(join( $glue, $cats ));
} // end cats_meow

Our custom function cats_meow() removes the current category from category pages. In other words, it gets rid of redundant categories in that list of categories we have just underneath the excerpt of our post.
Now, back in category.php, replace the page title section with the following code:

1
2
<h1 class="page-title"><?php _e( 'Category Archives:', 'your-theme' ) ?> <span><?php single_cat_title() ?></span></span></h1>
<?php $categorydesc = category_description(); if ( !empty($categorydesc) ) echo apply_filters( 'archive_meta', '<div>' . $categorydesc . '</div>' ); ?>

And in the .entry-utility div, replace …

1
<span class="cat-links"><span class="entry-utility-prep entry-utility-prep-cat-links"><?php _e( 'Posted in ', 'your-theme' ); ?></span><?php echo get_the_category_list(', '); ?></span>

with the modified …

1
2
3
4
<?php if ( $cats_meow = cats_meow(', ') ) : // Returns categories other than the one queried ?>
                        <span class="cat-links"><?php printf( __( 'Also posted in %s', 'your-theme' ), $cats_meow ) ?></span>
                        <span class="meta-sep"> | </span>
<?php endif ?>

The Tags Template

The Tags Template is almost identical to the Category Template, except, well, it’s for Tags. You know the drill: copy archive.php and rename it tag.php.
We’ve also got a custom function—again, from the brilliant Sandbox Theme—for ourfunctions.php called tag_ur_it(). It works just like cats_meow() except it removes redundant tags.

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
// For tag lists on tag archives: Returns other tags except the current one (redundant)
function tag_ur_it($glue) {
    $current_tag = single_tag_title( '', '',  false );
    $separator = "n";
    $tags = explode( $separator, get_the_tag_list( "", "$separator", "" ) );
    foreach ( $tags as $i => $str ) {
        if ( strstr( $str, ">$current_tag<" ) ) {
            unset($tags[$i]);
            break;
        }
    }
    if ( empty($tags) )
        return false;
    return trim(join( $glue, $tags ));
} // end tag_ur_it

Now, in tag.php, replace your page title with:

1
<h1 class="page-title"><?php _e( 'Tag Archives:', 'your-theme' ) ?> <span><?php single_tag_title() ?></span></h1>

and in .entry-utility, replace …

1
<?php the_tags( '<span><span>' . __('Tagged ', 'your-theme' ) . '</span>', ", ", "</span>ntttttt<span class="meta-sep">|</span>n" ) ?>

with the modified …

1
2
3
<?php if ( $tag_ur_it = tag_ur_it(', ') ) : // Returns tags other than the one queried ?>
                        <span class="tag-links"><?php printf( __( 'Also tagged %s', 'your-theme' ), $tag_ur_it ) ?></span>
<?php endif; ?>

And that’s it!

How To Create a WordPress Theme

This post is part of a WordPress Themes Tutorial that will show you how to create a powerful WordPress Theme from scratch. Read it from the beginning and code yourself up something awesome.