Rahul Arora

Add “Read More” link in Ghost Theme

Ghost themes have a clean, minimal interface. The home page in them generally carries list of posts in the typical blog fashion; wrapping in post titles, meta info (tags, date, author etc.), post excerpts and/or thumbnails.

The current look of the official Ghost blog is cool. It now carries a sidebar and the post-list with a small “read more” button beneath every post excerpt. Do you know that the current them they’re using is a customized form of the Casper theme?

Now, coming on to the topic, if you’re developing or customizing a Ghost theme, and want to add a cool “read more” or “continue reading” or similar button link in the post index, follow the below guidelines to do so. But before that, have a see how our button will look like:

Read more button for Ghost theme

This is how our button will look like

Setting up

You will need to edit the file that is responsible to render the post list on the home or archive pages. In general, its index.hbs file that does the task. You can find this file just inside your theme folder. If you’re feeling confused, you should take a look at the Ghost theme file structure.

Ghost theme file structure

File Structure of a Ghost theme (#)

If you want to style the “read more” button, you will also need to edit the theme’s CSS file that can be located as /assets/css/ inside your theme folder.

Adding the button

Edit index.hbs file in your favorite code editor (I use Sublime Text 3), look for the {{excerpt}} handlebar (or whatever you’ve used to display the excerpt), and add the following HTML just below that:

HTML

<a href="{{{url}}}" title="{{title}}" class="read-more">Read more</a>
Read more HTML for Ghost theme

“Read more” is the text that will be displayed on your button. You may modify it to something more cool like “Read full story” etc.

Now comes the styling part. Edit the CSS file of your Ghost theme and copy-paste the below CSS code to it:

CSS

.read-more {
    background-color: #2980b9;
    border: 1px solid #3498db;
    box-shadow: inset 0 0 5px #3498db;
    color: #ecf0f1;
    display: inline-block;
    font-size: 13px; 
    line-height: 1.2;
    padding: 10px 15px;
    text-decoration: none;
    text-transform: uppercase;
}

.read-more:hover {
    background-color: #3498db;
    color: #fff;
}
Read more CSS for Ghost theme

The above CSS adds life to our button. I’ve used two shades of blue (#3498db and #2980b9) for the normal background color and the hover state background of the button respectively. You may further add your own colors and play with the style as you wish to match it’s style with your theme.

Also read Ghost custom domain guide to set up a TLD on your Ghost blog.

About the author

I'm Rahul Arora. I'm a Web developer, with expertise in CSS3, JavaScript, and WordPress. More about me →