Links

Theme extending

This documentation section is yet to be updated and it is about proper ways to extend Zero One theme and make something super powerful.

Theme files customization

Because Zero One is a theme made as a plugin, you can override every plugin file with the same name and file in the site/theme folder. But it must be in the same folder structure as in the plugin.

Examples:

  • site/theme/blueprints/site.yml overrides site/plugin/zero-one/blueprints/site.yml
  • site/theme/snippets/header/navbar.php overrides site/plugin/zero-one/snippets/header/navbar.php
  • site/theme/templates/article.php overrides site/plugin/zero-one/templates/article.php
  • site/theme/controllers/contact.php overrides site/plugin/zero-one/controllers/contact.php
  • and so on

Visual example:

  • site/
    • theme/
      • snippets/
        • footer.php
Overrides
  • site/
    • plugins/
      • zero-one/
        • snippets/
          • footer.php
So you can copy a file from the site/plugins/zero-one plugin, to the relative folder inside site/theme/ folder, change it, extend it, and safely update Zero One to new versions without worry. Your changes will stay untouched. Like a WordPress child theme, but more powerful.

Adding new Page Builder section

To add a new Page Builder section you must do three things:
  1. 1.
    Add new block blueprint: site/theme/blueprints/blocks/yourblockname.yml
  2. 2.
    Add new block snippet: site/theme/snippets/blocks/yourblockname.php
  3. 3.
    Copy site/plugins/zero-one/blueprints/sections/page-builder.yml to site/theme/blueprints/sections/page-builder.yml and add your block name to the fieldsets blocks list
And that's it. Your custom block will be available. Only, it will have the default simple preview in the panel. If you want to create a better block preview you will have to create a simple plugin for that. Check this Kirby docs Cookbook recipe and check site/plugins/zero-one/index.js on how we built some previews.

Adding new Content block

This new Content block is similar to adding a Page Builder section, but the difference is in the third step:
  1. 1.
    Add new block blueprint: site/theme/blueprints/blocks/yourblockname.yml
  2. 2.
    Add new block snippet: site/theme/snippets/blocks/yourblockname.php
  3. 3.
    Copy site/plugins/zero-one/blueprints/fields/blockEditor.yml to site/theme/blueprints/fields/blockEditor.yml and add your block name to the fieldsets blocks list
That block will then be available everywhere except in the Article template. To include your new block to the article copy site/plugins/zero-one/blueprints/pages/article.yml to site/theme/blueprints/pages/article.yml and add your block name to the fieldsets blocks list.