How To Use WordPress Excerpts

In this WordPress tutorial we will learn how to make use of WordPress Excerpts in the custom theme that we have been building together. In addition to the excerpt itself, we will take a look at how to add excerpt links and customize the ‘Read More’ text you might have seen on various WordPress-powered websites.

We already saw a little bit about how to use excerpts on our archive pages, but what about your main blog posts? Maybe you don’t want to display the entire content of articles on your front page when the visitor first arrives at your site. This is especially true if you have blog postings with large amounts of content. Let’s look at the various ways you can use WordPress Excerpts to solve this issue.

Blog Posts With No Excerpt

We don’t yet have any excerpt functionality added to our posts or theme. Therefore, when a visitor views our site, they see the entire contents of each post all at once. Right now that’s not really a big deal because our example posts are simple and short.

Consider however if you typically display 5 or more posts on your homepage. What if each of those posts is a large article with 2000 words? At that point, you would be loading 10,000 words of content in addition to any images and media contained in that post. This is not ideal. Let’s see what our WordPress tutorial site looks like without the excerpts so far.

Adding an excerpt with ‘Edit Post’

There are a few ways to enable excerpts on your WordPress site, and the first of those is to manually enable the read more link on a post by post basis. So for our example JavaScript Tutorial blog post, we will edit that post and enable the read more link like so:

You can use the Text Editor

Or you can use the Visual Editor

Once you have made the required changes to the post by using either the Text or Visual editor, you can then click on ‘update’ to make the changes take effect.

At this point, our JavaScript Tutorial has an excerpt link in place while all other posts do not have any type of excerpt. So we can see that this approach is really easy. All you have to do is place your cursor where you would like the excerpt link to appear in your post, then click on the ‘more’ tag in the editor and then update the post. WordPress knows how to automatically insert the link for you once you visit the home page. Very nice.

How to customize excerpt anchor text

We can see that by default, adding the excerpt produces a link that has the anchor text of ‘(more…)’. Is there a way to customize this text? Indeed there is! Maybe you want to change the excerpt to ‘Check it out!’.

How might we do that? Well, it turns out we can pass an argument to the the_content() function in our theme file to make this happen. We can open our index.php file and make the modification there.

<?php

get_header();

if ( have_posts() ) :
	while ( have_posts() ) : the_post(); ?>

        <article class="post">
            <h2><a href="<?php the_permalink() ?>"><?php the_title() ?></a></h2>
            <p class="post-meta"><?php the_time( 'F jS, Y' ); ?> | <a
                        href="<?php echo get_author_posts_url( get_the_author_meta( 'ID' ), get_the_author_meta( 'user_nicename' ) ); ?>"><?php the_author(); ?></a>
                | <?php
				$categories = get_the_category();
				$comma      = ', ';
				$output     = '';
				
				if ( $categories ) {
					foreach ( $categories as $category ) {
						$output .= '<a href="' . get_category_link( $category->term_id ) . '">' . $category->cat_name . '</a>' . $comma;
					}
					echo trim( $output, $comma );
				} ?>
            </p>
			<?php the_content('Check it out!') ?>
        </article>
	
	<?php endwhile;

else :
	echo '<p>There are no posts!</p>';

endif;

get_footer();

?>

Check it out!

How to make all posts display only an excerpt with the_excerpt()

Now we saw that it is pretty easy to add a read more link to your posts via the WordPress editor. You might be thinking, well that’s great, but I don’t feel like having to do that for each and every blog post I write. Worse, perhaps you already have hundreds of posts and now you would like to make use of this excerpt technique on all of them. Have no fear, the_excerpt() function is here.

To accomplish this, we will go ahead and swap out the_content() function in our index.php for the_excerpt(). What this will do is to limit the text to 55 words for each post and then append a symbol of […] to indicate that there is more to be had. Note that it does not create a link by default. We can see this in action right here.

Specifying custom text to use for the excerpt

When we make use of the_excerpt() function, it is going to use the first 55 words of the post itself as the excerpt. What you might not know is that you can actually use custom text for the excerpt.

This text might not even be in the post itself, but you can use it if you like. The first thing you will need to do is to turn on the Excerpt option under Screen Options where you edit the post.

Once this is enable, you’ll see a message that says “Excerpts are optional hand-crafted summaries of your content that can be used in your theme.

Notice that just the post we set the custom excerpt on uses the custom text. The other posts still use an excerpt, but again WordPress makes use of the first 55 words of the blog post to populate the excerpt in this case. Very cool!

Adding single.php to your theme

With the change that we made to our index.php file, we now have a bit of a problem. When we only have an index.php file, that file is being used to output html for both the home page itself *and* for when you click on a blog post to view just that blog post. Now, we just made a change to that index.php file and removed the_content() function and replaced it with the_excerpt() function.

Do you see the problem there? Yes that’s right, with things as they stand now, if you click on an individual blog post, you will still see only the excerpt! That is definitely not the behavior we are looking for. So what is the solution? In this case, you would continue to have the index.php file make use of the_excerpt() function while creating a new file of single.php that makes use of the_content() function. You can create and add this markup to your single.php file if you are following along.

single.php

<?php

get_header();

if ( have_posts() ) :
	while ( have_posts() ) : the_post(); ?>
		
		<article class="post">
			<h2><a href="<?php the_permalink() ?>"><?php the_title() ?></a></h2>
			<p class="post-meta"><?php the_time( 'F jS, Y' ); ?> | <a
					href="<?php echo get_author_posts_url( get_the_author_meta( 'ID' ), get_the_author_meta( 'user_nicename' ) ); ?>"><?php the_author(); ?></a>
				| <?php
				$categories = get_the_category();
				$comma      = ', ';
				$output     = '';
				
				if ( $categories ) {
					foreach ( $categories as $category ) {
						$output .= '<a href="' . get_category_link( $category->term_id ) . '">' . $category->cat_name . '</a>' . $comma;
					}
					echo trim( $output, $comma );
				} ?>
			</p>
			<?php the_content() ?>
		</article>
	
	<?php endwhile;

else :
	echo '<p>There are no posts!</p>';

endif;

get_footer();

?>

Adding ‘Read More’ links to […]

Making use of the_excerpt() function is quite handy, but we did lose the actual hyperlink that got inserted for us when we added the more tag manually in the WordPress editor.

index.php

<?php

get_header();

if ( have_posts() ) :
	while ( have_posts() ) : the_post(); ?>

        <article class="post">
            <h2><a href="<?php the_permalink() ?>"><?php the_title() ?></a></h2>
            <p class="post-meta"><?php the_time( 'F jS, Y' ); ?> | <a
                        href="<?php echo get_author_posts_url( get_the_author_meta( 'ID' ), get_the_author_meta( 'user_nicename' ) ); ?>"><?php the_author(); ?></a>
                | <?php
				$categories = get_the_category();
				$comma      = ', ';
				$output     = '';
				
				if ( $categories ) {
					foreach ( $categories as $category ) {
						$output .= '<a href="' . get_category_link( $category->term_id ) . '">' . $category->cat_name . '</a>' . $comma;
					}
					echo trim( $output, $comma );
				} ?>
            </p>
            <p>
				<?php echo get_the_excerpt() ?>
                <a href="<?php the_permalink() ?>">Read more &raquo</a>
            </p>
        </article>
	
	<?php endwhile;

else :
	echo '<p>There are no posts!</p>';

endif;

get_footer();

?>

We now have all posts showing the excerpt, as well as including an actual hyperlink we can click to read more. Very nice.

How to customize the excerpt length in WordPress

Maybe the 55 words default is not working well with your particular theme. How can we customize the number of words that are used for the excerpt? For this, we will need to add a function to our functions.php file. Here is how we might accomplish this.

/* sets the excerpt length */
function customize_the_excerpt_length() {
	return 30;
}
add_filter('excerpt_length','customize_the_excerpt_length');

WordPress makes use of the concept of hooks, which you can almost think of as events. It is a way of telling WordPress, hey when this event happens, I actually want this other thing to happen as well.

That is basically what we have done in this snippet here. We are telling WordPress when the ‘excerpt_length’ event happens, make sure to run my custom function which is customize_the_excerpt_length(). Hopefully, that makes sense. We’ll have an entire tutorial on hooks soon. For now, check it out, our excerpt length is now showing as only 30 words. Cool!

How To Use WordPress Excerpts Summary

Leveraging excerpts in your WordPress Themes is a great way to provide summary-like information for large numbers of posts while allowing the user to drill down further as they choose. In this tutorial, we covered most of the different ways you can make use of excerpts and customize them in your WordPress Theme.

We learned how to manually create a read more link on individual posts with both the text and visual editor of WordPress. We then saw how to customize the anchor text of those links that get generated by WordPress via a custom text string being passed to the the_content() function.

From there we saw how to use the the_excerpt() function and to configure custom text excerpts in the screen options of WordPress. We also added links by using the get_the_excerpt() and the_permalink() functions together. Lastly, we learned how to change the default excerpt length of 55 words to a number of our choosing. I think that just about does it for excerpts in WordPress! Nice Work!