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
