« Why the Whole Web is Wild About Widgets: An Introduction | Main | Build Community with a Custom Comment Archive Page for Your TypePad Blog »

John T. Unger

How To: Display Excerpts Rather Than Full Posts on Your Blog's Archive Pages

John T. Unger November 13, 2006

Debra Hamel alerted me in a comment some time ago to a clever hack to she had discovered. Frustrated by the load time of long archives, she found a way to manipulate her template code so that it displays a brief excerpt from each post along with the date and title, number of comments, and any other categories each post is tagged with. The title of each excerpted post links to the full entry. To see an example, just choose any of the category or date archives from the drop down menu in the sidebar.

This hack solves a feature request that's been on the Agenda page for some time:

I'd like expandable excerpts, rather than entire posts, to show up in the archives. Clicking on a category or month in an older, active blog, brings up a very long page to scroll through. 

When I first tried to implement the hack on a test blog, I kept getting errors when I republished the blog (Note to Debra: MT tags are case sensitive). Once I figured out why the error was coming up, the hack worked beautifully and took only a couple minutes to implement. Browsing the archives is now faster, easier and more attractive… which means older posts are more likely to continue being read.

Debra has some additional suggestions for combining the excerpt-archive hack with drop-down category menus and AdSense Ads between posts which you can check out at her blog.

To learn how to streamline your archive pages, follow the steps in the extended post. You must have a TypePad Pro account and be using advanced templates in order to use this Hack.

Note: when altering your existing template code, it is a very good idea to copy your code and paste it into a text document in case you make a mistake and need to start from scratch. More tips on Code Hacking Safety can be found here: 10 Tips for Working with Advanced Templates.

  1. Click the Weblogs tab in TypePad and go to the blog for which you wish to create a horizontal navigation menu.
  2. If you are already using an advanced template, click the Design tab. If you are using a Basic template follow these instructions to convert your template to advanced.
  3. In the Archive Templates section, find the link for your Category Archives and click to open the template.
  4. Scroll down and find the line that reads: <$mtweblogincludemodule module="entry-list"$>. Replace this line with the following code:

    <MTEntries>
    <b><$MTEntryDate format="%B %e, %Y"$>:
    <a href="<$MTEntryPermalink$>"><$MTEntryTitle$></a></b><br />
    Comments: <$MTEntryCommentCount$> | <MTEntryIfCategories>Categories: <MTEntryCategories glue=", "><MTBlogIfArchives archive_type="Category"> <a href="<$MTCategoryArchiveLink$>"><$MTCategoryLabel$></a> <MTElse><$MTCategoryLabel$></MTElse> </MTBlogIfArchives></MTEntryCategories></MTEntryIfCategories>
    <br />
    <div style="padding-left:10px;"><i><$MTEntryExcerpt$></i></div><br />
    </MTEntries >

    Note: It may be a good idea to copy and paste the code into a plain text document to remove any formatting before pasting it into your template.
  5. Click Save at the bottom of the page.
  6. Return to the Design tab and repeat step four with your DateBased Archives template.
  7. Click Save at the bottom of the page.
  8. Republish your site (be sure that Publish all Files is selected in the popup window).

General Notes: There are variations you can use to personalize your archive pages or add further features. I elected not to include the drop down menu at the top of each archive page (as Debra does) because it's already present in the sidebar. On the other hand, I wanted my pages to include a title in the same style as my headlines along with a quick note explaining how to reach the full posts. In my templates, I inserted the following code directly above the code used in step four:

<h3 class="entry-header">Category Archives</h3>
<p>Click the titles below to read the full post or use the drop-down Archives menu in the sidebar to select a different month:</p>

Obviously, you can change the wording or tags to fit the style of your own blog.

Another thing I've noticed is that some of my posts display longer excerpts than others… I suspect this is because some posts were written or published from the TypePad compose window, while others were posted using Ecto. I'd be happier if they all displayed the 40 word excerpt specified in the blog's preferences. I'm not sure there's any way to fix this other than individually re-saving each post (which I'm not too likely to do).

More Like This: Advanced Templates , Agenda Updates , Hacks for Categories , Hacks for Layout + Design , Hacks for Navigation

Comments

Debra Hamel says:

Hi, John. Thanks for using the hack. And for alerting me to the capitalization issue. I know they're case sensitive, but sometimes the html editor I use inexplicably converts all my capitals to lower case. Which, as you can imagine, is very very annoying. I'll go in and try to correct them all in that post.

john t unger says:

Debra,

Thanks go to you for providing the hack! BTW, which HTML editor are you using? There are times when I'd actually really *like* to be able to convert capitals to lower case quickly…

Debra Hamel says:

I'm using PageSpinner (for Mac; not sure if there's a non-Mac version), a Shareware program. There is a setting for turning to lowercase, and presumably I had that mistakenly selected when I was working with the TypePad code.

Although.... Now that I think of it, there have been a couple of times when it's turned the capitals in my *sentences* to lowercase, which doesn't quite make sense. It hasn't happened enough for me to know if there's something specific that makes that happen.

If you're using a PC, let me put in a plug for my brother, whose shareware text editor Boxer (http://boxersoftware.com/) is critically acclaimed.

vero says:

Hi, just made it that was quite easy :) BUT several questions How to keep the size of the font homogeneous (it is a bit bigger in the archives that in the rest of the blog) + any trick to avoit it being in italic.
I would also like to display only extracts of posts in the whole blog, I suppose I should use the same code but..where should I paste it ?
Hundred thanks for all this tricks/hacks
Veronique

David Smith says:

This worked brilliantly on my site, www.ToyTalk.co.uk. My category pages were becoming extremely long and because each story has at least one picture they were taking a while to download.

Now my archives look very neat and professional and load in a flash. Thanks for this great hack.

Matthew says:

I tried this on a blog and the indexing for both date and category was lost. Meaning ALL post were listed. Not just the ones for a select category or a selected month.

Is this a know issue?

Thanks

Matthew

john t unger says:

Matthew,

If you go to you "list posts" page I'm sure that you'll see that your posts are all still there but are not displaying on the page. Failure to display is almost always the result of an unclosed tag set, or a div tag which is either misplaced, extra or missing. Another possible cause is related to cutting and pasting code from a rich text environment into a template… Sometimes when you paste code into the middle of a template there will be an invisible character that causes TypePad to delete everything in the template following the code you pasted. This is why it is so important to NEVER hit save until you have copied the code into another window so that you can recover it if needed.

Anyway, my advice would be to check and see that all the code following your edit is still there. If so, check for extra, missing or unclosed tags. If you are missing the end code for the template, you can find it in TypePad's Knowledge base and replace the missing parts.

john t unger says:

Vero,

The sample code I provided in the tutorial includes tags which Italicize the excerpt. Just remove the italic tags and you'll be fine. Pretty much all of the code can be adjusted with tags to bring it in line with the sizes and colors of your main posts. You might want to compare/contrast how the posts are generated in your index template to match the paragraph, header and other tags.

vero says:

Thanks !
BUT :) (there's always a but, isn't it) when I switched to advance temp. i lost a feed that was displaying notes from another blog and i don't know how to put in back in advance mode.

Preston says:

This has been very helpful, but I'm having a bug. I thought my hack here was working properly, and it does when I view it in Firefox. But when I open it up in IE7, my sidebar2 shows up all weird under sidebar1 (or if the archive isn't very long, it shows up under the body area. Any thoughts?

Try viewing in both FF and IE7:
http://jetsongreen.typepad.com/jetson_green/prefab/index.html

Lulu H says:

JUst seen how this hack has worked so well on toytalk - it looks brilliant and makes the page very easy to navigate. I want to only display excerpts - on the front page of a blog I am working on www.addictiontoday.typepad.com - ie. not just in the archives.
ideas gratefully received.
L

Lucy Hunt says:

yay just added this hack on Addiction Today and its worked really well. Thanks again for the heads up. PS. Love the new look Typepadhacks! Very snazzy.

Darla Mack says:

Hi John,

I know this is a bit old, but I tried following the instructions. I guess due to recent Advanced Template changes I don't have that "entry-list" script in my Category or Databased Archives.

Is there another solution for new templates?

Darla Mack says:

Lol, nevermind John... I got it working. I simple replaced everything below the MT Entries and /MT Entries tag.

1001 noisy cameras says:

Great blog and great resource for TypePad users! This is one of my most favorite tips ever! I have used it to convert the date-based archives into a list of posts, and the category-based archives into a list of short-excrepts.

And for those who may write lots of posts, if you don't see all of them, you can either use "lastn" and give it a large number (good for list-based archives perhaps), or you can add the pagination code from the advanced templates right before the end of the code above (/MTEntries) (good for excrept-based archives perhaps).

Again, great blog and great resource! This blog helped me tremendously to make my transition to TypePad.

The comments to this entry are closed.

TrackBack

TrackBack URL for this entry:
https://www.typepad.com/services/trackback/6a00d8341c4fdf53ef00d834c7c5a953ef

Listed below are links to weblogs that reference How To: Display Excerpts Rather Than Full Posts on Your Blog's Archive Pages:

typepad hacks is a typepad featured weblog typepad hacks is listed on Alltop social media

Subscribe

Email RSS Comments  
Subscribe to TypePad Hacks with email Read TypePad Hacks posts via RSS Join the conversation at TypePad Hacks via RSS (comments feed) subscriber count

Search

Socialize

Twitter Logo
    follow typepadhacks on twitter

    Read and reply to the 100 most recent comments at the TypePad Hacks Community Page


    Grazr

    Colophon

    Powered by TypePad
    Member since 03/2005

    TypePad Status

    Creative Commons License