How to make <!–more–> a button?

2 comments

1. The “(more…)” link gets filtered through the_content_more_link in get_the_content(). You can hook into this function and let it return whatever you want.

   add_filter('the_content_more_link', 'more_button');
   function more_button($more_link) {
       return '<button class="readmorebtn" onclick="' .
           esc_attr('window.location="' . get_permalink() . '"') .
           '">Read more</button>';
   }
   

   Log in to Reply

2. Short answer: You don’t.

   Longer, more useful answer: What you need to do is hook in to the the_content_more_link filter and change the simple link into a style-able element that looks like a button. The theme I use on my site already does this. It turns my read more link into:

   <div class="readon-wrap1">
       <div class="readon1-l png"></div>
       <a href="http://mindsharestrategy.com/why-i-run/" class="readon-main">
           <span class="readon1-m png">
               <span class="readon1-r png">More</span>
           </span>
       </a>
   </div>
   

   You can see the regular read more link buried in the middle. The various <div>s and <span>s around it help to style the link so that it appears as a solid gray button:

   

   So if you want to style your link to look like a button, this is the path to take. As @sorich87 stated in the comments, the <button> tag is meant to be used inside forms. So if you use a <button> tag for your read more link, you’ll face the following issues:

   1. Your site will not validate
   2. Your site’s layout can confuse screen readers and certain parsing engines (as they’ll see the <button> and either strip out the link or thrown an error while looking for the rest of the form).
   3. You might run into conflicts if you ever accidentally nest the <!--more--> tag inside the body of a form. You can say “I won’t do that” now, but accidents are accidents and it might still happen … then weirdness and chaos will ensue.

   Log in to Reply