How to Make Unique Front Page Teasers for WordPress Posts


noteaser-title-banner
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.

Awkward Gaps


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:

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.

  1. 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.
  2. The full post starts with a 600×160 pixel title banner, and continues vertically as usual.
  3. 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

Posted Monday, March 23rd, 2009 · Back to Top

SPONSOR

Add Comment

19 Comments 8 Mentions

  1. Raymond Selda Author Editor

    Nice tip Zach and I love the new design. Thank you.

    ·

  2. tim Author Editor

    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…

    ·

  3. Callum Chapman Author Editor

    great post, cheers!

    Callum Chapman’s last blog post..Batch Image Resizing in Photoshop

    ·

  4. eddai Author Editor

    great trick. thanks!

    ·

  5. Shibi Kannan Author Editor

    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

    ·

  6. Zach Dunn Author Editor

    @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.

    ·

  7. Bill Lowden Author Editor

    Great tip!

    ·

  8. Azad Author Editor

    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

    ·

  9. Vé máy bay giá rẻ Vòng Tròn Số Author Editor

    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?

    ·

  10. enroreladoct Author Editor

    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

    ·

  11. Radu Rizea Author Editor

    How can I style the image shown in a teaser?

    ·

    • Zach Dunn Author Editor

      @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.

      ·

  12. ricco Author Editor

    http://theorybox.net/2009/11/yahoo/#more-8
    why does “#more-8″ appear??

    ·

  13. Uriah Author Editor

    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!

    ·

  14. Robin Author Editor

    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!

    ·

  15. javildesign Author Editor

    Great! Thanks for sharing, I had headaches too about this little problem!
    Now it is solved!

    ·

  16. Monster – Beats by Dr Dre Studio – Manchester United Limited Edition Headphones Sale Author Editor

    I have been surfing online more than 3 hours today, yet I never found any interesting article like yours. It is pretty worth enough for me. In my opinion, if all website owners and bloggers made good content as you did, the internet will be a lot more useful than ever before.

    ·

  17. Merchant Account Author Editor

    I really like your writing style, fantastic info , regards for putting up : D.. You made some decent points there. great terrific more please.

    ·

  18. العاب طبخ للبنات فقط Author Editor

    certainly like your web web site nevertheless you require to take a appear at the spelling on quite a couple of of your posts. Numerous of them are rife with spelling problems and I to uncover it quite bothersome to inform the reality nevertheless I’ll definitely come once again once more.

    ·

 

Build Internet by One Mighty Roar. Since 2008.