|

How To Use WordPress Excerpts

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 to 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 are large articles 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.
no excerpt on wordpress homepage


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
adding read more excerpt link in wordpress text editor
Or you can use the Visual Editor
adding read more excerpt link in wordpress 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.
click on update to make 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.
one post had excerpt the others do not


How to customize excerpt anchor text

We can see that by default, adding the excerpt produces a link which 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.

Check it out!
custom excerpt anchor text


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.
the excerpt on the home page


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 if it 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.
turn on excerpt in screen options wordpress

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. Learn more about manual excerpts.” We will go ahead and set some custom text for the excerpt field now.
custom excerpt text

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!
custom excerpt result


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


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. If you would like to include links with the […] symbol, then we can make use of get_the_excerpt() and the_permalink() to set up links for us. Note the highlighted code here in our index.php file.

index.php

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


How to customize the excerpt length in WordPress

Maybe the 55 word default is not working well with your particular theme. How can we customize the number of words that is 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.

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!
cutom excerpt lenght via functions-php


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!