Elegant Themes Blog

Stay up to date with our most recent news and updates

How To Customize The WordPress Read More Link Text

Posted on August 5 by in Tips & Tricks | 43 comments

How To Customize The WordPress Read More Link Text

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:

<?php the_excerpt(); ?>

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.

et-blog-post

This is something we are trying to achieve using the Elegant Themes blog as an example.

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

et-settings-reading

Change the reading setting to summary as opposed to full text.

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:

divi-open

Our Divi 2.0 theme opened in a code editor.

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:

the-content

Modify the_content() tag

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.

the-excerpt

Here we change our code to only include the_excerpt()tag

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 '<div class="view-full-post"><a href="'. get_permalink($post->ID) . '" class="view-full-post-btn">View Full Post</a></div>;';
}
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.

excerpt-modified

Our excerpts of each blog post have been modified by our function.

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.

post-with-button

The default state of our View Full Post button.

hover-state

The hover or active state of our View Full Post button.

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.

read-more-complete

Our read more tag has been successfully implemented.

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

43 Comments

  1. Excited to go through this post! Wanted to do this to my blog for quite some time. Can you please recommend a user friendly code editor

    • SublimeText 3 has been my editor of choice for about a year now, well, actually SublimeText 2 is what I switched to initially.

      It’s readily available, and an unlimited trial, as is indicated :) by Andy’s screenshot of the index file above.

      • Thank you Michael and Dave :)

  2. I’m really happy you did this! I’ve been wanting to customize it for a while now.

  3. That’s a neat little trick. Will have to use that on some partners websites!

    It’s always nice to see little tweaks that can differentiate a site from another one.

    Thanks!

  4. Good info but there has got to be a better way like a plugin or allowing this to be customized in the admin area as part of Divi. I love Divi but I’m savvy. I’ve got some old timers that just can’t figure out to click the header of an excerpt. So, I usually create the Posts to show up as Grid when using Divi for retiree websites. Heck, I ran into some young folks that didn’t get it either. If I had a buck for all the emails telling me the website was broken I’d be rich :)

    • There are some plugins available but doing it manually gives you the most control possible.

      • I would always 100% prefer to do something like this manually than use yet another plugin that would slow a website down… thank you for this article Andy!

  5. Excellent. My learn 1 thing a day is literally off this blog.

  6. Thank you for the trick. It helped to make my website better. I think Elegant Themes already has this feature built-in, right?

  7. Please change
    get_permalink($post->ID)
    to
    get_permalink($post->ID)

    Otherwise the code will give the following error:
    Parse error: syntax error, unexpected ‘&’ in

    • Good catch, looks like WordPress changed the character. I have updated the post.

      • I just copied and pasted it to find myself getting into a problem. Had then to change the file by logging to my server. Didn’t want others to face the same problem :)

        I implemented this in a bit simpler way as follows:

        Step 1:
        Enable excerpts through Page Builder. [This saved me from making changes to index.php]

        Step 2:
        Instead of copying the first code block to function.php, change the following code

        $more = ‘on’ == $show_more ? sprintf( ‘ %2$s‘ , esc_url( get_permalink() ), __( ‘…read more’, ‘Divi’ ) ) : ”;
        to
        $more = ‘on’ == $show_more ? sprintf( ‘ %2$s‘ , esc_url( get_permalink() ), __( ‘View Full Post’, ‘Divi’ ) ) : ”;

        Step 3:
        Copying the last two block of codes to the end of style.css

        • Ah! Step 2 code was supposed to be like this:

          $more = ‘on’ == $show_more ? sprintf( ‘ [a href=”%1$s” class=”link-more”] %2$s [/a] ‘ , esc_url( get_permalink() ), __( ‘…read more’, ‘Divi’ ) ) : ”;

          to

          $more = ‘on’ == $show_more ? sprintf( ‘ [div class=”view-full-post”] [a href=”%1$s” class=”view-full-post-btn”] %2$s [/a][/div]’ , esc_url( get_permalink() ), __( ‘View Full Post’, ‘Divi’ ) ) : ”;

          Note: Read [ ] as :)

    • I meant get_permalink($post-& g t ;ID) to get_permalink($post->ID)

  8. Well written/documented mini-tute Andy, thanks. Coincidently, I had a curiosity about this earlier today.

    Thanks again.

    Cheers from Southwest Ohio,

    Michael

    • One other suggestion, might it not be wise, as an extra layer of safety in addition to the commenting out, to perform these changes/additions/revisions to a child theme?

      #JustSay’n

      • Good call Michael, yes going this route would be wise but I was showing the potential within this tutorial. A child theme might present more customizations than just this so if that’s the case I too would recommend a child theme.

  9. I’ve got a Google Chromebook and as you can tell, I don’t get to download any programs. Most of what I can do is based on apps. So here’s my question:

    Where can I find those lines of code inside the Theme’s Editor tab on WordPress? I’ve been trying for the last half hour to find the lines but it’s no use.

    Thanks in advance

  10. The best thing you can do for yourself or your users is to get any hard-coded screen output like the “read more…” stuff out of the theme and into a backend setting. This is just a bad, bad old way of doing things.

    Second, do not break off excerpts after an arbitrary number of *characters.* You can break after a complete word or better yet, a sentence. Best practice of all: always specify and handcrafted excerpt.

    • Very true, but if it’s your own theme and you want it customized to your own liking then what I provided would suffice. Not everything needs to be handled by the backend admin area. This is one of those changes that comes into play once or twice as you update your site or design.

  11. I followed this 2 times, extremely close and it does not work at all.

    • Changes made are only to the theme index.php, function.php, and style.css files within the Divi root folder. Are you making the additions I suggested above? I would need to uncover more on what is taking place to help.

      • I am in the same boat as digitalKaren (comment just below) I have a child theme, with divi. When I did all this tutorial there was simply no button or link to read more.

  12. I am using a Divi-child theme and I copied the code as given into the index, functions and styles files. It did not work. There is no button.

  13. Hi,
    what is the code editor you are using called, please? Does it also have FTP support? E.g. are you able to edit this code on the server and once saved, it is uploaded to it?
    Thank you:)

    • I used Sublime Text 2 for this tutorial. It’s my editor of choice. You can download plugins to enable FTP capabilities but I typically use an FTP app along side it. Just a personal preference but I use Sublime Text and Coda 2 for file uploading/downloading.

  14. Hello,

    Perfect evrything works ! but can someone give me the code and the way exact for the one that works with pagebuilder blog module ?

    Thank you

    • Hi Dominique!

      Could you fix your problem with the pagebuilder blog module?
      If yes, could you please give me a little help?

      Best regards,
      Thorben

  15. I would love to have a solution with individual link text per article, e.g. ‘Read more of article ‘title’…’

  16. I am having membership of elegant themes and we have customized many themes from ElegantThemes but never tried to customize the “Read more” link. So finally got something new to try next time, Thanks a lot Andy for sharing.

  17. Ok, so what if I’m using the built in “more” feature of the wp editor and I want to change the link text to say “Continue Reading”?

    My client doesn’t want all his “post summaries” to be the exact same length nor does he want to add custom excerpts for each post when it’s so much easier to just drag down that handy little “more” icon from the editor menu.

    In this case, wherever we drag and drop the more tag, a link is added that looks exactly like this:

    (more…)

    – as you can see here: http://chrisfarrellmembership.com/blog/

    I can’t for the life of me find where to change that text to read “Continue Reading” instead of just (more…). In the functions.php file all instances of the read more functionality display as “Read More” and (more…) is nowhere to be found.

    How do I change this text to say something other than (more…)?

    I saw that somebody else in the forum had this exact same question but the response he received from a moderator was to change the read more text in the functions.php file which actually didn’t answer the question and has no effect on this situation. I can change those read more instances in the functions.php file to say whatever I’d like, but I will still see (more…) after each post summary on this blog.

    Any help is greatly appreciated. :)

    Thanks!

  18. Hi,

    I am a newbe regards building a website, so i hope you can help me.

    I am trying to follow the step to put ‘read more’ after the text. But it seems that i am doing something wrong and the last thing i want is to rubbish the code lines.

    So can someone take a look at it?

Leave a Reply

Your email address will not be published. Required fields are marked *

Current ye@r *

Join 261,586 Happy Customers And Get Access To Our Entire Collection Of 87 Beautiful Themes For The Price Of One

We offer a 30 Day Money Back Guarantee, so joining is risk-free!

Sign Up Today

Pin It on Pinterest

Share This