Theme Development¶

Backend Theme Development

Theme files/folders location: ‘backend/view/theme’

The backend/view/theme/default theme structure looks like this:

css                 =       directory containing skinning related code.
image               =       directory contains all image filed related to the default theme.
template    =       directory contains all the template files i.e. common, header, footer, and menu elements.

That’s all that you need to know about the basic Phspark theme structure. Now, let’s move to the guide on how to create a custom theme with Phspark.

Step by Step Theme Development¶

Create a new directory backend/view/theme/mycustomtheme
Add a theme thumbnail backend/biew/theme/mycustomtheme/image/mycustomtheme.png.
create a theme extension at backend/extension/theme

File/Folder tree
    + mycustomtheme
        + controller
        + view
        - basecontroller.php
        - init.php

backend/extension/theme/mycustomtheme/controller/setting.php

<?php
class ControllerThemeMyCustomThemeSetting extends BaseThemeMyCustomThemeController
{
    public function edit()
    {
        $this->load->model('setting/setting');

        $this->data['directories'] = array();

        $directories = glob(DIR_APPLICATION . 'view/theme/*', GLOB_ONLYDIR);

        foreach ($directories as $directory) {
            $this->data['directories'][] = basename($directory);
        }

        $this->data['setting_info'] = $this->model_setting_setting->get('theme_MyCustomTheme', 0);

        return $this->loadView('_partials/theme_edit_form', $this->data);
    }

    public function update()
    {
        $this->load->model('setting/setting');

        return $this->model_setting_setting->update('theme_MyCustomTheme', $this->request->post, 0);
    }
}

backend/extension/theme/mycustomtheme/view/theme/default/template/_partials/theme_edit_form.php

<div class="form-group row">
  <label class="col-sm-4 col-md-3 control-label text-lg-right" for="input-directory">
    <?php echo trans('text_directory');?><span title="This field is only to enable older themes to be compatible with the new theme system. You can set the theme directory to use on the image size settings defined here."></span>
  </label>
  <div class="col-sm-8 col-md-8">
    <select name="theme_MyCustomTheme_directory" id="input-directory" class="form-control custom-select">
      <?php foreach($directories as $directory):?>
      <?php if ($directory == $setting_info['theme_MyCustomTheme_directory']):?>
      <option value="<?php echo $directory;?>" selected="selected"><?php echo $directory;?></option>
      <?php else:?>
      <option value="<?php echo $directory;?>"><?php echo $directory;?></option>
      <?php endif;?>
      <?php endforeach;?>
    </select>
  </div>
</div>

backend/extension/theme/mycustomtheme/basecontroller.php

<?php
class BaseThemeMyCustomThemeController extends InitThemeController {

    public function __construct($registry) {

        parent::__construct($registry);

        $this->load->extension('MyCustomTheme', 'theme');
    }
}

init.php

<?php
class ControllerThemeMyCustomThemeInit extends Controller {

    use Src\Traits\Extension\ExtensionInitializerTrait;

    protected $preRequiredExtensions = array();

    public function init()
    {
        $this->setName('theme_MyCustomTheme');
        $this->setRoute($_ENV['API_FRONTEND_SERVER']);
    }

    public function index() {}

    public function install() {}

    public function uninstall() {}
}

Select theme directory from : Backend > Extension > Extensions > mycustomtheme > Manage

Directory = Select the theme directory [mycustomtheme]

Status = Enabled
Activate your custom theme from the backend. System > Settings > Store tab > Theme, This is where you should see your ‘mycustomtheme’ listed alongside with the default theme in the Template dropdown box.
To apply changes, click the Save button.
Now, you can override any template file from default theme. create a file mycustomtheme > template > common > header.php. It will override the default theme.