How to add an "edit" button to front end

One of the very few things I miss from WordPress is the ability to jump straight from viewing a page to editing the content. Turns out this is very easy to get working with Grav.

First, in System Configuration, set the session split option to “no”.

This will mean you log in to both front and back end simultaneously.

Now add this code to base.html.twig

        {% if config.plugins.admin.enabled and authorize(['admin.pages', 'admin.super']) %}
            {% if page.link == '/' %}
            {% set editPagePath = "/" ~ page.slug %}
          {% else %}
            {% set editPagePath = uri.path %}
          {% endif %}
          <a class="editpage" href="/admin/pages{{ editPagePath }}">Edit</a>
        {% endif %}

and you can style it by adding some code to css, for example:

.editpage {
  position: fixed;
  top: 0;
  right: 0;
  padding: 5px 10px 4px 10px;
  background: #023A71;
  color: #fff;
  display: block;
  font-weight: bold;
  text-decoration: none;
  border: none;
  text-transform: uppercase;
}
a.editpage:hover {
  color: #dadde1;
}

The result should look like this (I have also removed the login item from the menu):

1 Like

Two things I will point out:

  1. The link you generate won’t work for Grav sites that live under a subpath (ie, http://www.example/mysite/)
  2. The /admin prefix is configurable and so that should be taken into account.

This is how you can fix it:

{% set adminPath = base_url ~ config.get('plugins.admin.route') ~ '/pages' %}
<a class="editpage" href="{{ adminPath }}{{ editPagePath }}">Edit</a>

Other than that, great job on this and thank you for sharing!

1 Like