Customizing Your ‘More’ Tag
The home page of your blog is prime real estate. You spend hours thinking up clever headlines for your posts, but they all end up pushed way down in a ridiculously long home page that takes far too long to scale (even with the most aggressive spins of the mouse’s scroll wheel).
Enter: the More tag. A handy little icon built in to the post editor’s quicktags panel (the little toolbar above the content input area).
You can use this button to cut off how much content appears on your blog page. It automatically adds a link at the bottom of the excerpt to read the rest of the post. By default, the link reads “more…”. Pretty bland if you ask me. Luckily, WordPress has made it relatively easy to customize the tag to say exactly what you want.
The parameters for the more tag are contained in the_content() tag. Changing the text that appears is as simple as adding it in the tag. For example, if I wanted my more tag to read “Continue Reading”, the code would look like this:
<?php the_content( 'Continue Reading' ); ?>
Now that you have input the text that you want to see, you can go even further by styling that text. Add a class to the more tag like this:
<?php the_content( '<span class="moretagstyle">Click Here to Read More...</span>' ); ?>
Now go to your style.css file and add the class. For example, to italicize the text, the css would look like this:
.moretagstyle {
font-style: italic;
}
This is where you can let your imagination go wild. You could make the lettering uppercase, bold, a different color, or even different size. Those things aren’t crazy enough for you? Try adding one of the character entities that are built in to WordPress, like the double arrows.
<?php the_content( 'Read More »' ); ?>
Looks like: Read More »
You can see more of these on the WordPress Character Entities page.
Rate this ➜
Keep Up With iThemes
iThemes Loves, Uses & Recommends
HostGator for WordPress Hosting
6 Responses to “Customizing Your ‘More’ Tag”
Leave a Reply
Get Theme Discounts
& Special Offers
Featured Plugin
Need WordPress Hosting?
For the do-it-yourself option, iThemes recommends HostGator. Excellent customer service, affordable prices.
Awesome! Thanks for the post. I was justing thinking I wanted to do this. This may be a little off topic, but does the MORE tag affect excerpts as well? Meaning, does the more tag tell WP where to create excerpt endings for archive pages and feeds? Or is it just a content slicer? I hope that made sense…
Taking the more field one step further by giving the author the ability to change the ‘read more’ tag to anything you choose on a per post basis via custom fields:
< ?php $custommore = get_post_meta($post->ID, ‘custom_more’, true); ?>
< ?php if (!$custommore) { $custommore = 'Read More »'; } ?>
< ?php the_content($custommore); ?>
What you need to do is replace the_content template tag with this code. Then when you write a post, create a new custom field with the key of custom_more.
****NOTE: a space was added between the “<” and the “?” to allow the code to appear in the comments. If you use this code, remove that space.****
I think this is a great article, but I think that it only covers half of the topic. The other half that is not covered is how to customize the more link itself. Using the custom “moretagstyle” class will only allow you to change the text color and if it’s italicized or not, but it won’t let you control how the link itself behaves.
To customize how the link itself behaves, you’ve got to use WordPress’s default more tag css class, “a.more-link”, for example (with generic styling that you’d of course change to fit your needs):
a.more-link:link {
color: #ffffff;
font-weight: normal;
text-decoration: none;
}
a.more-link:visited {
color: #ffffff;
font-weight: normal;
text-decoration: none;
}
a.more-link:hover {
color: #ffffff;
font-weight: normal;
text-decoration: none;
}
a.more-link:active {
color: #ffffff;
font-weight: normal;
text-decoration: none;
}
Hope this helps.
Chris & Shawn- Thank you for adding these pieces of information. These will help people who want to go a little further in the customization. I really appreciate the feedback and code.
-matt
Hi I have the theme Yukon. Can this more tag be applied to a page rather than a post so that I only show a small amount of the page content some pages can bcome quite long.
Hi Marshall,
Your question is actually a WordPress question, rather than a theme-specific question. You can find out more through WordPress support here: http://wordpress.org/support/ and of course you can always get Google results here: http://tinyurl.com/6k3exdq
All of our support is handled through our Support Forum. If you don’t want to use the WordPress.org support forum, your best bet is to sign into our online support forum, and post and direct your technical or support questions at: http://www.ithemes.com/support. In this case, the Yukon support forum.
Thanks!