How to Make Unique Front Page Teasers for WordPress Posts
If you’ve ended up on this post from our front page, you’ll notice that the teaser text which appears there is not displayed above. The content listed on that page varies from the content here. It’s an easy tweak done by dividing the post in two using built in WordPress tags.
Even though using custom excerpt tags would achieve a similar result, doing so would involve some degree of changing the template code. The goal here is to keep it simple and only make changes inside the WordPress dashboard.
More is not always enough
Even if this is your first day on WordPress, chances are that you’ve been introduced to the “<!–more–>” tag. It’s an easy way to cut down the snippet shown on the blog’s home page. The problem with the more tag alone, is that sometimes you really don’t want the part on the front page displaying once the reader gets to the post.
This had been one of my layout headaches for this blog for a long time. The post’s thumbnail image on the front page didn’t mesh well on the full post, especially when heading tags or images immediately followed the teaser. The results would be awkward margins, gaps, or misaligned images.
Turn Off the Teaser
To split the two content segments apart, switch over to the HTML view while editing a post and insert the following tag immediately after the <!–more–> tag:
<!--more--><!--noteaser-->
Make sure both are on the same line, otherwise there will be a very awkward gap starting each post.
The nice thing about the <!–noteaser–> tag is how non-destructive it is. Use it when you need, delete it if you don’t. No hardcoding PHP loops to sort content out anymore.
Guidelines for Use
Sam and I have recently adopted the following guidelines for teasers.
- The front page displays a 200×200 pixel thumbnail floating left, and a block of text on the right. The text contains a brief summary of the post’s goals and contents.
- The full post starts with a 600×160 pixel title banner, and continues vertically as usual.
- No content is directly shared between the two.
Conclusion
I’m always amazed at the simple features I dig up in the WordPress codex. This is as fine an example of brilliant simplicity as any.
While this seems to work better for Build Internet, I’d be interested to hear about your own preferences. Should there be a distinction between the two views? What attracts you, a reader, most effectively?
WordPress Codex Reference: Customizing the Read More Tag
Discussion
March 24th, 2009 at 11:07 AM
Nice tip Zach and I love the new design. Thank you.
March 25th, 2009 at 6:52 AM
Well, I don’t use wordpress I use blogengine.net but the point you raise is a good one. This is the first time I’ve been to your site but I’m loving the design (can’t comment on the old one :)) Keep it up, following you on twitter.
tim’s last blog post..Free Textures…
March 26th, 2009 at 4:34 PM
great post, cheers!
Callum Chapman’s last blog post..Batch Image Resizing in Photoshop
March 27th, 2009 at 5:38 PM
great trick. thanks!
March 29th, 2009 at 10:28 PM
Hi,
nice tip, but unfortunately the thumbnails are not showing up in IE6.
Shibi Kannan’s last blog post..Conditional Stylesheet Hack to target Safari 3.0 and above
March 29th, 2009 at 10:47 PM
@Shibi
Thank you for pointing out a particularly baffling error that I was not yet aware of.
I don’t think that the thumbnails failing to display in IE6 is a result of this tip however. Older posts that do not use this method are also having the same conflict.
But thanks for the tip off, I’ll be cursing IE and working on a fix soon hopefully.
April 1st, 2009 at 9:31 AM
Great tip!
April 1st, 2009 at 12:08 PM
Hey, great tip. I was going to do it the old fashioned way with Excerpts and editing the template. This is a timesaver. Cheers.
Azad’s last blog post..5 Harsh Truths about Web Design firms
May 2nd, 2009 at 7:53 AM
Good one post. This is the first time i visit this site, and i get one.
Vé máy bay giá rẻ Vòng Tròn Số’s last blog post..Tại sao các máy bay thường bay ở độ cao 30.000 feet?
September 1st, 2009 at 8:46 PM
The requested URL /forxru2/zadanie.txt was not found on this server. Apache/2.2.3 (Debian) mod_python/3.2.10 Python/2.4.4 PHP/5.2.0-8+etch15 mod_ssl/2.2.3 OpenSSL/0.9.8c Server at allhomedecor.org Port 80 Not Found 404 Not Found
October 19th, 2009 at 10:10 AM
How can I style the image shown in a teaser?
October 19th, 2009 at 10:21 AM
@Radu
Since the image in the teaser is still a part of the post, you can simply include an extra class on the teaser image. This will allow you to style it directly with CSS.
November 17th, 2009 at 10:57 AM
http://theorybox.net/2009/11/yahoo/#more-8
why does “#more-8″ appear??
January 19th, 2010 at 12:44 PM
Fantastic tip, solved many problems for me. Especially for video. I had a grid a tight columns, rather than showing a small video on the main page I show I screenshot of the video. It disappears when clicked, showing a full 600px wide video. Thanks!
June 11th, 2010 at 8:25 AM
Thank you for this post! Ran across it last week and remembered it last night when I realized it was exactly what a friend needs for her new site. Nice and easy!
Join the Conversation!
Remember: Life's not all doom and gloom, so please keep it constructive. If we've made an error or missed something big, please let us know! Learning is revisions, after all.