How to Display Post Excerpts a Tiny Bit of Code

There are multiple ways to display post excerpts in WordPress, and you want to let your users choose whichever way they want. However, displaying excerpts and their respective links is surprisingly confusing for two reasons.

First, the codex discusses all the different types of post excerpts together on the page about customizing the read more tag. This is confusing because only one type of excerpt uses a ‘read more’ tag.

Secondly, as you search online for answers, you’ll find people using describing excerpts in different ways, often referring to any type of excerpt interchangeably as ‘excerpt’ or the_excerpt().

This may not be THE way to describe post excerpts, but it’s how I’ve learned to think of them, so let’s clear the air…

Learn how to create your first WordPress theme from scratch in my brand new course: View the course.

The 3 Types of Post Excerpts

There are three different ways that your users may choose to create their excerpts:

  1. Custom excerpts (using the meta box below the post)
  2. Use of the ‘read more’ tag
  3. Automatic excerpts (no excerpt given)

Regardless of how your users choose to display their excerpts, it should display the excerpt and a link to the full post, and it should work the same for each method.

In this tutorial, we’ll cover exactly how to do that.

Something you can do now: examine how you’re handling excerpts now and make sure you’ve got a way to handle all three possibilities. Add a small section to your documentation explaining the three ways to use excerpts with your theme.

Customizing ‘Read More’ Excerpts

We’re first going to take care of the ‘read more’ excerpts created.

The function below searches for the string () that is the ‘read more’ tag. If it finds it, it outputs the_content() using the first parameter to set the custom text for the link to the full post. This link will have a class of “more-link” and automatically be included in a paragraph.

If it doesn’t find a ‘read more’ tag, it will output the_excerpt().

// customize 'read more tag' excerpt
function my_new_excerpt() {

	global $post;

	// check for the more tag
    $ismore = strpos( $post->post_content, '');

	// if there is a more tag, edit the link to keep reading
    if($ismore) {
        the_content("Read the Post");        
    } 
    // otherwise output the excerpt
    else {
        the_excerpt();
    }  
}

The above function would be included in the loop to output the content or the excerpt.

NOTE: the text used in the_content’s first parameter is placed within an ‘<a>’ tag, so you cannot put a block level element like a div inside it.

Customizing Automatic & Custom Excerpts

Following the codex you will have a problem because you’ll customize the read more link, and then use the excerpt_more hook for automatic excerpts, but there will be no link for custom excerpts using the post meta box.

Because we output the_excerpt() if there isn’t a ‘read more’ tag, we can handle both the automatic and custom excerpts with a single function hooked to the the_excerpt filter:

// for custom & automatic excerpts
function my_excerpt_read_more_link($output) {
	global $post;
	return $output . '<a class="more-link" href="' . get_permalink() . '">Read the Post</a>';
}
add_filter('the_excerpt', 'my_excerpt_read_more_link');

This function simply appends the read more link to the excerpt. Also, the link was included in a paragraph to match the link created when using the_content.

The only remaining difference is that automatic excerpts will have a […] where they are cut off. This isn’t a problem because it makes sense since the automatic excerpt gets cut off after X amount of words.

However, I personally do not like the brackets around the ellipsis, so I use this function which is, essentially, straight out of the codex to output a proper ellipsis without brackets:

function new_excerpt_more( $more ) {
	return '...';
}
add_filter('excerpt_more', 'new_excerpt_more');

Post Excerpts Vanquished

Excerpts can be tricky mainly because the three different types are not made clear, and often are often talked about with imprecise language. However, they can be handled with just a few lines of code once you’re aware of how they work.

Related Posts

Be First to Comment

    Post a comment

    Your email address will not be published. Required fields are marked *