WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

I want to add a class to the 'Read more' link. Actually I have this:

<?php the_content( 'Read more...' ); ?>

Which outputs:

<a href="...?p=14#more-14" class="more-link">Read more…</a>

How can I add a class (using PHP) to the link, so it outputs:

<a href="...?p=14#more-14" class="more-link my_new_class">Read more…</a>
share|improve this question
Are you trying to do this globally or just on a single template file? – jb510 Sep 2 '12 at 23:16
up vote 11 down vote accepted

What (exactly) happens

When calling the_content() inside your template, you are able to call it without any parameters. This means, that the function already has the defaults of null for both arguments: The "more" link text and the boolean switch that allows you to strip teaser content before the "more" link text.

The the_content() function calls get_the_content() internally (and passes the arguments in). It then runs all callback functions that are attached to the the_content-filter. So basically nothing that is related to the link or anything else (aside from the filter) happens inside the_content() - it happens inside get_the_content().

And there we got the the_content_more_link-filter.

The filter in core

    ' <a href="' . get_permalink() . "#more-{$post->ID}\" class=\"more-link\">$more_link_text</a>",

Filters in action

The two arguments after the filter name (1st arg), are the accessible arguments inside attached callback functions.

// Example: Somewhere in core, a plugin or a theme
$output = apply_filters( 'some_filter', $arg_one, $arg_two );

// Example: Somewhere in a custom plugin
// Attach the filter: Attach filter name, callback function name, priority, number of taken args
add_filter( 'some_filter', 'wpse63748_callback_function', 10, 2 );
function wpse63748_callback_function( $arg_one, $arg_two )
    // Do something with Arg One = modify the output
    // You have Arg two to help you

    // Always return the first arg for filter callback functions.
    return $arg_one;

Modify the »more«-link

Now the actual/real-life plugin:

/** Plugin Name: (#63748) Modify the »more«-link. */
add_action( 'the_content_more_link', 'wpse63748_add_morelink_class', 10, 2 );
function wpse63748_add_morelink_class( $link, $text )
    return str_replace(
        'more-link CUSTOM_CLASSES_HERE',

Simply add your classes where you read CUSTOM_CLASSES_HERE and then upload it to your plugins directory or remove the comment Plugin Name: ... and use it in your themes functions.php file.

share|improve this answer
nice one @kaiser - thanks – Sagive SEO Sep 3 '12 at 0:12
Thanks, works great – Alvaro Sep 4 '12 at 13:13

You can completely replace the more link using the the_content_more_link filter, just add your class in there, see "custom-class" in the code below:

function new_content_more($more) {
       global $post;
       return ' <a href="' . get_permalink() . "#more-{$post->ID}\" class=\"more-link custom-class\">Read More...</a>";
add_filter( 'the_content_more_link', 'new_content_more' );
share|improve this answer

You can also just add a filter to the original "more..." link, just add this code to your function.php file :

function yourtheme_content_more() {
   $link = get_permalink('');
   $new_link = '<span class="see_more"><a class="button" href="' . esc_url($link) . '">See more from this...</a></span>';

   return $new_link;
add_filter('the_content_more_link', 'yourtheme_content_more');
share|improve this answer

Wordpress has a explenation in the codex regarding the read more...

You can find it here:

In a nutshell you can to this:

<?php the_content('<span class="moretext">...on the edge of
your seat? Click here to solve the mystery.</span>'); ?>

There you can change the class or wrap with a div etc...

share|improve this answer
But this doesn't solve my problem as anything I introduce in there will appear inside the link. In your example it will display: <a href="...?p=14#more-14" class="more-link"><span class="moretext">...on the edge of your seat? Click here to solve the mystery.</span></a> – Alvaro Aug 31 '12 at 18:42
sorry - i guess i dont understand... what's the difference... using this method u can refrence it in your css easily... – Sagive SEO Aug 31 '12 at 22:07
I want to modify the containing link – Alvaro Sep 1 '12 at 1:05

Your Answer


By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.