WordPress allows you to display a part or the full post. If your WordPress site is only showing a part of your post, this is called a excerpt. It’s like a preview and it is used because site index or category page most likely will display multiple posts that are lengthy, making web pages too long.By default, WordPress will cut off a part of the post and use [...] to represent that there is more to the post. This is not fancy, not appealing and there is no call-to-action to get the visitor to read more of the post.

So, let’s solve this by using the excerptmore filter, which will give you a custom excerptmore.

Add the following to your theme’s functions.php file to customize the excerpt more.

 // Customization of the excerpt more 
function new_excerpt_more( $more ) { return ''; } 
add_filter( 'excerpt_more', 'new_excerpt_more' );

Modify line three (3) of the above code snippet to the HTML you want the new excerpt more to be – it will replace the [...].

Let’s look at an example. Here is what the excerpt more will look like without modification:

Box is a Twitter Bootstrap theme that wraps a box around the body of your web page, by adding a class named wrapper to the first div. The background can easily be changed by modifying the colour of the body background. You can even add a background image with ease. All elements of Bootstrap are […]

And now, if you use the code snippet as is:

Box is a Twitter Bootstrap theme that wraps a box around the body of your web page, by adding a class named wrapper to the first div. The background can easily be changed by modifying the colour of the body background. You can even add a background image with ease. All elements of Bootstrap are

Now, we’ll add some HTML to the code snippet. This is what the code snippet will look like in your functions.php file:

 // Customization of the excerpt more 
function new_excerpt_more( $more ) { return ' [...] <a class="readmore" href="'. get_permalink( get_the_ID() ) . '">Continue reading →</a></p>'; } 
add_filter( 'excerpt_more', 'new_excerpt_more' );

Which will result in the following output:

Box is a Twitter Bootstrap theme that wraps a box around the body of your web page, by adding a class named wrapper to the first div. The background can easily be changed by modifying the colour of the body background. You can even add a background image with ease. All elements of Bootstrap are […] Continue reading →

Okay, now if you are using Twitter’s Bootstrap front-end framework like I am, you may want to use a button. To use a Bootstrap button for the continue reading → link, add the following to your functions.php file:

 // Customization of the excerpt more 
function new_excerpt_more( $more ) { return ' [...]</p><p><a class="btn btn-default" href="'. get_permalink( get_the_ID() ) . '">Continue reading →</a></p>'; } 
add_filter( 'excerpt_more', 'new_excerpt_more' );

You’ll notice I added a </p> at the end of  [...], and that is because I have a open <p> HTML tag at the beginning of the post excerpt content. Don’t forget about closing open tags!

This is what the excerpt will look like as a Bootstrap button:

Box is a Twitter Bootstrap theme that wraps a box around the body of your web page, by adding a class named wrapper to the first div. The background can easily be changed by modifying the colour of the body background. You can even add a background image with ease. All elements of Bootstrap are […]

Continue reading →