crashing-wave.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. Submit it to StumbleUpon
  3. Bookmark it on Delicious

69 trackbacks

Wicked WordPress Archives in One Easy Step! at innerangst.net
November 14, 2006 at 11:46 am
DV for Teachers » Blog Archive » Wicked WordPress Archives in One Easy Step! | Pearsonified
November 14, 2006 at 12:23 pm
I think I’ll try that | Christian Montoya
November 14, 2006 at 5:47 pm
Like Your Work » Blog Archive » links for 2006-11-15
November 14, 2006 at 9:25 pm
Prime News Blog » Blog Archive » Wicked WordPress Archives in One Easy Step!
November 15, 2006 at 3:46 am
The Patrick Stuart Website and Blog : Blog Archive : links for 2006-11-15
November 15, 2006 at 6:24 am
The Inveterate Observer » Blog Archive » Wicked WordPress Archives in One Easy Step!
November 15, 2006 at 9:49 am
messaginglab reads and writes » links for 2006-11-15
November 15, 2006 at 1:29 pm
Web Links 11.15.2006 « Rhonda Tipton’s WebLog
November 15, 2006 at 11:29 pm
SOME MORE LINKAGE at The End of Dave
November 16, 2006 at 12:03 am
ARTbird309’s Blog » Blog Archive » links for 2006-11-17
November 16, 2006 at 10:20 pm
I Only Wish » Blog Archive » Wicked WordPress Archives in One Easy Step!
November 21, 2006 at 7:42 am
Argentina’s Travel Blog Launches! - Flee the Cube
November 21, 2006 at 12:54 pm
links for 2006-11-15 at DeStructUred Blog
November 21, 2006 at 4:22 pm
Pierres Service » Blog Archive » Wicked WordPress Archives in One Easy Step!
November 28, 2006 at 5:01 pm
links for 2006-11-15 // willkoca
December 19, 2006 at 4:07 pm
EveryDigg » Blog Archive » Wicked WordPress Archives in One Easy Step!
January 28, 2007 at 10:14 am
Banapana » Blog Archive » Drafting Blog
February 21, 2007 at 8:54 am
weasel verman » Wicked WordPress Archives in One Easy Step!
March 5, 2007 at 2:29 pm
Best of Feeds - 29 links - blogging, seo, programming, search, google, humor « //engtech - internet duct tape
May 21, 2007 at 6:03 pm
619,000 Rss readers cant be wrong | make money blogging
December 15, 2007 at 7:22 am
Mastering Your WordPress Theme Hacks and Techniques
May 25, 2008 at 5:00 pm
40+ Most Wanted Wordpress Tricks and Hacks
June 15, 2008 at 6:53 am
Lorien Johnson » » links for 2008-06-23
June 23, 2008 at 12:18 am
Tutoriale si hack-uri pentru wordpress ( lista mare ) at elbandito.us
August 14, 2008 at 7:37 am
RCDM » Blog Archive » 40 consejos y trucos para Wordpress (muy interesante)
August 25, 2008 at 4:00 am
WordPress 常用技巧40+则 - 从1981年2月开始的人生
September 1, 2008 at 1:27 pm
10 things I hate about your site » The Optional Excerpt [WordPress]: resource of the week
September 6, 2008 at 4:50 pm
41 Wordpress Tricks & Hacks | Tips For Web Users
November 4, 2008 at 7:01 pm
155 Wordpress Resources, Tutorials, Plugins, Themes, AJAX, Podcasting…WP Monster List : Speckyboy - Web Design, Web Development and Graphic Design Resources
January 24, 2009 at 11:03 am
Wordpress Hacks Guide | CSS Experiments
January 28, 2009 at 3:56 pm
John Nasta » Blog Archive » Wordpress tips & tutorials
February 19, 2009 at 5:27 pm
50 Wordpress Resources that are Guaranteed to Improve Your Blog! | MattFlies.com -- Sarcasm, Tech, News, and More
February 20, 2009 at 6:26 pm
wordpress實用技巧40招 | 時間不等於金錢
March 2, 2009 at 10:00 am
New Archives Page for the Blog | 100K House Blog
March 2, 2009 at 2:29 pm
Wicked WordPress Archives in One Easy Step
March 30, 2009 at 9:29 pm
Wordpress Tricks and Hacks « Online Free Applications Software Tips Tools Wallpapers
April 22, 2009 at 3:54 am
40 most wanted tips and tricks for Wordpress
June 2, 2009 at 2:35 am
40+ Most Wanted Wordpress Tricks and Hacks | Quest For News, A TUTORIAL Base
June 27, 2009 at 9:47 am
40+ Wordpress Tricks and Hacks | Mellowish
July 7, 2009 at 4:28 am
40+ Most Wanted Wordpress Tricks and Hacks | Overflowed Media
July 11, 2009 at 8:57 am
Ranking in the Search Engines: Why It Takes So Long : Performancing
July 15, 2009 at 2:23 am
Super Mac Apple Consultants » Blog Archive » 40+ Most Wanted Wordpress Tricks and Hacks
July 30, 2009 at 10:11 pm
Top 40+ most wanted wordpress tips and tricks | Tomislav Mihajlovic (Toma) - Toma2U.com
August 6, 2009 at 6:59 am
Algunos trucos para mejorar tu Wordpress | http://trukos.net
August 15, 2009 at 7:17 pm
Unlimited New Useful Wordpress Tips,Tricks & Hacks - Themeflash : One Stop For All Your Web Resources
August 23, 2009 at 11:46 pm
WordPress Tips and Tricks | WordPress eCommerce
August 28, 2009 at 9:42 pm
US Want - Your Blogs, Social Network, Search Engine for Drivers, UserGuide, Vids, Images, Tutorials
September 6, 2009 at 4:26 am
40+ Most Wanted Wordpress Tricks And Hacks « Photoshop.vn – Your Design Resource
September 7, 2009 at 4:22 am
10 Ways to Customize and Personalize your Wordpress Blog | Pro Blog Design
September 7, 2009 at 7:06 am
wordpress düzenleme ve kişiselleştirme yolları « Bay Bedava – Netten Başlıklar
September 8, 2009 at 2:14 pm
wordpress düzenleme ve kişiselleştirme yolları | Teknoloji Sokağı
September 9, 2009 at 1:56 am
41 Most Wanted Wordpress Tricks and Hacks | eBookTM | Download ebook, Jetaudio skin, Games
September 17, 2009 at 11:22 pm
Blog – Velagapati - 300+ Resources to Help You Become a WordPress Expert
September 23, 2009 at 2:03 pm
Most Wanted 40+ Tips and Hacks For Wordpress | oOrch Blog
September 24, 2009 at 10:18 am
40+ Most Wanted Wordpress Tricks and Hacks « Los temas del Pelado
September 29, 2009 at 12:25 pm
40 consejos y trucos para Wordpress « Los temas del Pelado
October 1, 2009 at 8:03 am
40+ Most Wanted Wordpress Tricks and Hacks | 9Tricks.Com - Tips - Tricks - Tutorials
October 2, 2009 at 8:14 pm
40+ Most Wanted Wordpress Tricks and Hacks - Wordpress Releases
October 4, 2009 at 11:53 am
10 Ways to Customize and Personalize your Wordpress Blog | SEO & Web Design
October 8, 2009 at 5:02 am
NamrouD | Upgrade Your Mind ! » 40+ Most Wanted Wordpress Tricks and Hacks
October 8, 2009 at 10:48 am
40+ Most Wanted Wordpress Tricks and Hacks | GREYBLOGS
October 21, 2009 at 3:31 am
Online live » Blog Archive » 40+ Most Wanted Wordpress Tricks and Hacks
October 27, 2009 at 7:13 am
WordPress 300+ Collection of Amazing Resources | Amazing and Inspiring Design
October 29, 2009 at 12:43 pm
300+ Resources to Help You Become a WordPress Expert « eBSPAD
November 4, 2009 at 3:03 am
300+ Resources to Help You Become a WordPress Expert | LeVoltz - iPhone Games, Engineering Projects, Wordpress Themes
November 30, 2009 at 9:21 am
Mas de 40 Trucos para tu Wordpress | trukos!
December 5, 2009 at 6:17 am
(摘)精通Wordpress系列教程一 « 李小西的博客
January 4, 2010 at 6:04 pm
300多种可帮你成为WordPress专家的资源 | 上海网站建设,上海网络公司
January 10, 2010 at 8:50 am

43 comments… read them below or add one

Mike November 13, 2006 at 3:54 am

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

Reply

roadsofstone November 13, 2006 at 4:47 am

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 at 10:32 am

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 at 12:01 pm

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 at 1:19 pm

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

Reply

Jim Westergren November 14, 2006 at 1:30 pm

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

Reply

Carlton Bale November 14, 2006 at 2:13 pm

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 at 2:17 pm

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 at 2:36 pm

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 at 12:04 am

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 at 4:30 am

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 at 9:31 pm

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

Reply

Chris P. December 11, 2006 at 11:30 am

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 at 11:52 am

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 at 11:58 am

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 at 4:11 am

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 at 11:17 am

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 at 6:31 pm

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 at 6:32 pm

Did you lose my info

Reply

Simon T December 7, 2007 at 12:51 pm

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 at 5:34 pm

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

Reply

vlad lauren February 9, 2008 at 1:47 pm

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

Reply

Chad May 3, 2008 at 9:21 am

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

Reply

Web 2.0 Blog May 4, 2008 at 11:22 am

That’s how you do it. Thanks!

Reply

Brian June 25, 2008 at 9:29 pm

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 at 10:18 pm

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 at 9:18 am

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

Reply

Brock July 30, 2008 at 10:56 pm

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 at 12:03 am

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 at 3:43 am

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 at 8:05 pm

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 at 12:50 pm

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

Reply

John Haydon September 17, 2008 at 4:14 pm

Chris,

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

John

Reply

Chris Pearson September 18, 2008 at 12:29 pm

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

John Haydon September 18, 2008 at 3:37 pm

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 at 8:51 pm

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 at 12:47 am

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 at 5:25 am

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 at 11:59 am

@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 at 3:33 pm

I think my archives are even more attractive than yours:

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

Right?

Reply

Alan Richardson December 22, 2008 at 9:31 am

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

Reply

Alex July 20, 2009 at 6:56 pm

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

Reply

Trisha November 19, 2009 at 9:47 pm

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

Hoot and/or Holler

Previous post:

Next post: