How To Customize The WordPress Read More Link Text
Posted on August 5, 2014 by in |
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 and focus your attention on a single post on that page, you will see what I am referring to.
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
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 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:
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:
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.
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() */
learn spanish year 7 learn spanish 5th gradeTAGS
CATEGORIES