Wordpress Add Read More Link to Excerpt

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

If you accept set your WordPress site to display post excerpts on the forepart or home page, you will want visitors to click on the title or a link to encourage them to keep reading your post or article, correct? WordPress makes this technique like shooting fish in a barrel, and customizable.

Contents

• 1 The Excerpt Basics
• 2 Read More Techniques
  • two.one Forbid Page Curlicue When Clicking the More Link
  • 2.2 Modify The Read More Link Text
• three Change the Read More text when using the the_excerpt()
• 4 Customizing the "more…" text
  • four.1 Having a custom text for each post
  • 4.two Adding An Image
  • 4.3 How to utilise Read More in Pages
    • four.3.1 When to set $more
    • iv.3.ii Retrieving content before or after the $more
  • 4.4 More most $more

The Extract Basics

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

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

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

In both cases, if yous have prepare anything in the Extract meta box on the post editor screen, that text volition be used. Otherwise, the excerpt will exist automatically trimmed.

The nigh ordinarily used method is the first one, because the user editing the post tin choose between showing the whole content or just the excerpt, individually for each mail. 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 quicktag in the post.

To add a more than quicktag in your mail, put your cursor where you want to terminate the excerpted content of your mail service and click the more quicktag button. quicktags are the little buttons found above the editing window in your Administration > Postal service > Add New Post. They include bold, italic, links, and others, and the famous more than.

It will insert a lawmaking at that signal that looks similar this:

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

The residual of the post continues in the editing window, but when viewed on the non-single/non-permalink web folio such every bit athenaeum, categories, front end folio, and searches, the post is shown as an excerpt to the more signal.

Users can then go on reading more than every bit you take enticed them with your summary introduction, by clicking on a link to the full article. Themes usually include this link in the championship and the above methods will generate it by default trailing your teaser, equally the instance beneath.

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

Read More than 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 similar "Read More". The second 1, $strip_teaser, sets whether or not the teaser part or excerpt part earlier the more text should be stripped (TRUE) or included (FALSE). The default is Imitation, which shows the teaser role.

To remove the teaser office:

• Alter the_content(); in your index.php to (i.e., the 2d parameter controls this):

the_content( '', Truthful );

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

Prevent Page Scroll When Clicking the More Link

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

Users tin prevent the scroll past filtering the_content_more_link with a simple regular expression.

function remove_more_link_scroll( $link ) { 	$link = preg_replace( '|#more-[0-9]+|', '', $link ); 	render $link; } add_filter( 'the_content_more_link', 'remove_more_link_scroll' );        

But add the above code to the theme's functions.php file and the named anchors are no more.

Modify The Read More than Link Text

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

office 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/

Modify the Read More text when using the the_excerpt()

Sometimes you tin't beget calculation a more quicktag to all your posts, so the only way to prove an excerpt is modifying the template, changing the_content() to the_excerpt(). Information technology volition show the text "Read More" (Version 4.1 and later) or "[...]" (older versions).

To customize this text, add the following code to your functions.php file.

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

If you lot are using a Child Theme, the above code volition not work without modification if the parent theme has its own filters setting its ain "more" link. Yous volition demand to utilize 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 time of your file's execution, in that location is no filter to remove all the same, and your remove_filter() code will fail without warning.

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

role child_theme_setup() { 	// override parent theme'southward '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 know how it works, now expect at how we can make this petty invitation to go along reading your post be more than inviting.

By design, the the_content() template tag includes a parameter for setting the text to be displayed in the the "more…" link which allows y'all to go along reading.

By default, information technology looks 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 stupor on his face and said more than...

If y'all 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 go more sophisticated and make information technology fun:

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

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

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

Then set the moretext class in your style.css mode sheet to whatever you 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 go moving or I'd exist on him similar a limpet. He looked at me with shock on his face and said ...On the Edge of Your Seat? Click Here to Solve the Mystery.

Some people do not want the text and prefer to use an extended character or HTML character entity to move the reader on to the full post.

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

Would wait 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 desire to include the title of the post in the more than text, use the_title() template tag::

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

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 up and said ...continue reading the story called A Tale That Must Exist Told

Having a custom text for each post

Although the_content() is usually called from the template with a standard text as described above, it is possible to accept an private text for certain posts. In the text editor, simply write <!--more Your custom text -->.

So, y'all may accept something like this:

<!--more Simply wait, in that location's more! -->

Calculation An Paradigm

The design possibilities with CSS are practically unlimited, and WordPress allows you to use images in many of their Template Tags, including the more tag. To add together an epitome, there are two ways to practice it. Begin with the most simple -- list it in the_content() template tag.

This examples features the image of a leaf later the "Read More" text and assumes that the prototype file is inside your theme'southward images binder.

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

Notice that the code uses an ALT and Championship in the image tag. This is in compliance with accessibility and web standards, since the image is both an image and a link. Here is what information technology might look similar.

and I told him that he should become moving or I'd be on him similar a limpet. He looked at me with shock on his confront and said Read More than...

You could even add a style to the image and more tag, as mentioned higher up, to way it even more. To utilize the image without the "Read More" text, just delete the text.

The second example uses the CSS background paradigm. We have described how to utilize fashion classes in the above examples. This is a little tricker. The container'due south style must be prepare to allow the background prototype to show out from behind the text. If y'all were to utilise the to a higher place example equally a background prototype, the style.css style sheet for this might await like this:

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

The 50px padding confronting the right margin should make sure the text is pushed over abroad from the image as to not overlap it. The meridian ensures that the container will aggrandize wide enough so the image is visible within the container, since a groundwork prototype isn't "really there" and can not push against the container'due south borders. Yous may have to experiment with this to fit the size and shape of your own paradigm.

You have gotten the basics. From hither, it is up to your imagination.

How to use Read More in Pages

Please recollect that the "Read More than" tag is used merely on the Home page which shows the latest posts. It does not work in "Pages". If you desire to turn it on in Pages likewise 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 ahead of the call the_content(), simply AFTER the_post()  <?php the_content('Continue Reading'); ?>        

When to ready $more

Information technology'due south important that if you're going to over-ride the default $more global variable you do it within The Loop, merely later your setup the post. If you're working with the standard Loop and using the_post(), make sure you set $more after the_post (but before the_content().

Run into More tag ignored on static front folio forum topic.

Retrieving content before or later the $more

If you are looking to retrieve the content that is earlier or after the (<!--more-->), the get_extended() role volition provide this content for yous. It returns an array with the content earlier the more than link, the more than link, and the content after the more link.

More well-nigh $more

If y'all ready the $more than variable to -1, the More tag will not be displayed. This can exist useful in a "mullet loop", which displays the full content for only the first post, and and then displays merely excerpts for all remaining posts. Like this:

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

wellsexpeater.blogspot.com

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

Share this post