DiggingIntoWordPress

by Chris Coyier & Jeff Starr

WordPress “more” Tag Tricks

Posted by on

Our personal collection of useful ways to customize and format the WordPress more tag…

Everyone who has been using WordPress for any length of time should be familiar with the <!--more--> tag. When you are writing a post, inserting the <!--more--> tag within the post text will create an excerpt out of any text/markup that precedes it. The post will then show the default “more…” link that readers may click to view the entire post. When the more tag is used, the post’s excerpt will be displayed on all non-single views, such as category, tag, and archive views; the entire post content will only be displayed when the single-post view is displayed. Let’s look at a quick example..

A quick example of how to use the more tag

If you have the following post text:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. 
Quisque volutpat mattis eros. Nullam malesuada erat ut turpis mattis.
Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.

<!-more->

Phasellus ultrices nulla quis nibh. Quisque a lectus. Donec consectetuer 
ligula vulputate sem tristique cursus. Nam nulla quam, gravida non dolor, 
commodo a semper suscipit, sodales sit amet, nisi adipiscing.

..your post will show this on all non-single post views:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio.
Quisque volutpat mattis eros. Nullam malesuada erat ut turpis mattis.
Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.

more…

..and this on all single-post views:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio.
Quisque volutpat mattis eros. Nullam malesuada erat ut turpis mattis.
Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.

Phasellus ultrices nulla quis nibh. Quisque a lectus. Donec consectetuer
ligula vulputate sem tristique cursus. Nam nulla quam, gravida non dolor,
commodo a semper suscipit, sodales sit amet, nisi adipiscing.

..which basically shows the entire post without the more link.

Why do we use the more tag?

Well mostly because excerpts are cool, and you can display many of them on your home page to give visitors a good overview of your content without making them scroll forever to do so. If one of your excerpts catches the visitor’s eye, they will most likely want to read the entire post, and can do so by clicking on the link created by the more tag. To help encourage this behavior, there are several ways to customize the more link text, depending on your specific design goals. Let’s take a look..

Customize the more link text on a post-by-post basis

There are a couple of good ways to customize the output format of your more link text. By far, the easiest way is to simply include your custom text right there in the more tag within your post text. For example, if you wanted to change your more text from the default to “Keep reading this post”, you would replace the usual <!--more--> tag with this:

<!--more Keep reading this post-->

This way, WordPress makes it easy to customize any post’s more link with unique text. This is one of those sweet WordPress secrets that not many people know about, as evidenced by the popular alternative method for customizing per-post more text:

<?php $custom_more = get_post_meta($post->ID, "custom_more_text", true);
if(!$custom_more) { $custom_more = "Keep reading this post &raquo;"; }
the_content($custom_more); ?>

This code looks for a custom field named “custom_more_text” and displays its value as the post’s custom more text. But again, this is complete overkill thanks to the previous method.

Customize the more link text on a sitewide basis

Instead of customizing individual more text, we can also customize it for all posts on a sitewide basis. The first and easiest way to change the default more link text is to simply add your custom text to the_content() template tag:

<?php the_content('Keep reading this post'); ?>

You can even add markup to help format and style the output according to your needs:

<?php the_content("<span class="custom-more">Keep reading this post</span>"); ?>

I think most WordPress peeps are familiar with this method and use it frequently. But there is also a newer method for accomplishing the same thing from the functions.php file. As of WordPress 2.8, we now may filter sitewide more links using the new filter hook, the_content_more_link:

function my_more_link($more_link, $more_link_text) {
	return str_replace($more_link_text, 'Keep reading this post', $more_link);
}
add_filter('the_content_more_link', 'my_more_link', 10, 2);

That goes into your theme’s functions.php file. Simply edit the “Keep reading this post” string to whatever you would like to use for your custom more text. This is a good way to change your theme’s more text without modifying any theme template files — perfect for customization via child themes! Check out Justin Tadlock’s article for more information.

Automatically display the post title in more links

Another cool more-tag trick is to include the post title in the more link text. For example, we might want to setup something like this:

Lorem ipsum..

Continue reading “Lorem Ipsum Strikes Back”

Including the post title into your more links is a great way to personalize each excerpt with a little “more” (haha). Anyway, here is how the Codex suggests doing this:

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

That’ll work, but we can clean it up a little like so:

<?php the_content(the_title('Continue reading &ldquo;','&rdquo;',false)); ?>

That’s a tight little snippet that will generate custom more links that include the title of the associated post. Nice.

Stop more link from jumping to middle of page

By default, clicking on the more link will take the reader to the single-post view at the location where the more tag is specified in the source code. Thus, if you are using default more-tag functionality, your visitors are being thrown halfway-down your post after clicking on the more link. At one time, this seemed like a good idea, but the convention is now to simply open the post-view without jumping to any particular point in the page.

All of that to say this: if you want the more link to open the post-view at the top of the page, slap this little gem into your active theme’s functions.php file:

function remove_more_jump_link($link) { 
	$offset = strpos($link, '#more-');
	if ($offset) {
		$end = strpos($link, '"',$offset);
	}
	if ($end) {
		$link = substr_replace($link, '', $offset, $end-$offset);
	}
	return $link;
}
add_filter('the_content_more_link', 'remove_more_jump_link');

This will kill the more “jump” and keep visitors from being thrown around the page unexpectedly. Note that this function is only for WordPress version 2.8 and better. For older versions, you’re gonna need to hack the core. See the Codex for more information.

Target custom pages with the more tag

The typical use of the more tag is such that its link opens the single-view of the associated post. This may be changed, however, should you ever need to target a different web page. To understand this a bit better, consider the parameters available to the_content() template tag:

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

Here, the $more_link_text parameter defines the text that will be used for the more link. The $strip_teaser parameter defines a boolean value determining whether or not to display the more link. The third parameter is the one we’re interested in here. The $more_file parameter specifies the URL that the more link should reference. By default, this URL points to the associated single-view post, but we could just as easily customize this like so:

<?php the_content('Order Now!', FALSE, 'http://amazing-product.com/order-page.html'); ?>

Or whatever. Obviously, the uses for this are limited, but it’s there if you ever need it.

Styling the more link

The easiest way to style the more tag is to take advantage of the built-in class attribute, more-link. By default, this class is automatically included on every WordPress more link in the entire world. Thus, you can apply styles directly, for example:

.more-link {
	border: thin solid black;
	letter-spacing: 1px;
	background: yellow;
	font-size: 24px;
	color: red;
	}

If you need additional control, you may also incorporate custom markup to your more link via the_content() template tag:

<?php the_content("<span class="custom-more">Keep reading <em>this</em> post</span>"); ?>

Which would output markup such that the following CSS could be applied:

.custom-more {
	font-weight: bolder;
	}
	.custom-more em {
		font-weight: normal;
		font-style: italic;
		}

Obviously, this is just a simple example to help illustrate the method. Just about anything is possible!

Adding an image to your more link

Last but not least, let’s wrap up the article with a couple of ways to add an image to your more link. The first way to do it is to simply include the image element directly in the_content() template tag:

<?php the_content('<img src="http://domain.tld/read-more.png" alt="Arrow" title="Read more" />'); ?>

This will spit out an image for your more tag instead of text. You could also add in some text, but if you don’t be sure to include the alt and title attributes for the <img> element. Either way, you can also style your “Read more” image using some CSS, or even bypass the <img> element completely and add an image using a few lines of CSS:

.more-link img {
	background:url(http://domain.tld/read-more.png) no-repeat left center;
	padding: 10px;
	height: 100px;
	width: 300px;
	}

Again, just an example demonstrating how it works. The possibilities here are virtually infinite.

“I give myself a B+”

It would have been an “A”, but I just know there are more cool things you can do with the WordPress more tag. This article shares all of the cool tricks that we know, but there’s just got to be more sweet tips! Hopefully you know of some more more tricks to share with the WordPress community ;) – Chime in!

27 Responses

  1. kylegetsspam January 4, 2010

    You should be able to combine the tip of putting the title in the more link with the functions.php stuff by using global $post and then getting the title through there.

  2. Nice tutorial, very well explained. Thanks for posting it.

  3. wow. this is freaking king. thanks for the tips!

  4. Hi Jeff,

    I think that:

    function custom_more($more_link, more_link_text)

    in the 6th code box, should be:

    function my_more_link($more_link, more_link_text)

    Apart from that, it’s an A+ :) I’ll be implementing some of this on my site shortly. Thanks.

    • Jeff Starr

      Ah good catch — Thanks Stephen :)

      • No problem – for now I’ve just implemented the “Stop more link from jumping to middle of page” snippet – this used to really irritate me, so thanks for the solution.

  5. The “noteaser” tag should be mentioned in this context:

    http://elektroelch.net/blog/noteaser-the-unkown-wordpress-tag/

    • Jeff Starr

      Absolutely – I was going to include an entire section on both the noteaser and nextpage tags, but the article was already getting kind of long.. so I think I’ll save those for another post ;) Thanks for the input!

  6. Ah finally back :)

    Is there a way to include the more tag automatically – let’s say after 200 words?

    • Jeff Starr

      The easiest way to do this is with excerpts, which are extremely flexible, especially if you use a plugin like the_excerpt Reloaded: http://guff.szub.net/2005/02/26/the_excerpt-reloaded/ (Editor’s note 2013/10/14: this page seems to be down, so I removed the link — let me know if/when it’s back online and I’ll relink.)

  7. This is totally un-related but I just noticed that your code examples automatically expand when you hover over them, very cool! How did you do that?

  8. Nice Collection…

    Any Ideas how to use the more tag also in the rss feed?

  9. The book is great and your site is great and this post is great!! Thanks for all the great info! Digging Into WordPress is quickly becoming my primary WordPress resource!

  10. Chris,

    Thanks so much for this post, i just ran into a situation where i really needed to disable the more tag “jumping” thing, great timing on this for me.

    Thanks again for all you guys do for the WP community!

    Rex

  11. Gary Dates January 25, 2010

    Er, please fix the first instance of the “more” tag in your otherwise great article.

    • Gary Dates January 25, 2010

      I meant to refer to the first instance of the “more” tag inside of the first code example.

      • Jeff Starr

        Yeah that’s easier said than done, unfortunately. For some reason WordPress auto-formats that particular more tag when included with the two dashes. Breaks post layout and looks terrible. Hopefully the many instances of the correct more tag in the post will be enough for people to get it correct. Thanks for keeping an eye on things, Gary.

  12. Hi,

    I would like to insert a more tag on my home page, because I would like to have the rest of my story to open up under the link instead of on a new page. Do you have any idea how I can do this. I have to say though, that I am trying to build a website without realy knowing how, Any help is very much apreciated.

    thank you so much

  13. Yesterday, i’ve found another really cool way to use the more-tag. Within the Theme linquist (http://linquist.redworks.sk/), the more-tag is used to divide content and picture.
    Really nice idea

  14. hi i have been tinkering with the more link on my site http://www.codelist.co.uk and have been using it as like a voucher code button(revealer) my more link says (click for the code) i have also managed to open 2 sites from 1 click of the more link, 1 reaveling the code and the other taking you to the affiliate site. i did this with the help of “cutom more link” plugin.
    My problem is i need the more links to be able to open different affiliate sites eg. “click for code” more link on a very.co.uk voucher will take you to very.co.uk, but then i have a “click for code” more link on a littlewoods voucher and because its the same more link it still opens up very.co.uk is there any way of having multiple more links or any other way around this problem. i know very little code but can follow precise instructions. please help

  15. Alex T March 1, 2010

    Hi! This is a great collection of info on the more tag. but I’ve been searching all over the internet and I wonder if it’s even possible… can additional text be written after the ‘more tag’ and shown? I know this sounds strange… back when I used livejournal they had an easy great code called “lj-cut” and you can end the cut any time, so you could hide any amount in any part of the post. I would do that a lot, and end with maybe a “stinger” or something un-related afterward that I wanted to be shown outside of the cut.

    can this be done on wordpress? I hope that makes sense. I wish livejournal never added ads. sigh.

  16. m aziz March 2, 2010

    Great tips! Is there anyway to select some text in the MIDDLE of the feed rather than the top as an excerpt?? Would really appreciate feedback on this.
    Many thanks!

  17. I was wondering the “more tag” button in wordpress TinyMCE inserts just the default and not a
    I found this page by looking around if there was a solution somewhere that could expand the standard function to include the “more tag” in tiny mce but haven’t really found anything.
    Do you have an idea, where to look for this?

  18. PERFECT! This is exactly what I needed. After reading this I was able to implement an image as my “read more” tag. Thanks so much!

  19. Hi,

    I was wondering if there was anyway to make the more tag link to a separate website? Like if I put the first part of a news story on my website and then if someone wanted to read more they would click the more tag and it would take them to the website that the story came from. I thought i saw something about it above but it didnt work so maybe i’m wrong or just dont know what to do.

    Thanks

Comments are closed. Contact us with any critical information. Thank you!

Code is poetry