Yesterday I talked about how to increase blog traffic -- specifically how we increased All Freelance Writing's traffic by 80% in less than a year. One of the things that had a big impact for us was reformatting our category archive pages.
Rather than making people browse through page after page of posts (they never do get to the really old gems that way it seems), they can see a list of just the post titles -- all post titles for a category on one page. As I mentioned in that post, that change led to around a 10% increase in traffic when we implemented it, despite having fewer visits to category pages. People were visiting more actual posts, which is what we really want as bloggers anyway.
A reader wanted to know how to make that change. So I promised to post my code. And here it is. This is the code I used to format our category pages the way they are now. This code was added to the archive.php template file:
<div style="margin-left: 40px;"><?php /* If this is a category archive */ if (is_category()) $description=category_description(); echo $description; ?></div><?php while (have_posts()) : the_post(); ?><div style="margin-left:50px;"><ul><li><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></li></ul></div><?php endwhile; ?>
Now I tossed some CSS formatting in there in my case because the alignment was off with the rest of our design. You can remove that or alter it to suit your own design needs. Here's what the code looks like with that removed:
<?php /* If this is a category archive */ if (is_category()) $description=category_description(); echo $description; ?><?php while (have_posts()) : the_post(); ?><ul><li><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></li></ul><?php endwhile; ?>
Please remember that if you copy / paste this code from the site directly you might not get plain-text quotes. So you might have to retype them manually in your plain-text editor or template file.
Now I don't claim that this is the "right" way to do it or the "best" way to do it. But if quick and dirty gets the job done, it works for me (within reason). And in this case, it just worked.
I make no promises that this code won't royally f*ck up your blog. As always, before you make any changes back up your original archive.php file so if there's a problem you can quickly put it back the way it was. I take no responsibility if it doesn't play nice with your particular theme. If you already have special category page formatting in there, you might just be able to alter that a bit to get what you want. Some themes even have a separate category.php template which is a bit of a different beast. So use this information at your own risk. (Oh, and it's only for WordPress.org blogs -- I do not know if you have access to these template files on WordPress.com blogs.)
First, let me say that I appreciate you sharing this tip!
Well, I checked out my code, and I think I spotted where it begins. But where it ends… I have no idea! It looks totally differently than yours. I’m wondering if you know a coder that would be able to help me with this small project.
I do most of my own tweaks. If you save that file as a .txt and send it to me as an attachment to jenn(at)allfreelancewriting(dot)com (don’t paste the code right into the email b/c it might screw w/ the formatting) I’ll take a look and see if I can figure it out for you. If not I’ll point you to someone who might be able to help.
Hi,
Searching for answers and stumbled upon this post – I’m trying to do a page of posts – which is working great, except: there are no spaces between the articles. I want each title to be on a new line so each post is separate and in line with left margin.
I’m still playing around, but if you see this before I find an answer can you give me a clue? Thanks!
The problem is that your posts are too short compared to the image sizes you’re using on that page. As you can see, the first post looks fine because there’s more text. So the one after it displays on a new line and aligned to the left as it should. But in others your images are too large vertically which forces them to push down on the left side and screw up the title alignment for the posts after them. The easiest solutions are to use smaller images or to write more text in each post so the text extends further vertically than the image you want to use.
I did notice that; I was hoping that there was a piece of code that could go into the pageofposts.php that would tell it stop doing that… It keeps indenting for each type – the page is really crazy looking.
Thanks for your quick reply!
V-
The PHP page wouldn’t help. You’d need to fiddle with the stylesheet to try to do something like that (often called style.css). But even if you could figure it out there, you’d be left with huge blocks of white spaces next to your images and below the short text blocks, which can look pretty bad too. If you can find a way to make sure text exceeds image size though you should be able to avoid all of those formatting problems. Plus you’ll have enough text to give you some SEO benefits (the short text now really isn’t enough to make individual post pages consistently rank well in search engines anyway).