How to Display a Post Summary on Your Blog Page

By default, some themes display the entire post’s content when listing posts, while leaving you the choice to manually configure your post to display as summary, if this is your preference.

The problem is that not everybody knows enough about WordPress to make this configuration.

In this post, I’m going to illustrate how to quickly replace the full content with a list of post summaries or excerpts you have full control over.

Two Ways of Displaying Your Blog Posts

Developers can enable their themes to display posts in the Blog page, Search results page, and other archive pages, either in their full content or just as summaries.

If the relevant template file uses this code to display the posts

<?php the_content(); ?>

The result is that your theme displays the full post content. The default Twenty Sixteen theme is a case in point. To give you a better idea of what I’m talking about, here’s what the Blog page looks like:

Blog page with full posts in Twenty Sixteen default WordPress Theme

Each post listed on the page displays in full.

However, when we want to list our posts, as opposed to displaying a single post on its dedicated page, a post summary with a link to the full content is what some of us would like to have.

Here’s what WordPress has to offer to implement this option when your theme doesn’t implement it by default or doesn’t give you a user-friendly way of doing it yourself.

Automatically Generated Excerpts

WordPress automatically generates a 55-character post summary when the template file that outputs the list of posts in your theme uses <?php the_excerpt(); ?> rather than <?php the_content(); ?>

This means that, one way you can tackle this problem is to create a child theme and replace <?php the_content(); ?> with <?php the_excerpt(); ?> inside all template files where you want to display summaries instead of full posts, e.g., index.php, author.php, etc.

However, this is not the best way to go about it for at least two reasons.

#1 You have no control over the formatting and cut-off point of the summary

In fact, the excerpt WordPress generates is in simple text format without HTML tags. This means that if you have a link, for instance, it will be output as simple text, not as link. In other words, you have very little control over the appearance of your summary.

Automatic excerpt in modified Twenty Sixteen Blog page
Automatic excerpt in modified Twenty Sixteen Blog page

Not only that, but the point at which the summary stops is automatically predefined at 55 characters. This means that some of your summaries can be cut off at some random point, like in the middle of a sentence or word. You can change the cut-off point by increasing or decreasing the number of characters in the automatic excerpt using the theme’s functions.php file, but this won’t solve the problem: you’re bound to have the odd-looking summary in your posts list.

This is why it’s good for WordPress themes not to force the display of automatic excerpts and leave users to create their own excerpts.

#2 It’s the most complex approach for non developers

Creating a child theme and working with a theme’s template files can be the order of the day for developers. Not so much for the average WordPress user.

The two approaches outlined below are much better at accomplishing the desired result.

Manually Configured Excerpts

WordPress gives you the tools to craft your post summaries the way you like them.

If you open any one of your posts in the Post editor, you’ll find the Excerpt box below the editor. If you can’t see it, open the Screen Options panel at the very top of the page and select Excerpt.

Screen options panel with Excerpt checked
Screen options panel with Excerpt checked

In the Excerpt box you can write a great post summary and format the text using HTML markup.

Manual Excerpt box in WordPress Post Editor
Manual Excerpt box in WordPress Post Editor

Now the summary looks exactly the way you want.

However, there are a couple of problems.

#1 No Link to the Full Post

When using manual excerpts, WordPress doesn’t link to the full post page automatically. You’ll have to provide a link yourself. Unfortunately, the best way to do so is either by adding the link in the relevant template file or in functions.php. This requires you to create a child theme.

#2 Some Themes Still Display the Full Post

Some themes like the Twenty Sixteen theme display both the manual excerpt and the full post.

Manual excerpt and full post in Twenty Sixteen Blog index page
Manual excerpt and full post in Twenty Sixteen Blog index page

To rectify this, you should create a child theme (once again) and modify the relevant template file, which for the Twenty Sixteen theme is content.php. As we have seen, this is less than ideal.

Let’s move on to the last workaround.

WordPress Teasers

Enter WordPress teasers to the rescue.

WordPress has a Read more tag. If you drop it into the Post or Page editor, this tag treats everything above it as a summary of your text, and everything else below it will be visible only in the single post or page view. Furthermore, because the WordPress Post or Page editor lets you format your text either from the Visual screen or from the Text screen using HTML, your summary will display nicely in the browser.

More tag for WordPress teaser
More tag for WordPress teaser

Now you have a great hand-crafted post summary and WordPress takes care of displaying a nice-looking link to the full post page. No child theme required, no coding inside the theme’s template files necessary.

How the Teaser displays on the Blog page
How the Teaser displays on the Blog page

That’s great, problem solved!

To Sum Up

Showing a post summary instead of the full post on the Blog page is a common customization requirement. WordPress has a few ways to solve this problem, but in my view the best is using the More tag: you can write your text and format it using the editor or HTML, and WordPress takes care of displaying a link to the full post. You don’t have to worry about touching the theme’s template files at all and the result is awesome.

You can learn more about WordPress excerpts and the WordPress teaser in the Codex.

What about you, do you prefer the full post or a post summary in the Blog page? Hit the comment box to let me know.

Advertisements

One thought on “How to Display a Post Summary on Your Blog Page

Have your Say

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s