Doing more with <!--more-->

Here’s what I want to do with the <!–more–> tag in Wordpress.

I want to customise what’s written separately for every post. Easy: I just write the custom text after ‘more’ within the tag.

AND, I also want some default text afterwards. Which is styled differently from the custom text.

So that if I use the tag <!–more What’s going to happen next?–> it will display as What’s going to happen next? Read more.

I know that I can use .more-text to style the <!–more–> tag, but how do I add default text which is styled differently to the custom text?

Add this to your functions.php file

// customize more-link
add_filter( 'the_content_more_link', 'handle_more_link', 10, 2 );
function handle_more_link( $link, $link_text ) {
     return str_replace( $link_text, 'Read more', $link);

Replace Read more with the text you want to show.

These last two are when using the_excerpt(); instead of the_content(); in the loop.

// custom more link for categories
function new_excerpt_more($more) {
       global $post;
	return '<a class="more-link" href="'. get_permalink($post->ID) . '">Read more</a>';
add_filter('excerpt_more', 'new_excerpt_more');

and set a custom length

// custom exerpt length
function new_excerpt_length($length) {
	return 20;
add_filter('excerpt_length', 'new_excerpt_length');

Change the number 20 to the number of words you want displayed.

Thanks. I tried the first one but what it does is to override the custom text that’s been added to the <!–more–> tag.

The second one looks good but can custom text be added to it? If so, how would you go about it?

Just change the Read more text to whatever text you want

return '<a class="more-link" href="'. get_permalink($post->ID) . '">Read more</a>';

Yes, the first one is meant to change the text for the <!–more–>.
It’s done with a function so you do not have to remember to add text to the post itself.