{"id":23247,"date":"2021-04-25T15:00:58","date_gmt":"2021-04-25T13:00:58","guid":{"rendered":"https:\/\/qodeinteractive.com\/magazine\/?p=23247"},"modified":"2023-08-28T12:15:35","modified_gmt":"2023-08-28T10:15:35","slug":"how-to-add-read-more-tag-in-wordpress","status":"publish","type":"post","link":"https:\/\/qodeinteractive.com\/magazine\/how-to-add-read-more-tag-in-wordpress\/","title":{"rendered":"How to Add the Read More Tag in WordPress"},"content":{"rendered":"<div class=\"wpb-content-wrapper\"><p>[vc_row][vc_column][vc_column_text]Providing users with a short description of what your content is about is a great way of inciting them to read your posts and further explore your site. The title and a preview image might be enough to capture their attention, but a <strong>content preview can persuade them to take the plunge and press the Read More button<\/strong>. In this tutorial, we will show you how to add the Read More tag in WordPress and we will discuss:[\/vc_column_text][vc_empty_space height=&#8221;22px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#why-add-read-more-button\">Why Should You Add the Read More Button to Your Site<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#display-excerpt-or-read-more-tag\">Should You Display an Excerpt or Use the Read More Tag<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#add-read-more-button-in-gutenberg\">How to Add the Read More Button In Gutenberg<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#add-read-more-button-in-classic-editor\">How to Add the Read More Button In the Classic Editor<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"why-add-read-more-button\"><\/a>Why Should You Add the Read More Button to Your Site<\/h2>\n<p>[\/vc_column_text][vc_column_text]If you run a blog or have a blog section on your site, adding short, concise descriptions of articles <strong>ensures quicker page load times<\/strong>. It also <strong>helps your audience understand if and how they can benefit from reading your post in its entirety.<\/strong>[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Moreover, the Read More option is <strong>very important for users who prefer to browse websites on mobile phones<\/strong>. Given the smaller screen size, truncating posts and displaying previews allows you to<strong> better organize your content<\/strong>. If users were to see just a list of blog titles, they may not be prompted to click on them. Or worse, if you clutter their screen by displaying complete articles below titles, you\u2019ll make it hard for them to navigate your site, so you risk having higher bounce rates. On the other hand, <strong>if you display the title, add a preview image and an introduction to the article along with the Read More link, your content will be easier to consume.<\/strong>[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]If you\u2019re worried that Google might not be able to index the content that\u2019s not visible which could negatively affect your SEO, don\u2019t be. <strong>What matters is that the content is not hidden &#8211; users can see it and access it in full with an extra mouse click.<\/strong> And when it comes to the tabbed content on mobile pages specifically, <a href=\"https:\/\/www.youtube.com\/watch?v=L9GN4VX6xww&amp;t=36m37s\" target=\"_blank\" rel=\"noopener\">Google\u2019s webmaster John Mueller<\/a> had said that Google will take everything into account as long as it\u2019s visible in HTML.[\/vc_column_text][vc_empty_space height=&#8221;80px&#8221;][vc_widget_sidebar sidebar_id=&#8221;latest-themes&#8221;][vc_empty_space height=&#8221;80px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"display-excerpt-or-read-more-tag\"><\/a>Should You Use the Excerpt or the Read More Tag<\/h2>\n<p>[\/vc_column_text][vc_column_text]In WordPress, there are two ways of displaying post previews. One is by using the Read More tag and the other is by using the Post Excerpt option. Both allow you to display any part of your text as a preview, so what is the difference between the two?<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]<strong>The main distinction between the Read More and Excerpt tags is that the latter is theme dependent.<\/strong> If your theme does not support the excerpt_tag (which is highly unlikely given the fact that WordPress started off as a blogging platform), then you won\u2019t be able to display summaries. Furthermore,<strong> excerpts are always displayed like plain text<\/strong> and you don\u2019t have the option to enrich them with additional elements. On the other hand, <strong>you can always use the Read More option<\/strong> and add images, links, etc. to your previews.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Another difference between the pair is that<strong> you have the option to enter custom text in the excerpt field and <a href=\"https:\/\/qodeinteractive.com\/magazine\/wordpress-custom-excerpts\/\">create custom excerpts<\/a>.<\/strong> Alternatively, you can also go to <em><strong>Settings &gt; Reading<\/strong><\/em> and below<em> For each post in a feed, include<\/em> check <em>Summary<\/em>. That way, WordPress will <strong>automatically<\/strong> display excerpts on all posts using the first 55 words of each entry. As for the <strong>Read More tag<\/strong>, the platform allows you to display <strong>only the already existing part of your text as a preview.<\/strong>[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]When it comes to deciding which of the two to use, it all comes down to your preferences. It might be more convenient to go with the Read More tag <strong>because it\u2019s featured on every WordPress theme<\/strong>. If you decide to go down the excerpts route, you might have to manipulate the code and add the excerpt_tag to your theme if there is none. We are going to focus on the Read More tag and show you how to add it to your site using two of the most popular page builders.[\/vc_column_text][vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"add-read-more-button-in-gutenberg\"><\/a>How to Add the Read More Button In Gutenberg<\/h2>\n<p>[\/vc_column_text][vc_column_text]Gutenberg facilitates the process of adding the Read More tag in WordPress big time. When you finish entering the text that you would like to display as the summary, click on <em><strong>Add Block<\/strong><\/em> and select <em><strong>More<\/strong><\/em>.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/04\/Gutenberg-More-Block.jpg\" class=\"attachment-full size-full\" alt=\"Gutenberg More Block\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/04\/Gutenberg-More-Block.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/04\/Gutenberg-More-Block-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/04\/Gutenberg-More-Block-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/04\/Gutenberg-More-Block-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]The <em>Read More<\/em> block will appear below your text.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/04\/Read-More-Block.jpg\" class=\"attachment-full size-full\" alt=\"Read More Block\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/04\/Read-More-Block.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/04\/Read-More-Block-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/04\/Read-More-Block-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/04\/Read-More-Block-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]You can now<strong> edit the <em>Read More<\/em> text<\/strong> and enter something else according to your requirements, e.g.<em> Continue Reading, Learn More<\/em>, etc.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/04\/Continue-Reading.jpg\" class=\"attachment-full size-full\" alt=\"Continue Reading\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/04\/Continue-Reading.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/04\/Continue-Reading-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/04\/Continue-Reading-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/04\/Continue-Reading-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Another thing you can do is hide the content before the Read More tag on full content pages. That means <strong>the text you set as the teaser won\u2019t appear on the full post after users click on the <em>Read More<\/em> option.<\/strong>[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Once you\u2019re done with the editing, save the changes.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/04\/Read-More-Gutenberg-Live.jpg\" class=\"attachment-full size-full\" alt=\"Read More Gutenberg Live\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/04\/Read-More-Gutenberg-Live.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/04\/Read-More-Gutenberg-Live-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/04\/Read-More-Gutenberg-Live-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/04\/Read-More-Gutenberg-Live-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;78px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"add-read-more-button-in-classic-editor\"><\/a>How to Add the Read More Button In the Classic Editor<\/h2>\n<p>[\/vc_column_text][vc_column_text]While creating a post in the Classic editor\u2019s <em>Visual<\/em> editor, place the cursor at the point where you wish for the preview to end and select the <em><strong>Insert Read More<\/strong><\/em> tag option from the toolbar displayed above the text.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"443\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/04\/Classic-Read-More-Tag.jpg\" class=\"attachment-full size-full\" alt=\"Classic Read More Tag\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/04\/Classic-Read-More-Tag.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/04\/Classic-Read-More-Tag-300x137.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/04\/Classic-Read-More-Tag-768x351.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/04\/Classic-Read-More-Tag-620x283.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]You can also move it with the left-mouse click and place it wherever you please.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/04\/Classic-Editor-More-Tag.jpg\" class=\"attachment-full size-full\" alt=\"Classic Editor More Tag\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/04\/Classic-Editor-More-Tag.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/04\/Classic-Editor-More-Tag-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/04\/Classic-Editor-More-Tag-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/04\/Classic-Editor-More-Tag-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]If you\u2019re using the <em>Text<\/em> editor, you can use the following tag and add it just where the preview will end:[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\">&lt;!--more--&gt;<\/pre>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Once you save the changes, the Read More button will appear on your site.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"400\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/04\/Classic-Editor-Read-More-Live.jpg\" class=\"attachment-full size-full\" alt=\"Classic Editor Read More Live\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/04\/Classic-Editor-Read-More-Live.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/04\/Classic-Editor-Read-More-Live-300x124.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/04\/Classic-Editor-Read-More-Live-768x317.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/04\/Classic-Editor-Read-More-Live-620x256.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;78px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\">Conclusion<\/h2>\n<p>[\/vc_column_text][vc_column_text]Adding the Read More tag in WordPress does not require any coding knowledge from your end. With both the Classic Editor and Gutenberg, you can display the post preview and the Read More link in just a few mouse clicks. What matters is to think carefully about which part of the text could whet the curiosity of your users and inspire them to continue reading your content.<br \/>\n[\/vc_column_text][\/vc_column][\/vc_row]<\/p>\n<\/div>","protected":false},"excerpt":{"rendered":"<p>Wondering how to add the Read More tag in WordPress? We will show you how to do it using two of the most popular page builders \u2013 Gutenberg and the Classic Editor<\/p>\n","protected":false},"author":4,"featured_media":23342,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[7],"tags":[46,27,4,75,13],"class_list":["post-23247","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tutorials","tag-blogging","tag-content","tag-tips","tag-tricks","tag-wordpress"],"_links":{"self":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts\/23247","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/comments?post=23247"}],"version-history":[{"count":0,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts\/23247\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/media\/23342"}],"wp:attachment":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/media?parent=23247"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/categories?post=23247"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/tags?post=23247"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}