Kirby CMS

Plugin structure

Custom plugins live in site/plugins/. Each one is a folder with an index.php:

site/plugins/
└── my-field/
    ├── index.php
    └── src/
        └── MyField.vue

Register fields, sections, and routes from index.php using Kirby::plugin().

Vue panel components

Panel components are Vue 2 (Kirby 4) or Vue 3 (Kirby 5). Key things:

  • Use panel.api.get/post for AJAX — not raw fetch
  • Field values are passed as value prop, saved via $emit('input', newValue)
  • Use this.$panel.notification.success() for user feedback

Upgrading v3 → v5
  • Blueprint syntax mostly unchanged
  • Template PHP is the same
  • Plugins need Vue component rewrites if they used Vue 2 Options API heavily
  • Check the official migration guide for hook and method renames

Content folder

On local dev, content/ is in git. On client sites, it's gitignored — the server is the source of truth. Never overwrite server content with git ftp push by accident.

Environment title prefix

Show which environment you're on directly in the browser tab. Uses Kirby's environment-specific config loading — files named config.{hostname}.php override the base config.php.

Production site/config/config.php:

return [
    'title_prefix' => '',
];

Local site/config/config.localhost.php:

return [
    'title_prefix' => '🏠 LOCAL - ',
];

In the header snippet (e.g. site/snippets/head.php):

<title><?= $kirby->option('title_prefix') ?><?= $page->title() ?></title>

Kirby auto-loads config.{hostname}.php based on $_SERVER['SERVER_NAME'], so config.localhost.php only applies when running locally. For staging, add config.staging.example.com.php with its own prefix.