Propaganda Party: The Pop Stalin Design Manifesto

Single.php and Category pages

In part 1, I covered the code necessary to provide my home page functionality. In this segment, I’ll cover how I created the functionality for the single.php page and the category pages. The code for the single.php page closely mirrors the code for the index.php page with the addition of the comment code. Again, the process for creating these pages closely followed that of the index page–I created a prototype sketch, I fleshed it out in Photoshop and then I opened my text editor and started coding.

First, I wanted the single page to have roughly the same appearance as the index.php minus the additional posts below the “featured” post. I wanted the image to carry over into the post and I wanted the text to be the main emphasis on the page because that’s what a blog is all about in my opinion. I’ve seen lots of designs I like that had asides to the left or right of the post but in this incarnation, I wanted the reader to focus solely on the text of the post when clicking through.

1. Single.php Code

1
2
3
4
5
6
7
8
9
10

<?php get_header(); ?>
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
// THIS IS WHERE MY META AND OTHER POST CONTENT GOES
<?php endwhile; else: ?>
// THIS IS WHERE I PUT SOME SORT OF MESSAGE TELLING THE READER THEY'VE NOT FOUND WHAT THEY'RE LOOKING FOR
<?php endif; ?>
// SOME MORE OF MY OWN CSS LAYOUT CODE
<?php comments_template(); ?>
// I CLOSE UP ALL MY OPEN DIV'S
<?php get_footer(); ?>

As you can see, there are no custom loops or queries. The only “custom” code on this page is my CSS and the code I need to bring in the image from the custom field, which was covered in part 1. The real “exciting” stuff, actually takes place within the category pages so I’ll go over that in more detail next.

2. Category Pages and the Template Hierarchy

When visiting the WordPress Codex, I’ve often see the phrase “Template Hierarchy” but until this design, I’d never really read about it. What I learned was that if I wanted a different look or custom loops, I could use the hierarchy. The Template Hierarchy works like this; let’s say I have 5 categories and I want them each to have their own page. I can achieve this by creating a category page for each separate category and WordPress will look for a specific page for the category if I name the file the following way: category-5.php. The number in the file name is the actual number of the category so when a visitor clicks on, for example, Design and Design is category 5 in the database, WordPress will serve that page using category-5.php instead of just category.php or archives.php. It’s a simple way to create unique pages per category without the hassle of really having to creating template files.

3. Custom Loop for Category Pages

The first thing you’ll see on each category page is the heading for that page. For example, in the business category, you’ll see “Business Articles.” That is handled dynamically by using the following code:

<h2><?php single_cat_title(); ?> Articles</h2>

The PHP tells the database to spit out the category name or title.

The next thing you’ll see is the posts with excerpts. This is handled using a custom WordPress Query.

1
2
3
4
5
6
7

<?php
$temp = $wp_query;
$wp_query= null;
$wp_query = new WP_Query();
$wp_query->query('showposts=16&cat=3,9'.'&paged='.$paged);
?>
<?php while ($wp_query->have_posts()) : $wp_query->the_post(); ?>

A very important part of this custom query is telling WordPress that this page will be…paged; meaning there is more than one page. In order to use a custom query, you must use that bit of PHP code or else your paging, whether you use a plugin or the built-in navigation of older or newer entries, won’t work.

The next important part of this query is indicating how many posts per page should be displayed and what categories to display. Since I have sub-categories set-up under the main categories, I want to make sure those show up as well.

Styling My Category Pages

An important part of the next piece of custom code was styling the most recent post differently (do you notice a trend?). I wanted that post to stand out from all the others for two reasons. It gives the reader a point of reference as to what’s important on the page and it helps break up the design a little.

I decided when planning my redesign that I didn’t want the typical archives. I wanted to display past articles in a different way starting with making the most recent article be prominent on the category page. I did this with a simple bit of code that I discovered through the WordPress forums with the help of pshero. He too was looking for a way to style the most recent post differently than the rest and came up with the PHP code that would do the trick. Here is what I used to make the most recent post stand out on the category page.

8
9
10
11
12

<?php if (is_paged()) : ?>
<?php $postclass = ('archivelist'); ?>
<?php else : ?>
<?php $postclass = ($post == $posts[0]) ? 'archivelist-featured' : 'archivelist'; ?>
<?php endif; ?>

Then the above is applied to your div class the following way:

13

<div class="<?php echo $postclass; ?>">

Basically, what this piece of code does is create a way to assign two classes to the posts on the page dynamically. If it’s the most recent post, then it is assigend “archivelist-featured” and any subsequent post is then tagged with “archivelist.” If you click on the link above, it will take you to the thread and explain in more detail different usage.

4. Crossing the Finish Line

After I make things pretty, we need to add some of the basic WordPress code to show the date, post title and the excerpt.

14
15
16
17
18

<h3 class="meta"><?php the_date('m-d-y'); ?> &#8249;&#8250; <?php the_category(', ') ?></h3>
  <h3><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></h3>
  <?php the_excerpt(''); ?>   
   </div><!-- // END ARCHIVE LIST -->    
   <?php endwhile; ?>

We’re getting there. The last thing you may notice on the page, other than the footer, is the paged navigation. In order for that to work properly, you have to code it the following way:

19
20
21
22

<div class="navigation">
<?php if(function_exists('wp_pagenavi')) { wp_pagenavi(); } ?>  
</div><!-- // END NAVIGATION -->
<?php $wp_query = null; $wp_query = $temp;?>

You’ll notice that we close the custom WordPress query after we call for the paged navigation. If you don’t do that, you’ll have your pagination showing up on every page, most likely not showing a correct page count.

The End is Nigh

In this post I covered using PHP to dynamically pass CSS classes to differentiate posts, I covered template hierarchy and its purpose and I covered paging and custom queries. I hope this is useful to folks and expanding on your WordPress coding foundation.

In part three, a much shorter article by far, I’ll cover what plug-in’s I’m using and why and the benefits of automated content.