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

There is plenty of information on how to make the Read More function display different text in the Codex but what kind of filter would need to be used to make it display <button class="readmorebtn" onclick(permalink)>Read More</button>?

share|improve this question
The <button> tag is meant to be used in forms. I think if you want a semantically correct html code, you should style the read more link so that it looks like a button instead of replacing it by a <button> tag. – sorich87 Oct 7 '10 at 13:45
up vote 4 down vote accepted

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>';
share|improve this answer

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>

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:

Read More 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.
share|improve this answer
In the XHTML 1.0 Strict DTD a <button> is part of the %inline.forms group, which is part of the %inline group, and thus also valid outside <form> elements. I have tested this with the W3C validator, and it is valid. But indeed, it might cause confusion if you inadvertently combine it with actual forms. – Jan Fabry Oct 7 '10 at 15:29
Were using this for a special application. I appreciate your description of why it is not normally a good idea though. Thanks! – mattrepublic Oct 8 '10 at 17:36

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.