Modify 'Read more' link adding a new class

Question

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>

Answer 1

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

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

Filters in action

The two arguments after the filter name (1^st 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',
        'more-link CUSTOM_CLASSES_HERE',
        $link
    );
}

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.

Answer 2

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' );

Answer 3

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');

Answer 4

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...