How to Display Your Content on a Blog’s Front Page

The front page of a blog is obviously of great importance to the overall design.

Up until a few years ago, most blogs simply showed posts in order of publication, the most recent at the top.

Then excerpts became popular, and later magazine-style front pages.

The purpose of the front page will, of course, vary a bit from one type to another; for example, a personal blog will be different from a professional multi-author blog.

In this post, we will take a look at the options that bloggers and designers have for showing content on the front page, and some reasons for choosing each.

Before getting into the details, let’s consider the purpose of the front page, so that you can make a more informed decision about the type to use for your own blog.

The front page is important because it has a substantial impact on the first impression of visitors.

New visitors expect to be able to get a good idea of what the blog offers from the front page alone. Visitors also want to be able to find content they are looking for through it.

Easy navigation and usability are important because the front page will likely be the most frequently viewed page on the website.

The front page is important, finally, because it will promote the most important or recent content.

Options for Displaying Content on a Front Page

You have basically three options for displaying blog content on the front page: full posts, post excerpts and magazine-style. We’ll look at the benefits of each, which will hopefully assist you in understanding your situation and making an informed decision.

1. Full Posts

With the full posts option, blog posts are displayed in full, not truncated, in reverse chronological order. This method is not nearly as popular as it was a few years ago. Here are the benefits of showing full posts on the front page:

• Visitors Can Read Entire Posts Without Leaving Page
  Not many blogs show full posts on their front page anymore because other options provide more benefits. But one benefit of showing full posts is that visitors can read several recent posts in full without leaving the page. The only thing they probably couldn’t do is comment on a particular post.
• Works Well With Short Posts
  If your blog posts are relatively short (say, 500 words or less), showing them in full on the front page may be easier. Excerpts can look funny if they already contain half the post, and visitors can get annoyed if they click through to the full post and find only two more paragraphs to read.
• Doesn’t Break Reader’s Flow
  Having to click through to an individual post after having read the excerpt can break the reader’s flow and perhaps cause them to lose interest and leave the website altogether.

2. Post Excerpts

Another option is to show only excerpts of posts, with links to the full content for those who are interested.

You could show teasers to, say, 10 articles on the front page and let visitors choose what to read. WordPress generates excerpts automatically, or you could create a custom excerpt taken directly from the post or show any other text you like.

Showing excerpts on the front page is a popular option now. Here are the benefits:

• Scanning Is Easier
  Most visitors prefer to scan content on the front page to see what is available and what kind of posts are published. Full posts make scanning difficult. Showing excerpts makes it quick and easy for visitors to see what has been recently published and to choose what they like.
• Control of Design
  Theme designers and bloggers can be a bit more creative with excerpts than with full posts. You can control the length of excerpts, which allows you to more precisely position and line up content, without worrying about long posts breaking the layout. As you will see in the showcase at the end, some theme designers are quite creative with excerpts. Excerpts simply give the designer more control over how the front page looks.
• Shorter Front Page
  If your posts are relatively long and you display several of them in full on the front page, the page will quickly become unmanageable. Excerpts keep the page shorter, making it easier for visitors to navigate. Of course, the number of excerpts you display affects manageability as well, so adjust that accordingly.
• More Page Views
  Some bloggers use excerpts to increase page views: if a visitor reads an excerpt and wants to see the full content, they will have to leave the front page, giving the blog another page view. More page views can lead to more income for certain types of advertising. However, inflating page views for more revenue can irritate visitors. In general, if this is your only reason for showing excerpts on the front page, don’t do it.
• Duplicate Content Is Avoided
  Search engines don’t like duplicate content and might penalize you if they suspect your blog has it. A front page that shows full posts essentially duplicates the content of individual blog pages. Showing excerpts instead can help prevent this problem.

3. Magazine-Style

The third option is a magazine-style page. It is similar to excerpts, but posts are not necessarily shown in chronological order. Instead, they are usually categorized, with their dates shown.

This is typical of news websites, on which headlines and teasers are arranged in columns by subject, such as sports, world news and so on.

This magazine style brings all of the benefits of excerpts and a few others. Here are the benefits:

• Better Organization of Content
  The most significant benefit is that the magazine style allows for better organization of content. Rather than simply displaying the five or ten most recent posts, you can display posts by category or even reserve a feature area for posts you want to give the most exposure to. You control what content visitors see first. And visitors may be able to better understand what your blog offers by seeing the content arranged by category.
• Control of Design
  This benefit is even greater with magazine-style front pages than with excerpts. The blogger chooses exactly where to display each piece of content, based on category. And plenty of layout styles are possible with this option.
• Looks Like Typical News Website
  Organizing and classifying content by subject tends to make the front page look like a news website. If your blog has a lot of content and is news-oriented, this could be the deciding factor. This style tends to create the impression of a larger website because it shows off so much content and variety of topics.

Tutorials for Designing and Laying Out Blog Front Pages with WordPress

Here are several tutorials on creating front pages in WordPress and the types of layouts we have discussed.

• Build a Basic Newspaper Layout with WordPress and jQuery
  This tutorial from NETTUTS takes you through the process of designing a newspaper-inspired front page.
• Build a Featured Posts Section for WordPress
  Many blogs have a featured posts section at the top of the front page. This tutorial shows you how to do one.
• How to Make a Featured Post Carousel for WordPress
  This is another post on NETTUTS that covers the topic of creating a featured post section.
• Add Thumbnails to WordPress with Custom Fields
  Using thumbnails with post excerpts on the front page is a popular option. This tutorial shows you how to do it.
• How to: Get the First Image from a Post and Display it
  This post shows an alternative to using custom fields to display images on the front page.
• 6 Tricks and Tips to Create a Magazine WordPress Theme
  Cats Who Code provides some helpful information for those who want to create a magazine-style front page.
• Display Post Only Excerpts in WordPress
  This article shows the simple change you need to make to your theme’s code to show excerpts instead of full posts.
• In Praise of WordPress Template Tags, Part II: The Magazine Layout
  Darren Hoyt discusses subjects related to creating magazine layouts on WordPress.
• WordPress: Magazine-Style Horizontal Drop-Down Menu
  This post shows how to make a magazine-style navigation menu.
• Template Tags/Query Posts | Template Tags/Get Posts
  (from the WordPress Codex)

Blog Front Page Showcase

Now we’ll feature a number of blog front pages that demonstrate various approaches to displaying content.

Excerpts

Vectips
This style of excerpts, with thumbnails to the left, is rather popular.

Lokalisten Sprechblase
A brief excerpt of each post, with accompanying image. The front page shows only the three most recent posts.

Blogfullbliss
The images on this front page are to the right of the excerpts.

Francesca Battistelli
Just text excerpts, no images.

Creative Tempest
Very brief excerpts, with a thumbnail of the lead image from each post.

Blog Me Tender
Excerpts of the three most recent posts, each with an image.

The Art of Nonconformity
This unique layout is split down the middle. Five post excerpts are shown on the left.

Bluedots Design
The images on this front page appear above, rather than beside, the excerpts.

Design Reviver
Here is an example of the flexibility that excerpts can bring to the front page. The layout of these two columns would not have been possible with full posts.

Excerpts Plus Featured Content

Tutorial9
Includes a slider featuring five recent posts, with post excerpts shown below.

Colorburned
A similar slider and excerpt combination is used here.

L’effet Crea
This front page also has a featured content area above excerpts of recent posts.

Magazine Style

Pop Culture Tees
Four headlines are displayed horizontally (with their categories) above excerpts of recent posts. “Latest Tees” are shown to the left of the excerpts.

The 9513
Excerpts of “Editor’s Picks” are shown in the main column, with headlines of the latest blog entries to the right.

Kineda
One post is featured “In the spotlight,” with four other popular posts from the week displayed horizontally. Excerpts of other recent posts are shown below.

ANidea
Includes an area for one featured headline and excerpt. Four other excerpts from various categories appear below.

Ecoki
A featured article is at the top, with four recent posts listed horizontally, and then another row of four “Must reads.”

Full Posts:

Freshivore

Owltastic

Unusual Front Pages

Story Pixel
Headlines of three recent posts, but no excerpts or full posts.

Michela Chiucini
One post excerpt, with headlines of other recent posts listed below.

Dirt Du Jour
One post shown in full.

This post was written exclusively for Webdesigner Depot by Steven Snell, a web designer and blogger. Steven runs Blog Design Heroes, which showcases well-designed blogs.

Which system works best for you and why? Please share your feedback with us.