the-deuce.jpg

Wicked WordPress Archives in One Easy Step!

Design Tips at Pearsonified — Wicked WordPress Archives

If you’ve been blogging for any length of time, then odds are good that your archives are stuffed with posts that people might find interesting or useful. Problem is, when your best articles disappear from the home page, they descend into the depths of your site, landing in a lonely place known as the archives.

We all know that people don’t actually read stuff on the Web — they scan it, looking for content that is not only pertinent to them but also offers a clear and distinct benefit. In most cases, this is a rapid-fire process, and if somebody has committed enough time to even get to your archives, you can bet on the fact that their willingness to hunt for relevant content is dropping every second.

Therefore, if you want your archives to be effective (because most archives are decidedly not), then you need to provide specialized archive views that place a premium on scannability. Fortunately, you can accomplish this with almost no effort in one easy step!

Over the last few months or so, I’ve seen and spoken about a couple of great ways to expose your readers to older content:

  1. Remix your site’s architecture a bit, providing static links to your best content that are visible throughout your site.
  2. Periodically link back to articles that either facilitate the current discussion or provide added value when consumed along with your newest material.

While I highly recommend both of these methods, we’re still left with one pesky problem — those darn archives.

Today, you can solve that problem by making your archives more appealing than ever.

How to Create Archives with Real Sex Appeal

Which one of these do you think would hold a reader’s attention longer?

If you said the first one, then I suppose you’re one of those types who “only reads it for the articles.”

But you’re not foolin’ me or anyone else around here :)

So, how do we change our boring archives into beautiful, unique pages with images that just beg to be scanned? The answer lies with the Optional Excerpt, a feature of WordPress that is utilized by most themes when displaying your archives 1.

All you have to do is copy and paste a paragraph or two 2 from your article into the Optional Excerpt box, and then for maximum appeal, be sure to add a descriptive image along with the text. Or, if you really want to get creative, you can type up a brief summary of your post — a teaser — to try and “sell” visitors on the merits of a particular post as they scan your archives.

The primary reason why you’d want to do this is because WordPress does not apply any styles to auto-generated excerpts.

In layman’s terms, this means you end up with big, ugly blocks of text that lose all semantic meaning — paragraph breaks, lists, links, bold, italics, you name it — it all gets nixed if you let WordPress auto-generate an excerpt. The results are not attractive, and you can probably see why users generally don’t respond well to archives.

Simply put, unformatted information is extremely hard to scan, and if you’re serious about publishing on the Web, you need to do everything you can to improve the scannability and allure of your site.

So, do your visitors a favor and take back your archives by utilizing the Optional Excerpt field in your posts.

Oh, and did I mention that it gives you yet another avenue for producing properly-formatted text on pages that will get indexed by Google?

Heck, if you don’t want to do it for your readers, at least do it for your friends, the search engines!

1 This will only work if your archives are constructed with excerpts (the_excerpt()). Some themes, like K2 for instance, offer “live archives” or other alternative methods of display. In my opinion, these do nothing to solve the scannability problem, and the fact that they are so similar to regular blog pages makes me think that users would be less likely to delve into the content to find something of interest. If you’re on an architecture that doesn’t utilize excerpts for displaying archives, you may want to reconsider your options as far as themes go.

2 If you use the teaser approach to publishing like I do, I recommend simply copying and pasting everything that comes before the <!--more--> tag into the Optional Excerpt field.

Take the Next Step!

  1. Share this on Twitter:
  2. Share this on Facebook:
  3. Submit it to StumbleUpon
  4. Bookmark it on Delicious

47 comments… read them below or add one

Mike November 13, 2006

Where do you store all of this knowledge O’ Great One ? Your head doesn’t look THAT big ….

Reply

roadsofstone November 13, 2006

It’s a great idea to place a key image thumbnail in the opening lines of your post. It provides a visual ‘vignette’ for searchers going through your archives and also shows up in aggregators (like BritishBlogs, or WordPress.com tagsurfer) to ‘lift’ your material above background.

You should ensure that your image placement works in both blog front page and single post displays, where an image at the very top of a post can often be wiped out by the post title.

Two or three lines down may work best.

Reply

zoltandragon November 13, 2006

I’m on the wordpress.com server (and I know, Chris, that you would never make comment on that), and all I need to do is to insert the stuff into my post – and lo, in my archives I have the “excerpt” with image and text. And I agree, it is a lot better than just having post titles – which sometimes fail to be that descriptive.

Reply

Philip November 14, 2006

I haven’t really thought about this. This is a great idea. My archives are so boring and I am trying so hard to provide great content that is only seen for a couple of days before vanishing into archive hell.

Reply

EliteGamer November 14, 2006

This method also helps you gain a google page ranking on your pages which is great.

Reply

Jim Westergren November 14, 2006

I wrote an article relating to this. You might find it helpful.

Reply

Carlton Bale November 14, 2006

I definitely like the look of the “vibrant” archives. The only downside I see is that the example doesn’t necessarily show that there is more content to each article, such as a “click here for more . . .” link at the end. The view is great, but it is not obvious that there is more content with each of the articles. Is this just a function of the template?

Reply

Chris P. November 14, 2006

Carlton,

I totally agree with you. Yes, it’s a function of the template, and I could actually change it to make it act just like the front page does.

But then, that would eliminate the need for an excerpt, and in addition, some of your flexibility would be lost.

For instance, you would not be able to write a teaser containing text that is independent from the content of the post. Also, you would have to live with the positioning of the pictures in the beginning of your post.

Personally, I like to move the images around in my excerpts so that my archives alternate. Then again, I am probably a lot more anal about this than most people!

Reply

Chris P. November 14, 2006

Update: I just figured out a way to deal with this, and I’ll be adding the link both on this site and also on the next release of the Cutline Theme for WordPress.

Reply

Kman November 16, 2006

I’m certainly going to try these ideas out. I espically like the must read archives that you have on your site.

Reply

PHP Hosting December 7, 2006

Yes it absolutely resonate with me. Visitors are the one who values your blog if they like not only the text but the design and look and formatting of the text. Readability and that is also quick is one of the most important factor in blogs.

Reply

Edwin December 10, 2006

I have heard that Google does not like excerpt because it may think that you have duplicate content.

Reply

Chris P. December 11, 2006

Edwin,

I don’t know that there’s any truth to that, especially given that your homepage is a dynamic entity. If you have that content sitting there for a few months, then yeah — it could become an issue.

Also, another question as we speed into the future:

Is your site for users or search engines?

Usability is the new SEO.

Reply

Edwin December 11, 2006

My site is for my visitors, but remember, without search engines, i won’t get any traffic. That’s why I’m very careful on what i do to my site.

Reply

Chris P. December 11, 2006

Edwin,

I have over 2,000 visitors a day and scads of search engine traffic to boot.

As long as you post regularly, you’ll be fine.

Reply

charlie February 7, 2007

If you are publishing via Ecto on OS X, there is an option in the preferences to do a pretty good automatic job of this.
It uses the OS X Service called Summarize. It using swooshyness to summarize your text.

For instance: This is your post summarized:

“We all know that people don’t actually read stuff on the Web — they scan it, looking for content that is not only pertinent to them but also offers a clear and distinct benefit. In most cases, this is a rapid-fire process, and if somebody has committed enough time to even get to your archives, you can bet on the fact that their willingness to hunt for relevant content is dropping every second.

…All you have to do is copy and paste a paragraph or two 2 from your article into the Optional Excerpt box, and then for maximum appeal, be sure to add a descriptive image along with the text. Or, if you really want to get creative, you can type up a brief summary of your post — a teaser — to try and “sell” visitors on the merits of a particular post as they scan your archives.

…In layman’s terms, this means you end up with big, ugly blocks of text that lose all semantic meaning — paragraph breaks, lists, links, bold, italics, you name it — it all gets nixed if you let WordPress auto-generate an excerpt.

…Simply put, unformatted information is extremely hard to scan, and if you’re serious about publishing on the Web, you need to do everything you can to improve the scannability and allure of your site.”

And this is it shrunken down to one sentence:

“We all know that people don’t actually read stuff on the Web — they scan it, looking for content that is not only pertinent to them but also offers a clear and distinct benefit.”

Reply

Steve Renner May 6, 2007

Man,
Another Greeeeaaat Tip. I could spend all day here, I had better get out of here or I’ll never get any work done.

Thanks!

Steve

Reply

PAtty October 5, 2007

I need to locate these files as I changed my account. Thes e are impariative to my website.

Thanks, Patty Gaynor/kygirl

Reply

PAtty October 5, 2007

Did you lose my info

Reply

Simon T December 7, 2007

I agree with everything you say – but I’m still not sure how to go about creating these great looking sidebar navigation elements, such as you use here on this blog. I want to add categories such as reader favourites and author favourites, as a way of leading visitors to articles that might interest them. Abd perhaps a ‘must read’ as well. Any chance of an idiot’s guide to doing that? And when I say idiot, I mean someone who knows nothing about php.

Reply

Ed Bacchus January 25, 2008

Chris,
I am using Neoclassical theme. How can I get these vibrant archives to work on that theme?

Reply

vlad lauren February 9, 2008

This method also helps you gain a google page ranking on your pages which is great.

Reply

Chad May 3, 2008

I never even noticed the ‘optional excerpt’ field. Simple and brilliant. My favorite combination.

Reply

Web 2.0 Blog May 4, 2008

That’s how you do it. Thanks!

Reply

Brian June 25, 2008

OK – S0… How to do this? I’m not sure it works with my theme or I am doing something wrong. Can you direct me to more details on implementing the cool archive page? Don’t you just hate comments like this?

Reply

Brian June 25, 2008

OK – I see… When I clicked on the link in your post I thought I was looking at a generic archive page. I was really looking at a particular month and year. I can make mine do the same thing with excerpts or full content.

For me I needed to edit my archive.php and change the_content() to the_excerpt(). I also removed the display of tags.

What I am trying to figure out is how to have a simple list of all posts on a page with the fancy excerpts.

Reply

Busby Camalaniugan July 22, 2008

This what I am looking in. I will try this one. Thanks sir Chris!

Reply

Brock July 30, 2008

Thanks, Brian. I’m using Thesis, and I didn’t know what to do. But I was able to change the_content() to the_excerpt() in my archive.php and it worked!
Thanks, Chris. It looks a lot better. Now I just have to fill in all of those excerpts…

Reply

Brock July 31, 2008

As I said above, I like this tip. But I’m not sure how to include the “Read more” links in the excerpts. Carlton mentioned it in the comments above, but I’m not sure it was ever resolved. How can I add a “read more” link to my archive excerpts?

I tried adding the code generated from the “more” button in the blog content editor to the excerpt box but nothing showed up. I see, Chris, that you said it was a function of the template, but I’m still not sure how to add it. Without it, I don’t think it is obvious that the reader should click-through for more content.

Reply

Chris Pearson July 31, 2008

Brock — By default, WordPress doesn’t come with an elegant way to handle this, but you do have one option for getting your “click to continue” (the equivalent of “read more”) links to work immediately.

Instead of using the_excerpt() on your archive pages, you can use the_content('[click to continue&hellip;]'). Assuming you’ve added <--more--> tags to your posts, this will result in excerpts that are identical to those found on your homepage when you first publish your articles.

Now, separately, I could create a function to detect the use of the_excerpt() in your archive pages, and then I could render a helpful “read more” link after printing out the excerpt. This is precisely the kind of thing that makes sense in a theme like Thesis, or if you’re pretty savvy, in a custom WordPress function.

Reply

Brock July 31, 2008

Does that mean will create such a function?

It may not be high on your priority list, but I think it would be cool, especially since I don’t know how to go about doing it myself.

Thanks for the info.

Reply

Chris Pearson August 7, 2008

Brock — I’ll see what I can do about getting this into the next release of Thesis.

Reply

John Haydon September 17, 2008

Chris,

I’m curious how you product the footnotes in your posts.

John

Reply

Chris Pearson September 18, 2008

John — I code up all my footnotes manually. You can view the source to see exactly what I did… I use the regular old text editor inside WordPress (and not the rich visual text editor), and I simply type in the footnote HTML that you see in the source.

Reply

Hiddai March 22, 2012

I’m a WordPress beginner.
I read your answer to John Haydon.
I did as you said and create a footnote as you did.
So, first Thanks for the advise.
Second, I got involved with the tag inside the .footnotes div. At first time I’ve got something like this 1 Text…then empty .

Please,

Do you know how can we prevent this?

Hiddai

Reply

John Haydon September 18, 2008

Chris,

Thanks! By the way, I use Thesis (which rocks) but really like out this template looks. Can you point me to where I can see the differences in fuctionality?

John
CorporateDollar.Org

Reply

Chris Pearson September 18, 2008

John — To use an analogy, Thesis is like a brand new, LEED-certified green building that was designed by an architect. This template, on the other hand, is a rickety bungalow designed by someone who knew how to put a house together but didn’t know how to do much else (aka me in 2006).

Outside of manually-coded tomfoolery, the current Pearsonified template has no functionality at all… It just knows how to spit out content from a WordPress database.

There is a pretty high demand for a Pearsonified-esque template, and because of this, I’m going to offer a Thesis “skin” at some point in order to satisfy this demand. No ETA on that yet, though.

Reply

John Haydon September 19, 2008

Chris,

I thought that was the case. I absolutely love Thesis – and the forum rocks! Brian is really on top of things (someone should give him a raise…).

Take care,

BFOT
(Big Fan Of Thesis)

John
CorporateDollar.Org

Reply

Niharn September 26, 2008

Thanks for the wonderful tip about excerpt box. I didn’t know about this before i read this post..

Thanks again. I will sit back and modify all my posts to add some text with image in excerpt box.

Reply

Patrick K. O'Brien September 26, 2008

@Chris – A “Pearsonified” skin for Thesis would be awesome. There are several features of this site that I really like. But I also appreciate the care you are putting into Thesis, so I’m more than happy to wait while you focus on the fundamental features. The glitzy stuff can always come later, right?

Reply

Rudi Lehnert October 6, 2008

I think my archives are even more attractive than yours:

http://blogorama.eisbrecher.net/archiv/

Right?

Reply

Alan Richardson December 22, 2008

This seems just the answer I am looking for and will try it out asap
Thanks Chris

Reply

Alex July 20, 2009

Where’s the tutorial on getting the archives in lists like you have them? :P

Reply

Trisha November 19, 2009

VERY SEXY! Your archive pages look fantastic. Yes, it would seem that visitors would rather scan an archive page than read through your entire category or tag set. Great job! Im doing this on two of my wordpress blogs. it just makes more sense.

Reply

Stephen August 28, 2010

Thanks,

This is a great article and a great website. I liked it very much. It will help me to optimise my websites in europe. I have website in travel and that means a lot of seo work !!

Thanks a lot and greetings,

Stephen

Reply

Joelle Dembowski March 1, 2011

I just want to tell you that I am new to blogging and site-building and definitely savored your page. Very likely I’m going to bookmark your website. You absolutely have really good article content. Bless you for sharing with us your web page.

Reply

Vijay February 16, 2012

Very nice article. Your Archive pages are fabulous too. I think its the time for me to start thinking about creative archive pages too :)

Reply

Hoot and/or Holler

Previous post:

Next post: