How to add the “Read more” Link and Custom Excerpts to WordPress

Adding a link with the “read more” or “continue reading” text to WordPress is easy if your WordPress template follows the rules of good layout and WordPress functions without having to touch a single line of code to put this button.

If on the contrary your theme does not seem to react to the different options that we are going to see next, it will be necessary to go to a more advanced option, modify some files of your template and give them a style with CSS to show the summary of your articles followed by a “Read More.” Come on!

blog-read-more-wordpress

Showing full article vs showing summary on homepage

One of the first decisions that are made when creating a blog is how we are going to display our articles on the Homepage. The home of every blog is usually the most visited page, and it is very important that it has a fast load and is friendly to the reader.

There are two options, each with its advantages and disadvantages:

Showing all the complete articles, which allows the user to read all your content without having to leave the home ; something quite comfortable. However, when you have more than 10 or 15 articles, the amount of text and its structure can be a problem, due to the amount of vertical scroll that has to do the reader, having a bad user experience.

Showing a summary, entry or excerpt of your articles on the home page and reading the full post with a “Read more” or “Continue reading” button or a link from the title. You can see an example of this in the demo of the Rosalie theme, where each post shows a brief summary and a button with the text Read More. This gives the user the option to find the content that interests him in a faster way, besides not duplicating content on your website and improving SEO.

wordpress-two-column

By default, unless your theme says otherwise, the option to display the entire entry in the home and in the category pages is the one that is active by default. If you are going to show more than ten articles and these are going to have a certain extension (400-500 words) my advice is to change that and pass the option to show a summary or excerpt. Let’s see how you can do it.

How to add Read More with the Read More tag. Option 1

This is the most used option to divide your article into two parts, showing the top in the home followed by a link to the text Read more or Continue reading, that after clicking on it takes you to the individual view of the article, where the rest of the article is shown. To add it you must follow the following steps.

If you are in WordPress.org (confirm that you are using WP.org and not WP.com in this comparison) access the WordPress admin panel (wp-admin) and edit the article to which you want to add Read More making sure you are displaying the “Visual” tab. Once in the editing screen place the cursor in the section of the text where you want to add the division and click to indicate that it is the exact point. After this, click on the “Read More” icon to add the label to your article.

add-read-more-wordpress

You will see how you add a line that divides the text into two parts. You just have to save the changes and check if you are applying and correctly displaying the link to read more on the Home page.

add-line-read-more

Extra ball: if you want to customize the text that is displayed, i.e. instead of “Read More” or “continue reading” show something like “The article continues…” or “More content”, once added the tag, change the view from “Visual” to “Text” or “HTML” and search the text:

<!--more-->

And try to change it or modify it with your own text:

<!--more El artículo continúa -->

Here is more information about customizing the Read More.

customice-text-read-more

If you use WordPress.com the process to put the text to continue reading is exactly the same, but as the editing panel can change, here is the capture of the area and the icon to click on.

tag-read.more-wordpress

For more information on this edition in WordPress.com here you have the official documentation.

This first method is easy and if your theme follows the good practices of WordPress, you will not have problems in achieving this. Now, as you have been able to verify you must go article by article making the modification, in addition to duplicate content.

As you will observe, the entry shown in the home continues appearing on the individual page of the article. This is because if the user accesses the article directly without going through the home (either through social networks or a Google-type search engine) he needs to read the beginning of the article to fully understand it, so it is not possible to delete it. If this duplicate content is a problem for your web or blog, let’s move on to the next point, the customized excerpts.

How to add Continue reading with the customized excerpts. Option 2

If the option “Read More” did not work or you do not want to have duplicate content, then go with plan B. It is about creating a personalized entry or summary for each article, somewhat laborious because it requires more work than the label of “Read More,” but it has a clear benefit to SEO, as we are not duplicating content and we create a homepage and richer categories. We will look at this in depth. Let’s go with the method.

If you are in WordPress.org go to the admin panel (wp-admin) and edit the article where you want to add the custom excerpt. You will need to scroll and look under the text box for a box called Excerpt.

excerpt-wordpress

If you do not see it, you may have hidden it. Check the display options and activate the Excerpt checkbox.

checkbox-excerpt

You can now fill in the text box with your personalized summary and save the changes. This will make the main page under the title of your article show this text in the form of an entry followed by a “read more” than WordPress adds automatically. With this method you have no way to modify the text of Continue reading, but you have the advantage of controlling the extension and the content that is shown.

customice-read-more

If you are on WordPress.com, you also have the option to include manual excerpts from the side panel, clicking on “More options” and filling in the excerpt field.

Here you have more information on WordPress.com and excerpts.This option automatically generates a “Read More” link after the summary we have included. This text cannot be modified from the WordPress panel. However, as we mentioned before, it allows us to have a homepage and pages of richer categories, since these summaries are not duplicate content and we can customize them by searching for a un call to action.

For this to be complete, it is a good idea to add a custom descriptionto the categories page and allow Google to index its content. You will see how you notice an improvement in the SEOof these pages, since every time you write a new article, this page will be updated with the personalized summary and Google loves new and updated content.

Use the power of excerpts and invite your readers to continue reading

Unless you have a blog with very short posts, nobody likes to do infinite scroll passing texts and texts until you find the article that you like. It is much easier for the user to have an overall view of what is on your blog (as if it were a menu from a restaurant) and go visit post to post individually.

The excerpts and the read more button allow us to give the blog an extra point of usability and improve the user experience of our readers. If you take this seriously and take care of the “health” of your followers, it is also a good idea to have a well-organized WordPress menu and highlight that page or link that is important to them. Making life easier for the user is something that is sure to thank you!

About 

Hi! My name is Ricardo Prieto and I work (and write) about web design, layout and user experience at SiloCreativo, where we help people to develop their projects with tutorials, tips and resources.

Leave a Reply

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