WordPress offers various options for displaying posts on the homepage. In this tutorial, I explain how you can shorten your WordPress posts and, depending on the theme, use the continue reading tag or excerpt.
The display of WordPress posts on the overview pages is a regular topic for support for my themes. The system behind it is not obvious at first glance and therefore not immediately understandable, especially for WordPress beginners.
Frequently asked questions are for example:
- Why is the more tag not working?
- How can I display the entire post on the homepage?
- Why is the post cut off in the middle of the sentence?
- Why are images not shown in the teaser of the post?
All of these questions should be answered by the end of the article.
Theme decides how posts are displayed
Whether you can shorten your WordPress posts with the continue reading tag or an excerpt depends on your WordPress theme. In WordPress, two different functions can be used to output the content of a post:
- the_content () - displays the whole contribution
- the_excerpt () - displays an excerpt of the contribution
the_content is logically always used for articles in the single
the_content , for overview
the_content for the display of several articles the theme decides what is used. The WordPress default themes, for example, often show entire posts in the blog and in archives, but use
the_excerpt for extracts from the search results in search.php .
In many themes - including mine - there are often settings that users can use to determine whether entire posts or excerpts should be displayed. Depending on the configuration, one of the two functions is then used in the theme.
Whole posts and the read more tag
First, let's take a closer look at the the_content () function for entire posts.
If your theme shows the entire post by default on overview pages such as the start page, categories or author archives, you can use the read more tag or read more tag to shorten your WordPress posts.
You can insert the read more tag anywhere in your content in the visual editor with the key combination SHIFT + ALT + T or the More button.
The WordPress editor then shows you the exact position of the tag with a gray dashed line and the label MORE . At this point, the content is split , ie only the first and above part of the article is displayed on overview pages.
On your website, a link to the full post will be displayed in the individual view at the position of the read more tag. The text of the link is usually determined by the theme and passed as the first parameter when calling the function in the template files.
<?php the_content( esc_html__( 'Read More', 'theme-slug' ) ); ?>
There are several options for adapting the teaser and link text, which I would like to present in a separate article. But now you know the basic function and you know how you can use the More tag to shorten your WordPress posts and display them as teasers.
However, if the theme only shows the excerpt or the excerpt, the more tag has no effect . Which brings us to the second method.
The contribution excerpt / Post Excerpt
When using the the_excerpt () function to display the content in the theme, the post is automatically shortened. This means that the theme already decides that the entire post should not be displayed - and not as with the users' more tag.
A special feature of the excerpt is that it usually only consists of pure text and does not contain any HTML code. In contrast to the teaser with the continue reading tag, which displays the content normally up to this point, all text formatting and media such as images and videos are removed with the excerpt.
WordPress developers often use post excerpts when the layout requires a text excerpt and the display of the entire post is undesirable.
Excerpts can be useful, for example, for the output of posts in sidebar widgets or slideshows. Too much content or even images in the post would negatively affect the layout.
With text excerpts, the length of the article can also be better controlled for theme developers. For this reason, post excerpts are also often used when posts are displayed in a grid layout on the overview pages. With extracts of the same length, the height of the grid items is brought to approximately the same height.
Automatically generated extract
WordPress generates the extract for the function
By default, the first 55 words of the content are used and HTML code is completely removed so that pure text remains. However, the number of 55 words can be changed with a filter, which means that shorter or longer excerpts are possible in your theme.
After the excerpt, the characters […] are usually displayed to indicate that the contribution has been shortened. Here, too, there are filters for adaptation. Quite often the Excerpt More text is replaced by a read more link in order to emulate the function of the More tag.
For the adaptation of the excerpt with the various WordPress filters, I also have another post in the planning stage. In an older post, however, I already presented the Advanced Excerpt plugin, with which extracts can be configured in the WordPress backend even without code.
Enter manual extract
But the excerpt can also be changed using the WordPress tools. When creating or editing an article, a manual excerpt can be entered, which replaces the automatically generated excerpt.
You can add your individual contribution excerpt in the additional Metabox Excerpt , which is typically displayed under the visual editor.
If the box is not yet displayed, you can activate it in the display options. To do this, click on the Customize view link in the upper right corner in the WordPress backend when you create a new post.
With the manual excerpt, you can determine the length of the excerpt yourself and cutting off the teaser in the middle of the sentence can be prevented in comparison to the automatic excerpt.
Differences between the_content () and the_excerpt ()
Here again the differences briefly and concisely summarized:
- shows the complete article
- Teaser can be created with a continue reading tag (article will be split)
- Teaser shows text formatting and images
- Entering a manual statement has no effect
- shows an excerpt from the article
- Excerpt is generated automatically if there is no manual excerpt
- Consists of pure text: Formatting and media are removed
- Using the continue reading tag has no effect