i am a wife and a mother. i am also a
web designer. balance is the challenge
i rise to everyday.
"It seems like the way to stretch out your day is to do less. Do just a few things, and do them well. " - Another precious quote by Blue Yonder.
→ Comments
01-17-2008 · 15 Comments
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, if you are like me, you only have a few categories where you file away your WordPress posts all nice and neat. I know that some of you come here looking for my WordPress Wednesday Archives, but are not here to read about anything else (like accidental menthol douches or perhaps worse, 30 Days of Shoes.)
With that understanding, I have put the WordPress Wednesdays Archive in my top header - easily accessible and well organized. It isn’t a page I have to update manually every time I write a new post. It works just like the standard archives - but instead of showing ALL my post files, it only shows the category I’ve selected in a nice little setting.
So that’s what we’re gonna do today - develop individual category archives within WordPress. Everyone on board?
To perform this tutorial you will need:
First things 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.
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. Over at WordPress Wednesdays I’m using the Mr. Techie theme. As you can see, 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 is my opening paragraph I just wrote up 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!
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:
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
[...] WordPress Wednesdays tutorial will help you get there. Check out what we did with our Tutorials [...]
Hooray for WordPress Wednesdays!
You. Are. The. BOMB.
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:
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?
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…
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.
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.
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.
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.
Great tutorial…I never thought to do that. Thanks for posting the tags vs cats as well, because that was my next question :)
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:
Domestic Chicky - You’re welcome. :)
Steph - Another day…on another day! :)
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
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.
Awesomeness. Totally gonna do this!!
© Oh My Stinkin' Heck, 2007. Every stinkin' right is reserved!
Hosted by the amazing Liquid Web - I'd use no other.
Wanna fill my cup?
Starbucks Reload Card #: 6034 2079 5795 6039
Readers
Be seen on my blogroll above!
"Cuz aliens don't have harmonicas!"- Kenny
Previous Posts
Me - Outside of Omshville
Consider Cloth Diapers
chew on these sponsored links
on my soapbox
This Savvy Quiz Sponsored By
kids' educational toys & games for math & reading skills
Crafty OMSH Readers
Ladybug Suebee's Country Store
Comfortably Crazy
Olive Hue Designs
AllyZabba.com
AllyZabba.com
Beads in the Belfry
Simply Lovely
Gypsy Feather
Bethany Actually
Crocheted by Katie
Accents of Bella
Capturing Today
Angella at Etsy
not the mama
I Feel Pretty
Carole Axium Designs
The above ads are a FREE service for crafty OMSH readers.