Make a theme

We are glad you are interested in making your own Bear CMS theme and we've prepared you a demo theme to learn from. You can also directly take parts of it and add to your project. But first, let's take an overview of the Themes API.


Currently, there are two Bear CMS client packages. Writing code for Bear CMS requires running Bear CMS as Bear Framework addon. Click here to learn about this package.


Lazy theme registration

It's not uncommon for an administrator to have multiple themes installed and only one active. We do not want the disabled themes to impact performance in a negative way, and we've designed the Themes API with that in mind. When registering your theme, you must provide its 'id' and a callback function that will be called if the theme is needed. A Theme object is provided to the callback that must be updated with the theme details (version, template, customization options, etc).
$app->bearCMS->themes ->register('demo-author/demo-theme-1', function(\BearCMS\Themes\Theme $theme) { // Set theme details here });

Lazy theme details

Most of the Theme object properties accept callbacks only. This way properties of no interest for the current request will not be initialized. The customization options are a perfect example, and they are not needed when rendering the theme for visitors.
$theme->version = '1.0'; $theme->get = function(\BearCMS\Themes\Theme\Customizations $customizations) { // Return the HTML template }; $theme->options = function() use ($theme) { // Return the customization options };

Return a template HTML code

The Theme object provides a simple property called 'get' whose callback is expected to return an HTML template (of type string). If inside the template is found the string '{{body}}', it will be replaced with the content of the current page.
$theme->get = function(\BearCMS\Themes\Theme\Customizations $customizations) { return '<html><body>{{body}}</body></html>'; };


You can define customization options that can be used by the administrators to modify parts of the design (colors, fonts, backgrounds, sizes, etc.).
$theme->options = function() use ($theme) { $options = $theme->makeOptions(); // Create the options objects. $group = $options->addGroup('Colors'); // Create a new group $group->addOption('backgroundColor', 'color', 'Background color'); // Add a option to the group $group->addOption('textColor', 'color', 'Text color'); return $options; };


You can define ready-made styles that administrators can apply with a single click. Each style must contain values for the customization options defined.
$theme->styles = function() use ($theme { $styles = []; $style = $theme->makeStyle(); $style->values = [ 'backgroundColor' => '#f5f5f5', 'textColor' => '#000000' ]; $styles[] = $style; return $styles; };

Example code

A demo theme is available at GitHub
Almost every line in the source code is commented. We think this is the best way to get yourself familiar with the Themes API.

Learn more