WordPress Excerpts & “Read More” tags

July 20, 2014

 - Tags: ,

If your blog has a lot of posts, navigation through the home page can be a bit difficult. With WordPress Excerpts feature, you can display the first few lines of each post on your home page, instead of all the content of your posts. It allows your visitors to quickly browse through posts and easily find the post they want.

Method #1: using the tag ‘Read More’

This is the easiest method, but you will need to repeat the steps for each message.

Add a tag ‘Read More’ in your post

In your WordPress admin panel, go to your post editor, edit the relevant post and add a <!--more--> tag after the last character that you want to be part of the excerpt. The excerpt displayed on your blog home page will include everything from the beginning of your post up to the last character before the <!--more--> tag. Below is how I did it for this post excerpt:

If your blog have a lot of posts, [...]
...
...
[...] easily find the one they want.
<!--more-->

That’ it ! WordPress will display the message ‘(moreā€¦)’ after your excerpt, like this:

Read More - Default

Customize the ‘Read More’ message

It is possible to change the ‘(more…)’ string very simply by adding our own custom string right after the word ‘more’ in the <!--more--> tag. For example, if you want to display ‘Read More […]’, modify the tag as following: <!--more Read More [...]-->. Your posts on the home page will look like this:
Read More - Default

Method #2: using the_content()

This method is slightly more difficult, but it allows more customization for the ‘Read More’ string.

Add a tag ‘Read More’ in your post

For this method, you still have to use a ‘Read More’ tag in your post. If you skip the explanation for Method #1, please check out this first.

Find the php template used for your blog home page

Depending on how you configured your website, the php template used for your blog home page could be index.php, home.php or front-page.php. Once you found the relevant template, open it and go to the loop section. It should be something like this:

<?php 
if ( have_posts() ) {
  while ( have_posts() ) {
    the_post();
    the_title();
    the_content(); //We will change this line
  } 
} 
?>

Write your ‘Read More’ message in the_content()

Line 6, there is a tag template called the_content. Without any argument, it displays the full content of the post. However, if you add a string as an argument, WordPress will use this string after the end of the excerpt, instead of the default ‘(more…)’.

<?php 
if ( have_posts() ) {
  while ( have_posts() ) {
    the_post();
    the_title();
    the_content('Read More [...]'); //It will display 'Read More [...]'
  } 
} 
?>

Note: it is also possible to add html instead of just a string.

Method #3: using the_excerpt()

This last method is the most difficult but also the most powerful. You can not only setup your excerpts for all your posts without needing to use the <!--more--> tag, but also customize the html output after the excerpt. Among other things, it makes it possible to create a nice ‘Read More’ button, instead of just text.

Find the php template used for your blog home page

Like in Method #2, you first have to locate the php template used to display the home page of your blog. If you haven’t followed the explanation in Method #2, please read this before continuing.

Replace the_content() by the_excerpt()

In the php template used to display the home page of your blog, replace the_content by the_excerpt:

<?php 
if ( have_posts() ) {
  while ( have_posts() ) {
    the_post();
    the_title();
    the_content();  //<== Remove this line
    the_excerpt();  //<== Add this line
  } 
} 
?>

Customize your excerpt in functions.php

By default, the_excerpt() displays the first 55 characters of your message, followed by ‘[…]’, and a link to the post. You can customize all of these in functions.php. First, let’s customize the length, by hooking a function into the ‘excerpt_length’ hook. In functions.php, add this snippet:

function custom_excerpt_length($length) {
  return 100; //Type the length of the excerpt here
}
add_filter('excerpt_length', 'custom_excerpt_length');

Then, let’s customize the ‘Read More’ html output, by hooking a function into the ‘excerpt_more’ hook:

function custom_excerpt_more($output) {
	global $post;
	$read_more = '<a href="' . $post->ID . 
	'" class="read-more">Read More  <span class="glyphicon glyphicon-chevron-right" ></span></a>';
	return $output . $read_more;
}
add_filter('excerpt_more', 'custom_excerpt_more');

Here, we append to the variable $output (our post excerpt, whose length has been defined just before) the variable $read_more, a nice button with a link to our post. To style the button, I used some custom css, as well as a glyphicon, but since it’s not the topic of this article, I am not going to explain this part. The result is this:
Read More - Default

Conclusion

Throughout this article, we have learned how to display post excerpts and ‘Read More’ on the home page of a WordPress blog.

  • In Method #1, we learned how to use <!--more--> to display excerpts on a per post basis.
  • In Method #2, we used the <!--more--> combined with the_content() template tag to do the same thing and more.
  • In Method #3, we studied the_excerpt(), a function that displays fixed-length excerpts for all posts, without needing <!--more-->. Using hooks, we saw how to customize the default length of the excerpt, as well as customize the html output of the ‘Read More’ string.

If you liked the article, you can subscribe to my blog to receive updates when new articles are posted.

If you would like to know more about WordPress Excerpts & “Read More” tags, please check out the below resources.

Additional Resources

Leave a Reply