Ohmystinkinheck

Now, if I didn’t want to go any further, once I saved and uploaded this .php category page it would look like this.

However, I don’t like the fact that my opening paragraph and my actual posts that are archived in this category look the same. This is where CSS comes in. Depending on your theme, you may have multiple <h> tags to select from. Right now, mine are using the <h2> tag, but I’m gonna change it up just a bit.

I open my style.css file (my stylesheet) within the /themes/mrtechie/ directory and see what has already been created (why reinvent the wheel, right?)

The <h1> tag has been assigned to my actual blog header - I’m not messing with it. The <h2> tag is used for my blog titles (and at the moment, for this category header), so I’m gonna try the <h3> tag on for style and see how that affects the overall look.

Hmmm…my first impression is that the font is smaller than I would like, but now that I think about it, I’m not certain I want my archives to be outlined the way they are now.

What I know I want:

• The title of the tutorial post - and I want it hyperlinked to the post.
• The date
• An excerpt

Okay, so back to the category-1.php. I know I’m going to include the date, which in WordPress is coded like this:

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

The excerpt of the post is nice to include:

<?php the_excerpt(); ?>

And of course, we already know the title, but for grins, I’ll put it here;

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

I’ve decided to use a bulleted list, which makes all of this nice and neat and drop the header tags. So here’s the code:

<?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; ?>

Except that I don’t care for the heavy indent, would like to change the bullet for an icon of some sort, and the title is a bit too small for my taste.

TIME FOR SOME CSS! Whoooohooo!

First things first. Let’s make the post title larger. From the code above I can see that it falls under the “post” div class. It is also in a bulleted list. So, I’m looking for:

.post li

The thing is, if I assign a larger sized font for the hyperlink in any bulleted lists in the posts, then it will apply across all of my posts - even to things that aren’t in titles. That wouldn’t look right - having a large font in the middle of my text just because I made a hyperlink. So, instead of coding:

.post li a

… within the CSS, I’ve created another class for the actual active link and also switched up the colors for fun. Now the CSS looks like this:

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

Now ONLY those hyperlinks with the class .title assigned to them will change from the regular color scheme and size of the site text. And, it is orange - which makes it significantly different from the header.

This is what the code looks like within my category-1.php page

<?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; ?>

The other thing I wanted to do was switch out the bullet for an interesting icon. A while back I posted a free (huge) downloadable package of icons from famfamfam. I’m going to use one of those here.

Again, I have to look at my code and see what div class the posts rest in. The div class is content. So, I’m looking for the following in my code:

#content

And here it is:

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

The icon will need to be assigned to the bulleted list as a background-image. This is what I added below the #content CSS to allow for the regular bullet to be replaced with the green arrow icon:

#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;
}

Save and upload your changes to your style.css either via an FTP program, your web host’s file manager, or even your WordPress Theme Editor.

I’m suitably happy with how it looks (for now):

Final screenshot of new category-1.php file.

Questions?

^*I use Filezilla which can be downloaded FOR FREE. If you follow that link and click on the “FileZilla_3.0.0_win32-setup.exe” text-link, it’ll begin the download. Ask it to save it to your desktop and run the install from there. It is quick and easy to use in accessing your server files.

Reference: WordPress Wednesday: Dashing through the Dashboard

15 Responses to “Personalize your WordPress Category Archives”

1. WordPress Wednesdays » Blog Archive » Writing Personalized WordPress Category Archives

   [...] WordPress Wednesdays tutorial will help you get there. Check out what we did with our Tutorials [...]

2. Angella

   Hooray for WordPress Wednesdays!

   You. Are. The. BOMB.

3. Steph

   I love WordPress Wednesdays. Also? This leads me to a question about Categories v. Tags, but I’m not sure it’s appropriate to drag that up here. :grin:

4. OMSH

   Steph - Yea, another day we’ll tackle that one. I also think that Lorelle has discussed it briefly over at her site.

   Here are a couple of links for you:
   1. Tags are not Categories, Got it?
   2. Categories versus Tags - What’s the Difference and Which One?

5. BOSSY

   Bossy loves you - you are a source of inspiration and one of these days Bossy is moving over to WordPress… she just needs to locate about two-thousand free hours to move all of her archives, and the photos within all those posts, oy the photos…

6. Phil

   Thanks for the great post… Maybe I missed something in the post but how do you link to the new page you just created? Also if you want to place the link in the blog header do you have to hard-code it in? You can’t just add a page that is a link as far as I know, that would be a good feature for WP to implement. Think add new page that links to an existing page or an external page but still appears in your pages list.

7. OMSH

   You know what Phil - you’re right, I didn’t clarify how you link to it.

   If you go into Mange > Posts and click on the hyperlinked Category name in the 3rd column it’ll give you the link. It recognizes the .php page you created and substitutes it in without you doing anything at all.

   What do you mean by “blog header”? As in the header.php? Or do you mean in the post itself?

   If in the header (like my WordPress Wednesdays Archives here at OMSH) - yes, hard code it in.

8. Phil

   Thanks!

   Yes that is exactly what I meant about the header. I hate that you have to hard-code it in, WP should make an add new page that is just a link but still adds to the pages menu system.

9. OMSH

   Phil - The more you personalize, the more you hand code. The majority of my site is hand-coded. I like it that way because I prefer not to work within a browser to edit - I like uploading to the server.

   I think the more automated something becomes, the less you can modify it to meet your exact specifications.

10. Domestic Chicky

    Great tutorial…I never thought to do that. Thanks for posting the tags vs cats as well, because that was my next question :)

11. Steph

    I’ve read Lorelle’s stuff, but frankly? She’s a lot harder to read than you are, and I’m not so sure I agree with her on Categories v. Tags. I wanted your opinion on it. :grin:

12. OMSH

    Domestic Chicky - You’re welcome. :)

    Steph - Another day…on another day! :)

13. kerflop

    Miss Heather, my theme doesn’t have an archive.php page - not every theme does, and I’ve found that some themes have archive.php pages that differ one from another. Could you post the archive.php file you used and edited so we could create something similar?

    xo

14. OMSH

    kerflop - Thanks for reminding me of this - I didn’t consider that some themes haven’t including the archive.php.

    In my last two themes, I’ve used the WordPress Default theme’s archive.php. Anyone running WordPress can grab the code for archive.php in one of two ways.

    1.) Go to Presentation > Theme Editor and select from the drop-down menu the ‘WordPress Default’ theme. Then click on the first link in the right navbar for “archives”. This will bring up the archive.php in the editor window at left; you can then copy and paste into a text editor.

    2.) If you have deleted the default theme file in your WordPress /themes/ directory, just download the most recent version of WordPress and it is always included. Remember it is archive.php (singular), not archives.php.

15. Jenny

    Awesomeness. Totally gonna do this!!