WordPress “more” Tag Tricks

Everyone who has been using WordPress for any length of time should be familiar with the good ol’ <!--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 on single-post views. 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.

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 and format the more link text, depending on your specific design goals. Let’s take a look..

Customize the more link 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 »"; }
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 on a site-wide 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.

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 “','”',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!