OMSH

This tutorial was originally written for a website no longer live, using WordPress Version 2.0.5. The same precepts apply for newer versions of WordPress. I have updated some of the screenshots to show WordPress 2.7 when there might be confusion.

It has been one bazillion years since I wrote one of these – and oh my goodness, thank you for your patience. Mr. OMSH has taken good care of me and today I feel surprisingly rested. Now, if I can just shake this cough/lung/phlegm stuff. Nice, eh?

Enough about me though – today is for you!

One of the most important parts of blogging is maintaining easily navigable archives. You never know when someone is going to happen across your blog and like it – I mean REALLY LIKE IT. And because you are an amazing blogger, when they do fall desperately in love with your every written word, they will want an easy way to access their favorite categories.

Now, when I first began blogging, it was a personal blog only. I had a few categories where I filed away WordPress posts all nice and neat, but for the most part, I wrote about important things like my flickr set of 30 Days of Shoes or worse, accidental menthol douches.

However, since there were many that didn’t care about those life-altering events, I had a category specifically for WordPress Wednesday Archives linked in my top header navigation – easily accessible and well organized. It was not a page I had to manually update every time I wrote a new post, but instead, worked just like a standard archive. Instead of showing all my post files though, it only showed that specific category’s archive in a nice little setting.

So that’s what we’re gonna do today – develop individual category archives within WordPress. Everyone on board?

Ingredients

To perform this tutorial you will need:

• (1) One 32oz. ,or greater if you want, SONIC Cherry Coke for me. What? No worries, I’ll wait.
• (1) One self-hosted WordPress account. This is not something that can be done with free web-hosted sites where you do not have access to your server files. Go here for more information on how to ditch your blogging training wheels
• (1) One text editor (Microsoft Word, by the way, is NOT a text editor)
• FTP software. When I was on the PC I used ^*Filezilla, which can be downloaded and used for FREE. On my Mac I prefer Coda, which is not free. You can also upload through any other FTP program, and/your browser using the File Manager in the control panel of your web host.

First, log into your WordPress Dashboard and go to Manage > Categories.

Find the ID# for the Category you are going to create a separate archive for during this tutorial. This ID # can be found in the far left-hand column under the Manage > Categories section. I am going to do an archive for Tutorials, so my ID# is 1.

If you are running a newer version of WordPress, you will find and select your Category ID somewhat differently.

You still log into your WordPress Dashboard and go to Manage > Categories – the new interface looks like this:

Unfortunately, WP didn’t make the ID# for Categories as easy to find as they did in earlier versions. To get the Category ID#, move your cursor over the category text link you want, then, look down in the browser’s lower status bar to view the Category’s ID #. In this case, the Category selected has an ID# 1.

Next, using your FTP program, log into your WordPress server files. If you are unsure how to do that, please refer back to a previous tutorial where there are step-by-step instructions.

You will need to click your way through the directories /public_html/blog/wp-content/themes/ to your WordPress themes directory and find the theme you’re using. In this example, you can see I’m using the Mr. Techie theme, and it is in my /themes/ directory.

Within the Mr. Techie theme, I have a file named archive.php. Guess what? YOU DO TOO! That is the file we will use today to create a new category-based archive.

Download the archive.php to your hard drive OR if you have been keeping a local version of your current blog on your hard drive (WHICH YOU SHOULD!!!!) go ahead and pull it up into the text editor of your choice.

NOTE: I know that a few will write and ask me if these changes can be made in the Theme Editor of the WordPress Dashboard. The answer is no. The reason? We are creating a new .php file from a current .php file. Within the WordPress Presentation > Theme Editor you can edit/update already created files, but you cannot create and save new ones (yet) through it.

It will look like the image below click through to flickr to view the Original Size of the image:

Now, as I stated before, we are going to create a DIFFERENT .php file, so the first thing to do is save this archive.php file as category-#.php. In other words, place YOUR CHOSEN CATEGORY NUMBER in the place of the # sign; yes, the one we grabbed earlier from the WordPress backend. Mine was Category #1, so my file has now been saved as category-1.php.

As we go along, remember to save your changes here and there.

The first line of code on that .php file is:

 

<?php get_header(); ?>

You will replace it with:

 

<?php get_header(); query_posts( 'posts_per_page=-1&cat=' . $cat ) ?> 

Why?

Because if you don’t, your archive page will be limited to the number of posts you’ve selected to show on your home page. Which, if you’re like me, is 2. Let’s just say 2 listings does NOT a category archive make.

Now we’re gonna clean up your code a bit, by deleting all of the following if and else if statements and pasting in our own Category Archive Title.

Here’s what mine was.

Here’s how I changed it:

I just love cleaning up code.

Okay, next is the fun part. Write an opening paragraph for your specific category archive. If you want, you can insert an image. Heck, if you’ve been following these tutorials, you’ve already learned how to wrap text around an image – that’d be fun to do with either a picture, graphic or a logo.

So, here was my original opening paragraph I wrote at that time for WordPress Wednesdays Tutorial Archives. I placed it directly beneath the header with <p> tags. Nice and neat.

<?php get_header(); query_posts( 'posts_per_page=-1&cat=' . $cat ) ?>
<?php get_sidebar(); ?>
<div id="content">
	<?php if (have_posts()): ?>
		<h2 class="pagetitle"><?php echo single_cat_title(); ?> Archive</h2>
		<p class="post"><a href="http://www.flickr.com/photos/ohmystinkinheck/1324943458/" title="WordPress Wednesdays"><img class="left-noborder" src="http://farm2.static.flickr.com/1281/1324943458_fd63e325b9_t.jpg" width="100" height="90" alt="WordPress Wednesdays" /></a>Week by week my WordPress Wednesdays' posts are methodically teaching how to take advantage of the <a href="http://wordpress.org" title="WordPress">WordPress</a> blogging platform.</p>
			<p>If you aren't taking part in these tutorials, why the heck not?
WordPress is <b>FREE</b> and it just so happens to be the best open source blogging software available in the blogosphere!

<?php the_time('F jS, Y') ?>

<?php the_excerpt(); ?>

<a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title(); ?>"><?php the_title(); ?></a>

<?php while (have_posts()) : the_post(); ?>
<div id="post-<?php the_ID(); ?>" class="post">
   <ul>
      <li><a class="title" href="<?php the_permalink() ?>" title="Permanent Link to <?php the_title(); ?>"><?php the_title(); ?></a><br /><br /><br />
	   <?php the_time('m-j-Y') ?><br />
	   <?php the_excerpt() ?>
	  </li>
   </ul>
</div>
<?php endwhile; ?>

.post li

.post li a

.post li a.title, li a.title:hover , li a.title:visited {
     font-size: 1.5em;
     color: #FF7400;
     text-decoration: none;
     padding-left: 24px;
}

<?php while (have_posts()) : the_post(); ?>

			<div id="post-<?php the_ID(); ?>" class="post">
			<ulv
			<li><a class="title" href="<?php the_permalink() ?>" title="Permanent Link to <?php the_title(); ?>">
			<?php the_title(); ?></a>
			<br /><br />
			<?php the_time('m-j-Y') ?>
			<br /><br />
			<?php the_excerpt() ?>
			</li>
			</ul>
			</div>

		<?php endwhile; ?>

#content

#content {
	float: left;
	width: 430px;
}

#content ul {
	margin: 0;
	padding: 3px;
	list-style: none;
}

#content li {
       background-image: url(http://wordpresswednesdays.com/images/action_go.gif);
       background-repeat: no-repeat;
       background-position-x: left;
}