How to Create a "Read More" Button in Ghost or WordPress

I really like the “Read more” button I see in some websites.

But rather than install a theme or use a plugin for this functionality, I wanted to know how I could do it in a lightweight way in my own blogs.

I’ve updated this for 2023, making sure it works not just in Ghost, but also in WordPress blogs.

Using a “Read more” button creates engagement, helps promote active intent, and can even help with tracking — you can link your button to an event in Google Analytics, for example.

Like this one, below. Click on it, and find out how to make it for WordPress or Ghost!

How to make a Read More Button

Inspiration for this was originally an article I wrote on another blog to which I wanted to add some structure. I thought about tracking clicks, but mostly, I wanted to help with bounce rate.

Creating a “Read More” button involves three parts. And all the code is copy-paste.

Write the CSS and JavaScript for the button to work, create the button in HTML, and create the start of the <span> that’s in the “more” space.
Write the text you want to hide (in the “more” section).
End the <span>.

Part 1: Add the CSS, JavaScript, the button and the start of the “more” section

Create a html code block, and paste this code into your document where you want the “read more” button to go.

<style>
    .readmore {
        color: #fff;
        background: #595959 no-repeat 50%;
        background-size: cover;
        text-align: center;
        display: inline-block;
        width: 100%;
        border-radius: 4px;
    }

    #more {
        display: none;
    }
</style>

<script>
    function showReadMore() {
        var dots = document.getElementById("line");
        var moreText = document.getElementById("more");
        var btnText = document.getElementById("readmorebtn");

        if (dots.style.display === "none") {
            dots.style.display = "inline";
            btnText.innerHTML = "Read more";
            moreText.style.display = "none";
        } else {
            dots.style.display = "none";
            btnText.innerHTML = "Read less";
            moreText.style.display = "inline";
        }
    }
</script>

<p class="readmore">
    <button onclick="showReadMore()" id="readmorebtn">Read more...</button>
</p>
<hr id="line">
<span id="more">
    <!-- Content you want to show/hide should go here -->
</span>

Let’s examine what this code does, in brief.

First, the style, in the <style> section. This sets the style for the button, as well as making sure the “more” section is empty.

Second, the script in the <script> section. This is triggered whenever the button is pressed. It hides and unhides the “more” section, plus it changes the text in the button.

Finally, the beginning of the “more” section with the <span>.