Modify ‘Read more’ link adding a new class

4 comments

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.

   Log in to Reply

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

   Log in to Reply

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

   Log in to Reply

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…

   Log in to Reply