If you have your WordPress site setup to display posts as excerpts, chances are that a set amount of text will display followed by a link commonly known as the “Read More” link.

The purpose of this link is to offer the user a quick excerpt of the post so they can quickly navigate through all of your recent posts on your blog. Doing this offers more choices for your users thus providing a richer experience.

Today I will dissect the “Read More” tag inside of WordPress and teach you how to customize it to your liking.

The Basics

Most uses of the Read More tag are used in conjunction with the WordPress excerpt function which displays a set amount words/characters. By default, WordPress limits this to a set amount of words, but I’ll show you soon how to adjust this setting.

The excerpt tag in WordPress is a small line of PHP that looks like this:

It can be swapped out for the_content() template tag when feasible. More often than not, you will have a blog index page that lists your most recent posts. These posts can use excerpts by simply swapping out the_content() template tag for the_excerpt() template tag.

If you visit our blog and focus your attention on a single post on that page, you will see what I am referring to.

The text is a small excerpt with a trailing “…” followed by a button titled View Full Post

Customizing The Read More Tag

To get started you first need to make sure to have excerpts enabled within the admin area of your WordPress installation.

Head to your WordPress admin and login. Navigate to the general Settings link on the left and within that click on Reading

You should see a handful of settings, but the one we are concerned with is the section with the label For each article in a feed, show. You can also control how many posts to show on your blog page. I’ll leave that up to you. For now I will leave that setting as is.

Go ahead and select Summary instead of the full text radio button. With Summary selected, click Save Changes

By default some themes will come optimized already to display an excerpt rather than the full text setting as indicated by the settings area I just outlined. Our Divi 2.0 theme is a perfect example of this.

Below I have a simple install of the Divi theme. I generated some fake content to show how an active blog will look using our theme. Yours may appear a bit different, especially if you are using a different theme.

I like the way the posts look, but I would like to include a button at the end of each post similar to what you see on our own blog. This makes it clear to the user that they can view the full post but clicking the “read more” button.

To do this we need to dive into our site’s code. Open your active theme inside a code editor. I’m using sublime text 2 with the Divi theme shown below:

I have the index.php file open. Inside of it is some code that outputs what you see on your blog page. For the Divi theme there is quite a bit going on, but the basics are still there. Where we want to focus our attention is the section that looks like this:

If you have never touched the code inside of Divi, then you can refer to the line numbers when looking inside your ownindex.php file. This will only pertain to those of you using Divi. Line numbers 50-57 will be what we modify.

Let’s change the code to be the_excerpt() instead of the_content(), along with the custom function.

Here is the code block updated. For legibility and safety sake I have just commented out the code we aren’t using.

If you save your changes and head back to your site you probably won’t see any difference. We still need to modify the default functionality of the_excerpt().

We need to add the link text at the end of each excerpt. To do this we need to work inside a different file called functions.php. Find it and open it inside your code editor.

Scroll to the very bottom and add this block of PHP code:

/* Modify the read more link on the_excerpt() */

function et_excerpt_length($length) {
    return 220;
}
add_filter('excerpt_length', 'et_excerpt_length');

/* Add a link  to the end of our excerpt contained in a div for styling purposes and to break to a new line on the page.*/

function et_excerpt_more($more) {
    global $post;
    return '
ID) . '" class="view-full-post-btn">View Full Post
;';
}
add_filter('excerpt_more', 'et_excerpt_more');

The first 4 lines above form a custom function to control the amount of words that appear within each excerpt on a blog post. A function is defined and then a filter is added to set(execute) the function. As part of the WordPress API, we target the excerpt_length function to optimize our post to be no more than 220 characters.

The second function customizes the read more link by overriding the WordPress default. Here I have added a link contained inside a div so we can style it. I’ll get to the styling in a bit, but with this code in place and saved you can head to your site and hopefully see something similar to what I have.

The default CSS styling of a link and post is represent automatically with our Divi 2.0 theme, so there’s only a little work left to be done to make the link a button.

We gave the anchor link within our functions.php file a class of view-full-post-btn. With this I’ll add some CSS to target the link. Add the CSS below to the style.css file within your theme to customize our link. Where you add it doesn’t matter, but adding it in a memorable area you can reference in the future is always wise.

  .view-full-post-btn{
    display:inline-block;
    /*border-radius*/
    -webkit-border-radius:10px;
       -moz-border-radius:10px;
            border-radius:10px;
    padding:8px 16px;
    margin-top:10px;
    color:#454545;
    border:1px solid #d8dcdc;
    font-family:Georgia,serif;
    font-style:italic;
    font-size:16px;
  }
  .view-full-post-btn:hover{
    background:#454545;
    /*transition*/
    -webkit-transition:all .3s ease;
    -moz-transition:all .3s ease;
    -o-transition:all .3s ease;
            transition:all .3s ease;
    border:1px solid #000000;
    color:#FFFFFF;
  }

After adding the styles I now have a pretty nice looking button with a inverted hover state.

Rather than having our button left aligned, lets go a step further and float it to the right side of the container. We also need to modify some margins within each of our posts. Add the code below to your style.css file.

.et_pb_post {
    margin-bottom: 100px;
    border-top: 1px solid #e1e1e1;
}
.et_pb_post:first-of-type {
    border-top: none;
}
.view-full-post { float: right; }

With all of these styles in place, you should now see a fully functioning end result. Each button will click through to your blog post allowing your users to read the entire post.

Conclusion

Adding enhancements such as the WordPress read more tag helps your users to more easily navigate your blog. Keeping information organized and summarized where applicable will help your blog be more legible than ever before. Using the excerpt functionality built in to WordPress is a great way to make your content more digestible. With a little effort and some styling, you can achieve what I have covered in this tutorial in almost no time at all.

Feature image via shutterstock author jesadaphorn

The post How To Customize The WordPress Read More Link Text appeared first on Elegant Themes Blog.