How to Create a “Read More” Button in Ghost or WordPress

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.

1. 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.
2. Write the text you want to hide (in the “more” section).
3. 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>.

Part 2: Write your “more” section

This isn’t really a part of the process. This is just you writing your blog post!

Part 3: End the “more” section

Put this tag at the end of your document:

</span>

And you’re done!

Everything between those lines is be hidden until you press the “Read More” button.

Good luck!