How to Add a Read More to a Wordpress Page

Languages: English • 日本語 Português do Brasil • (Add your language)

If you take set up your WordPress site to brandish mail excerpts on the forepart or abode page, yous volition desire visitors to click on the title or a link to encourage them to go on reading your post or article, right? WordPress makes this technique like shooting fish in a barrel, and customizable.

Contents

• 1 The Extract Basics
• two Read More Techniques
  • 2.1 Prevent Page Ringlet When Clicking the More Link
  • ii.2 Modify The Read More Link Text
• 3 Modify the Read More text when using the the_excerpt()
• four Customizing the "more…" text
  • 4.1 Having a custom text for each mail
  • 4.2 Adding An Image
  • iv.3 How to use Read More in Pages
    • 4.3.1 When to ready $more
    • iv.3.2 Retrieving content before or afterward the $more
  • 4.four More virtually $more

The Excerpt Basics

Excerpts (teasers) can be shown on WordPress through two methods:

• The start, keeping the the_content() template tag and inserting a quicktag chosen more at your desired "cut-off" point when editing the post.

• The second, by replacing the the_content() template tag with the_excerpt().

In both cases, if you lot have prepare annihilation in the Excerpt meta box on the post editor screen, that text volition be used. Otherwise, the extract will exist automatically trimmed.

The most commonly used method is the first one, because the user editing the mail service tin can choose between showing the whole content or just the extract, individually for each post. However, using the_excerpt() in your template file can also get a teaser from the first 55 words of the post content, without the demand to place a more than quicktag in the post.

To add a more quicktag in your post, put your cursor where yous desire to end the excerpted content of your postal service and click the more quicktag button. quicktags are the little buttons establish above the editing window in your Administration > Post > Add New Post. They include bold, italic, links, and others, and the famous more.

It will insert a code at that signal that looks like this:

and I told him that he should become moving or I'd be on him like a limpet.  He looked at me with daze on  his face and said  <!--more than-->

The residual of the post continues in the editing window, merely when viewed on the non-single/non-permalink web page such as archives, categories, front page, and searches, the post is shown equally an excerpt to the more point.

Users can then continue reading more every bit you have enticed them with your summary introduction, by clicking on a link to the full article. Themes commonly include this link in the title and the above methods will generate it by default trailing your teaser, every bit the example beneath.

and I told him that he should get moving or I'd be on him like a limpet. He looked at me with shock on his confront and said more...

Read More Techniques

The parameters within the template tag the_content() are as follows:

<?php the_content( $more_link_text , $strip_teaser ); ?>        

The $more_link_text sets the link text like "Read More". The 2d one, $strip_teaser, sets whether or not the teaser part or excerpt part before the more text should be stripped (TRUE) or included (FALSE). The default is FALSE, which shows the teaser part.

To remove the teaser office:

• Change the_content(); in your index.php to (i.e., the second parameter controls this):

the_content( '', TRUE );

• Include <!--noteaser--> in the mail text, immediately after the <!--more than-->.

Foreclose Page Coil When Clicking the More Link

By default, clicking the .more than-link anchor opens the web document and scrolls the page to section of the document containing the named anchor (#more-000). This section is where writers cull to identify the <!--more--> tag within a postal service type.

Users can foreclose the gyre by filtering the_content_more_link with a simple regular expression.

role remove_more_link_scroll( $link ) { 	$link = preg_replace( '|#more-[0-ix]+|', '', $link ); 	return $link; } add_filter( 'the_content_more_link', 'remove_more_link_scroll' );        

Simply add the to a higher place code to the theme'due south functions.php file and the named anchors are no more.

Alter The Read More than Link Text

Adding this code to your functions.php file enables you to customize the read more than link text.

function modify_read_more_link() {     return '<a class="more-link" href="' . get_permalink() . '">Your Read More Link Text</a>'; } add_filter( 'the_content_more_link', 'modify_read_more_link' );        

Code reference: https://developer.wordpress.org/reference/hooks/the_content_more_link/

Change the Read More than text when using the the_excerpt()

Sometimes you lot can't afford calculation a more quicktag to all your posts, so the only fashion to prove an extract is modifying the template, changing the_content() to the_excerpt(). It volition prove the text "Read More" (Version iv.one and subsequently) or "[...]" (older versions).

To customize this text, add the post-obit lawmaking to your functions.php file.

// Replaces the extract "Read More than" text by a link part new_excerpt_more($more) {        global $post; 	return '<a class="moretag" href="'. get_permalink($mail service->ID) . '"> Read the full article...</a>'; } add_filter('excerpt_more', 'new_excerpt_more');        

If you are using a Child Theme, the above lawmaking will not work without modification if the parent theme has its own filters setting its own "more than" link. You will need to employ the remove_filter() function to remove the parent's filters for yours to work. The problem is your functions.php file is loaded before the parent's functions.php, so at the fourth dimension of your file's execution, there is no filter to remove yet, and your remove_filter() lawmaking volition fail without alarm.

The key is to put your remove_filter() code in a function that executes from an action hook that triggers after the parent theme is loaded. The following code is an example of the boosted code needed to become the above code to work from a child theme of the parent theme Twenty Eleven. You will need to examine your actual parent theme'southward lawmaking for the correct parameters in the remove_filter() code, they must exactly match the add_filter() parameters used by the parent.

function child_theme_setup() { 	// override parent theme's 'more' text for excerpts 	remove_filter( 'excerpt_more', 'twentyeleven_auto_excerpt_more' );  	remove_filter( 'get_the_excerpt', 'twentyeleven_custom_excerpt_more' ); } add_action( 'after_setup_theme', 'child_theme_setup' );        

Customizing the "more…" text

Seeing that you lot know how information technology works, now expect at how we can make this petty invitation to continue reading your mail be more inviting.

By design, the the_content() template tag includes a parameter for setting the text to exist displayed in the the "more…" link which allows you to keep reading.

Past default, it looks like this:

and I told him that he should get moving or I'd exist on him like a limpet. He looked at me with shock on his face up and said more...

If you want to change the words from more.... to something else, just blazon in the new words into the template tag:

<?php the_content('Read on...'); ?>

Or get more sophisticated and make it fun:

<?php the_content('...on the edge of your seat? Click here to solve the mystery.'); ?>

You can style the text in the template tag, too.

<?php the_content('<span course="moretext">...on the edge of your seat? Click here to solve the mystery.</span>'); ?>

Then set the moretext class in your style.css mode canvas to whatever y'all want. Here is an example of the style which features bold, italic text that is slightly smaller than the default text:

and I told him that he should get moving or I'd exist on him like a limpet. He looked at me with daze on his face and said ...On the Edge of Your Seat? Click Here to Solve the Mystery.

Some people practice non want the text and prefer to use an extended character or HTML character entity to move the reader on to the total post.

<?php the_content('&raquo; &raquo; &raquo; &raquo;'); ?>

Would look like this:

and I told him that he should get moving or I'd be on him like a limpet. He looked at me with shock on his face and said » » » »

If you want to include the title of the post in the more than text, use the_title() template tag::

<?php the_content("...continue reading the story chosen " . the_title('', '', false)); ?>

and I told him that he should get moving or I'd exist on him like a limpet. He looked at me with shock on his face up and said ...go along reading the story called A Tale That Must Be Told

Having a custom text for each postal service

Although the_content() is ordinarily chosen from the template with a standard text as described above, it is possible to take an individual text for certain posts. In the text editor, merely write <!--more than Your custom text -->.

So, you lot may accept something like this:

<!--more Only look, there's more! -->

Adding An Image

The blueprint possibilities with CSS are practically unlimited, and WordPress allows you lot to employ images in many of their Template Tags, including the more tag. To add together an image, there are ii ways to do information technology. Brainstorm with the most elementary -- list it in the_content() template tag.

This examples features the image of a leaf subsequently the "Read More" text and assumes that the image file is within your theme's images folder.

<?php the_content('Read more...<img src="' . get_bloginfo('template_directory'). '/images/leaf.gif" alt="read more" title="Read more than..." />'); ?>

Discover that the code uses an ALT and Championship in the epitome tag. This is in compliance with accessibility and web standards, since the epitome is both an image and a link. Here is what it might look like.

and I told him that he should become moving or I'd exist on him like a limpet. He looked at me with stupor on his confront and said Read More...

You could even add a style to the image and more tag, equally mentioned in a higher place, to style it even more. To use the epitome without the "Read More than" text, merely delete the text.

The 2nd example uses the CSS background image. Nosotros have described how to use style classes in the above examples. This is a little tricker. The container'southward manner must be ready to allow the background paradigm to prove out from backside the text. If you were to apply the higher up example as a background image, the style.css style sheet for this might await like this:

.moretext {    width: 100px;     height: 45px;     groundwork:url(/images/leaf.gif) no-repeat right middle;    padding: 10px 50px 15px 5px}

The 50px padding against the right margin should make sure the text is pushed over away from the image as to non overlap it. The acme ensures that the container will expand wide plenty so the epitome is visible inside the container, since a groundwork image isn't "really there" and can not button against the container'due south borders. You may have to experiment with this to fit the size and shape of your ain prototype.

You have gotten the basics. From here, it is upwardly to your imagination.

How to utilise Read More than in Pages

Delight remember that the "Read More than" tag is used only on the Home folio which shows the latest posts. It does non work in "Pages". If y'all want to plow it on in Pages too for showing a set of partial posts, use the following code inside the loop for the dynamic content:

<?php global $more; $more = 0; ?> //The code must be inserted alee of the call the_content(), but Later the_post()  <?php the_content('Continue Reading'); ?>        

When to gear up $more than

It's important that if yous're going to over-ride the default $more global variable you do information technology within The Loop, merely after your setup the post. If you're working with the standard Loop and using the_post(), make certain you set $more after the_post (but before the_content().

Run across More tag ignored on static front page forum topic.

Retrieving content before or later the $more

If you are looking to recollect the content that is before or after the (<!--more-->), the get_extended() function will provide this content for yous. It returns an assortment with the content before the more link, the more link, and the content after the more link.

More about $more

If yous set up the $more variable to -i, the More tag will not be displayed. This can be useful in a "mullet loop", which displays the full content for only the first mail service, and then displays only excerpts for all remaining posts. Like this:

<?php global $more; $more = -1; //declare and set $more before The Loop ?> <?php if (have_posts()) : while (have_posts()) : the_post(); //begin The Loop ?> <?php      if ($more == -1) { //do not utilize the more tag on the first one.         the_content();         $more = 0; //foreclose this from happening once more. use the more tag from at present on.     }     else { //use the more tag         the_content(__('Read more...'));     } ?> <?php endwhile; //end of The Loop ?>        

thomashappone.blogspot.com

Source: https://codex.wordpress.org/Customizing_the_Read_More

Share this post