Add an "Edit" link to your blog posts in Ghost

A thing I was missing after switching from Wordpress to Ghost, was the "Edit post" link on each article, which was only showing if I was logged in.

It's easy to achieve the same thing in Ghost too. Heres how:

Include this javascript in your default.hbs file, somewhere before the {{{body}}} tag, either as file include, or just inline linke this:

<script type="text/javascript">  
    var sessionKey = "ghost:session";
    function getLocalStorage(key) {
        var item = localStorage.getItem(key);
        return item ? JSON.parse(item) : false;
    function isAuthenticated() {
        var ghostSession = getLocalStorage(sessionKey);
        return ghostSession && new Date < new Date(ghostSession.expires_at);

This will let you check if the user viewing the blog post, is an authenticated user. By using this check, we can show an "Edit post" link only to logged in users.

Note: remember, this is a javascript clientside check, do not put anything sensitive here. Inserting an "Edit post" link is ok, since the user has to be authenticated, to be able to see your admin interface.

In the post.hbs file of your theme, place this edit link and small javascript code where you want your edit link to appear:

<div id="editpostlink" style="visibility:hidden">  
    <a href="/ghost/editor/{{../id}}">Edit this post</a>
<script type="text/javascript">  
    (function() {
        document.getElementById('editpostlink').style.visibility = (isAuthenticated()) ? "visible" : "hidden";

For example, I put it right before the {{/author}} tag.

The {{../id}} field simple refers to the "parent" scope, which in this case refers to the id element of the current post object. This is necessary since we at this point in the .hbs file, are inside the {{#author}} scope, and not the {{#post}} scope.

You can read more about the Ghost templates and Handlebars.

End result

This will give you an edit link, which takes you back to the post editor in Ghost admin interface, like this:

And it will only be visible when you are logged in.
(Although the link is still visible in the html source of the page)

comments powered by Disqus