How to Display a „Read More“ Button on WordPress Homepage Posts

Friends new to WordPress will definitely notice a problem: when visiting the website homepage, your post content is displayed in full by default, which is not ideal for the browsing experience. If automatic excerpts or text truncation are used on the homepage, followed by aRead More/Continue Readingbutton, the browsing experience will be much better, as shown in the figure below:

???? Before using automatic excerpt, ???? After using automatic excerpt

So, how to implement automatic excerpts and text truncation in WordPress? Naibabiji introduces three methods here. Method 1 and Method 3 are suitable for novice users, while Method 2 is for users with a PHP foundation.

Method 1: Using the more tag

This is the most native method, but you need to manually insert a more tag each time you write a post. It's not very practical for websites that already have many posts. New websites can adopt this method; it's a good habit. Usage of the more tag: when creating a new post in the WordPress Admin Dashboard, select the text in the editor (Figure 1), then insert 'more'. You can also insert it by directly clicking the more tag in the visual editor (Figure 2).Note: The above two figures show the effect within the Classic Editor, you need todisable the new WordPress editorto use it.

Method 2: Code modification

Code modification might be a bit challenging for novice friends. If you are using the Twenty Fifteen theme that Naibabiji previously used, just modify the code in these two files. Open the index.php and archive.php files in the /wp-content/themes/twentyfifteen/ directory with an editor and find the following code:

get_template_part( 'content', get_post_format() );

Replace with the following code:

get_template_part( 'content-search', get_post_format() );

Essentially, change 'content' to 'content-search' in this code within those two files. If you are not using this theme, you need to search for the 'the_content' field in your theme files yourself, then modify that PHP code to

This method is not suitable for friends without web development basics, as the location and content of 'the_content' vary across different themes. If modified incorrectly, the website may not open. So, if you are going to modify it, remember to back up the files first and restore them if any issues arise.

Method 3: Installing an automatic excerpt plugin

The recommended WordPress automatic excerpt plugin here isWP-UTF8-Excerpt, download address:https://wordpress.org/plugins/wp-utf8-excerpt/Main features: 1. Supports multi-byte languages (such as Chinese), preventing garbled characters. 2. Excerpts can preserve formatting tags from the post, such as fonts, colors, links, images, etc. (Tags to preserve can be set in the Admin Dashboard). 3. Different word counts can be set for the homepage and archive pages (default: 300 words per post on the homepage, 150 words per post on archive pages). The priority for excerpt display is as follows: 1. If the user manually sets an excerpt, display the manually set excerpt, regardless of word count and tags. 2. If the user manually sets , output the content before , regardless of word count and tags. 3. In other cases, display the excerpt according to the user-set word count and allowed tags. Reminder: Installing too manyWordPress pluginsmight cause the website to load slowly.NaibabijiCurrently, there are 13 active plugins.

How to set excerpt content for a post?

In terms of experience, the effect of automatic truncation is not as good as displaying an excerpt. So, how to set an excerpt for a post? The method is shown in the figure below:In the post publishing interface, go to the Screen Options in the upper right corner, then check 'Excerpt'. Next, you will see an excerpt box below the post editor; enter the excerpt there.WordPress Beginner Tutorial 2: How to Publish a Post

Modification method for the Twenty Twelve theme

Naibabiji currently uses the Twenty Twelve Theme, documenting the modification method. Modify line 40 of the content.php file and replace the content with the following code.