Extend and Export OctoberCMS theme settings

Themes are very powerful in OctoberCMS. OctoberCMS let you add your custom theme-related settings and save them to the database. It's good so far but when you want to export theme, those settings sadlyare not going to present in files`.

So, if you install exported theme on another website you will miss all of your settings.

However, it's not possible to directly add and configure new items there.

To overcome this issue we have one trick. we will use OctoberCMS's powerful event system to extend theme properties and `add our own properties which will be present in exports.

<?php namespace Hardiksatasiya\So;

use System\Classes\PluginBase;
// ...

class Plugin extends PluginBase
{
  public function boot() {
    \Event::listen('backend.form.extendFieldsBefore', function ($formWidget) {
      // if its not theme modal do not proceed
      if (!$formWidget->model instanceof \Cms\Classes\Theme) {
          return;
      }

      // Here you can't use addFields() because it will throw you an exception because the form is not yet created
      // and it does not have tabs and fields

      // add  navigation_text field
      $formWidget->fields['navigation_text'] = [
          'label' => 'Navigation Text',
          'comment' => 'Site should show navigation text on navigation menu.',
          'span' => 'left'

      ];

      // add another primary_color field
      $formWidget->fields['primary_color'] = [
          'label' => 'Primary Color',
          'comment' => 'Select theme primary color.',
          'type' => 'colorpicker',
          'span' => 'right'
      ];
    });
  }
  // ...

Now, When we import this theme to another website we do not lose these settings Nice !.

So far we can save our settings to the themes\THEME_NAME\theme.yaml file. Now it's time to get them back and use them in our code. it's rather very easy.

navigation_text: 'My website navigation' # <-- new field
primary_color: '#2ecc71'                 # <-- new field
name: Demo
description: 'Some description.'
author: OctoberCMS
homepage: 'http://octobercms.com'
code: 'hardik.satasiya'

use Cms\Classes\Theme;

// get your current active theme  
$theme = Theme::getActiveTheme();

// get your config value
$navigationText = $theme->getConfigValue('navigation_text', 'Default value');
$primaryColor = $theme->getConfigValue('primary_color', '#fff');

// $navigationText => 'My website navigation'
// $primaryColor => '#2ecc71'

In this way, you will never lose your theme configuration settings while exporting the theme and you can easily get them back once you import your theme.

Please share this article if you like it. Thanks !!