Understanding layouts

Layouts are very important part of the theme. In would be impossible to create any design without having at least one layout.

It is as simple as you might expect - for each page of your project you assign just one layout. For example, you can have following basic set of layouts in your theme:

Then, in the administration panel you can attach the layouts to your pages as follows:

If you are starting with layouts, we recommend you to start with just one layout. Use the HelloWorldTheme in this case.

Layout's PHP class file

Each layout needs a bit of PHP programming. In the layout's PHP class file you configure the layout.

The layout's PHP class file is stored here:


Example: Location of PHP class file for the layout called WithoutSidebar.

Following chapters describe the content of this file.

Layout sections

Each layout is split into sections. The way how the layout is split depends solely on the designer - on you. This means - your layout can have any sections arranged in any way you like.

Sections in layout are defined in the layout's PHP class file, in the getPreviewHtml() method. It is as simple as this example:


namespace Surikata\Themes\HelloWorld\Layouts;

class WithoutSidebar extends \Surikata\Core\Web\Layout {

  public function getPreviewHtml() {
    return "
      <div class='row'>
        <div class='col col-12' data-panel-name='header'>Header</div>
      <div class='row'>
        <div class='col col-12' data-panel-name='navigation'>Navigation</div>
      <div class='row'>
        <div class='col col-12' data-panel-name='section_1'><i>Section 1</i></div>
      <div class='row'>
        <div class='col col-12' data-panel-name='footer'>Footer</div>

Example: Definition of sections in the very simple layout called WithoutSidebar

Using a layout defined like this, you will be able to attach the plugins to following sections:

It is important to specify the "technical name of the section. As per the example above, we have the "Section 1" which is referenced as "section_1". This referencing is done in the data-panel-name* attribute.

Each section must have its data-panel-name attribute:

<div class='row'>
  <div class='col col-12' data-panel-name='section_1'><i>Section 1</i></div>

Example: Referencing "Section 1" to "section_1" using data-panel-name attribute

Attaching content to sections

As you might already understood the real content of the page is not attached to the layout but to the layout's sections. This attaching is done in the administration panel where a page can be edited.

Finally, the content in the section is represented by a plugin. Plugins are prepared by the backend programmer and they prepare variables for your templates.


The magic for defining the structure of the webpage's design is simple:

There is one piece of puzzle missing to create the complete design - the templates for plugins. That's where the design of a plugin is created.

E-commerce development framework