read

Grav is a tremendous CMS. It is very easy to generate content with it, many times a basic installation accompanied by the Admin plugin and a good theme is all we need to make a website and publish content. At the time of this publication, there are 114 themes available for free in the Download section of the official Grav website. Completely ready-to-install themes to make our website look great.

But what happens when we need to make some kind of modification on the theme itself? We could make our theme from scratch, a private theme to which we can make all the modifications we want; however most of the time that is not an option. On the other hand, if we download and install a theme and modify it directly, then we will lose our changes when the theme is updated to a new version. This is the ideal situation to inherit from a base theme!

Let's create an inheritance from the default Grav theme: Quark. We are going to do it using the powerful Grav CLI. Depending on where you have your Grav installation hosted you may need remote access via SSH to use the CLI, but that is beyond the scope of this article. You should take a look at the documentation of the Web Hosting service provider to find out how to establish an SSH connection with your server.

So, let's get our hands a little dirty…

How to inherit a base theme

To get started we need to install the DevTools plugin, so from the root folder of our Grav installation we are going to run the following command:

$ bin/gpm install devtools

At the end of the installation, if no error occurred, we should see something similar to the following:

ABOVE: The DevTools plugin was successfully installed via the CLI. In the image we can see that the root of our Grav installation is the gravdev folder, yours may have a completely different name.

We can also install the DevTools plugin manually, for this we must do the following:

  1. Enter the Admin of our Grav installation and go to the Plugins section from the main menu on the left side of the screen.
  2. Click on the Add button located at the top right.
  3. Find the DevTools plugin and click the Install button.

Then, from the root of our Grav installation, we will execute the following command:

$ bin/plugin devtools new-theme

At the beginning of the process we will be asked several questions about our new theme, namely:

  1. Enter Theme Name (we will type the name we want for our new theme).
  2. Enter Theme Description (we will type a description on our new theme).
  3. Enter Developer Name (we will type our name or that of our company if we wish).
  4. Enter GitHub ID (our GitHub ID, we can leave it blank).
  5. Enter Developer Email (we will type our email address).
  6. Please choose an option:
    • pure-blank
    • tailwind
    • inheritance
    • copy

ABOVE: Questions we are asked when creating a new theme via the Grav CLI.

When selecting an option we will use the keyboard arrows until the inheritance option is selected and we will press the ENTER/RETURN key. We could type in the word inheritance directly on this prompt as well.

Then we will be asked what is the theme that we want to inherit. The only thing we have to do in this part is type the number that appears to the left of the name of the theme or themes that we have installed.

ABOVE: list of installed themes available to inherit or extend. To the left of the name of each theme appears the number that we must select.

In this case, there are two themes installed: Mediator and Quark. Since we want to inherit from Quark we will type the number 1 and press the ENTER/RETURN key.

That way we'll be ready, we will see a confirmation like the following:

ABOVE: Confirmation that the theme was successfully inherited.

Now we just have to go into our Grav Admin and activate the newly created theme, or edit the system.yaml file located in the /user/config/ folder of our Grav installation to change the theme we want to use.

Additionally, we can inherit a theme manually by copying the base theme files to a new folder inside /user/themes/. To do this, we recommend following Grav's excellent documentation on How to manually inherit themes in Grav CMS.

Until next time.

Blog Logo

Arturo Guillén


Published

Image

Frontier Themes

Back to Overview