Changing the more link in a WordPress theme is easy. Just open your theme files and change it. But, if you’re writing a plugin to change this or want to preserve your theme’s code (e.g., child themes), you need a way to easily edit this.
I’ve seen some themes add their own more link filter hook, but this is unnecessary because WordPress 2.8 introduced the_content_more_link filter hook. Maybe this post will help those theme authors cut back on an extra filter hook when it’s not needed.
This will allow us to easily overwrite the default.
What is the more link?
When writing a WordPress post, you can cut the text off at any point by adding in this code:
<!--more-->If you’re using a theme that shows the standard full post on the home/blog page of your site, this will cut the article short at the point you added the code. It will also add a link to the single-post view where the reader can continue reading the post.
Using the_content_more_link filter hook
What we want to do is change our theme’s more link text, but we need to do this the appropriate way, and the appropriate way means not hacking up your theme author’s code.
Let’s assume our theme’s more link outputs “(more…)” when we add the <!--more--> link within the post editor. Maybe we don’t like that message too much. We’d like to change it to read “Continue reading →” instead.
Open your theme’s (or child theme’s) functions.php file and paste this code in:
<?php
add_filter( 'the_content_more_link', 'my_more_link', 10, 2 );
function my_more_link( $more_link, $more_link_text ) {
return str_replace( $more_link_text, 'Continue reading →', $more_link );
}
?>That’s all there is to it. Enjoy your custom more link text.
Totally simple! Love it!
Between your and Ian’s wonderful code tutorials, I might actually finish (and release) a proper child theme for Thematic.
Thanks Justin!
@ Justin, the script above, using the_content_more_link filter hook, just works for WP 2.8 ?
Thanks for the tip. Also remember that you can style your more-link text using the CSS class:
Justin, is it possible to have an image for this custom more link?
And apply it to specific categories as well?
I don’t want to hijack any answer Justin might give, but you can have a background image attached to the .more-link CSS class and can easily apply a single image to the more link.
@Ed,
As a followup, I used this PHP code to add a class to the container that the more link is in. By doing so you should be able to apply additional CSS markup to add a different background image based on the category ID number.
I think.
Sorry, the PHP code was stripped out of the post above. Let’s try it again:
No problem at all David!
So how would that alter the above code snippet Justin posted in his post as a whole?
Like this?
I don’t know exactly how to apply your suggestion to the code.
Ah crap, same thing happens to me now.
Let me give it another shot:
Okay this is not going to work for me, I can’t post the code in a comment.
I placed this code (contained withing the appropriate PHP tags) inside the container tag that the more-link was contained within. By doing this a unique container class can be generated depending on the category of the post.
For instance, in my case it generated as such:
as the 33 is the category ID of the category assigned to the post.
Then, I suppose, you could use CSS to customize this class and serve up a different image for the more-link depending on the class.
Make sense?
@Ed
http://www.1955design.com/_powerlink/
At the example URl above, I have styled the “Read the full article” link just as I described above. The .more-link class can be styled as desired, and the PHP code that gets the current category can be used to specifically style a CSS container. The red bordered link is styled in such a way that only items in category 3 received the red border. In this same manner you could apply a background image to the link that would be different for each of your categories. I hope this helps.
Hi David,
Hmm, I’m still not sure how I need to use that line in combination with Justin’s code?
Should I just add it under the second line?
I’ve got the snippet here: http://snipt.net/Edwin/custom-more-link
@Ed,
That code needs to be hard coded into your index.php file, etc. so that it applies the unique class to the division that the more-link is located in. Make sense?
@David,
So I could basically add that line (Within the appropriate php tags) after the the_content template tag?
Not really. It needs to be added to the CSS markup that controls the container that the more-link is located in. Are you familiar with CSS?
The Frosty — I’m glad you like it.
Aaron — Feel free to port it to Hybrid too.
Webwinkel — Yep, it only works with WordPress 2.8+.
David Zemens — That’s a good tip. I probably should’ve mentioned it in the the post.
Ed — Yes. I personally recommend a background image, but it depends on what theme you’re using if you’re differentiating between categories. The basic HTML image replacement would be:
You can use conditional tags to change it up between categories.
@David,
Okay, now you’re confusing me.
The code line you posted surely can’t be posted in a CSS stylesheet?
$category = get_the_category(); echo $category[0]->cat_ID;@Justin,
Thanks for posting the code for the background image, I’ll check it out.
My Question is..
add_filter( 'the_content_more_link', 'my_more_link', 10, 2 );
What for the 10 and 2 number above?
Very nice discussion going on here, I would like to see more creative uses for the custom more link – any ideas !
Hi Justin,
I’m finding a lot of useful stuff here.
My homepage was getting a bit full so I’ve just edited a few posts and put in the
tag to tidy it up a bit. I know there’s plugins that do something similar but this is so simple and you can choose where to put the tag to intrigue people – a bit like having a headline that makes them want to read more.
Now I have a whole compact list a partial posts and I think it will get me more readers.
Haven’t got as far as the advanced stuff yet
I am using this one but not able to edit its style, like I want it to display in bold and underline.
Can I change that on the stylesheet or in the functions.php itself.
@Simon;
You should be able to add this class to your style.css file and style it accordingly:
.more-link {
}
My homepage was getting a bit full …yeah. but no problem
Perfect! Just what I was looking for. Was able to hook it up on Thematic without any issues. Out of curiosity: what are the 10 and 2 numbers refering to?
Thanks!
Nice trick. i want to ask you can we apply filters in sidebar widgets. I want to change all links in sidebar and want to add affiliate id in front of all the links. can i do this using the filter . please let me know
This is how you can remove read more link
http://jaxov.com/2009/10/remove-read-more-link-from-wordpress-homepage-easily/
I’m starting to use more links too.
But what if you have a nice beautiful image (say 640 X 480px) in your post and you still want that image (resized of course!) to be part of the entry so that you post isn’t just all text. For exaple, look at how Purse Blog (http://www.PurseBlog.com ) has nice small intros with a “Continue Reading” button, but the glamourous fashion product image is still part of the shortened post. How do I do that??
I know some professional themes do that right off the bat. But is there a way to tell WordPress that you want the image in your post to also be part of the shortened entry?
Thanks for the tips!
Thanks very much! In particular, here’s how to append a right arrow to each cut, regardless of whether you’re using the default cut text or not:
Oh, darn. that was supposed to be
str_replace("</a>", " →</a>", $more_link)Thanks for the tip! I am gonna try it right now!
Thanks
easiest time I’ve had changing that yet.
Hey, Thanks for this tutorial.
I noticed though that when I use this “hook” it breaks my site. I’m using WordPress 3.0.2 and a child theme of 2010.
I’m noticing that the function for twentyten_continue_read_link , if modified at all, crashes my entire site. Furthermore, when I use the code provided, I get similar results.
Anyone else having this issue or know of a way to combat it?
Thanks!
YetiMade
thanks Justin for that info… i am searching for this..its useful for me..