Create the first empty theme

In this tutorial we will explain the step-by-step process to setup your local development environment and create your first empty theme. After you finish these steps, you will be able to build your own theme.


Step 1: Download & install framework

Visit and follow the instructions to install the empty project.


Step 2: Create your empty theme

Follow these steps to create your first theme. A very little bit of PHP programming is necessary here.

  1. Copy the folder src/Themes/HelloWorld to a new folder named after the original template. We'll use the name MyFirst as the name of the theme. You should have folder src/Themes/MyFirst now.
  2. Modify src/Themes/MyFirst/Main.php file and change the name of the class so that it reflects the name of your theme. Example of modified file:
class MyFirst extends \Surikata\Core\Web\Theme { // the "HelloWorld" was changed to "MyFirst"
  1. Modify all src/Themes/MyFirst/Layouts/WithoutSidebar.php file similarly. Example:
namespace Surikata\Themes\MyFirst\Layouts; // the "HelloWorld" was changed to "MyFirst"
  1. Make a small change to your new theme so that you'll be able to check later that you are really using it. Add a small HTML snippet to src/Themes/MyFirst/Templates/Plugins/WAI/Common/Footer.twig. Example of how the Footer.twig file could look like afterwards:
  This is MyFirst Theme


Note: You will not be able to test the theme now. You've just created it. Testing envinromnent will be ready at the end of this tutorial. If you make some errors here, you'll find them later. Don't worry, you'll be able to fix them.


Step 3: Use your theme in the project

Now, when you have your theme ready, you have to tell the Surikata to use it.


Step 4: Test everything

Visit the website for the english version. The easiest way is to open the welcome screen of the administration panel and click the relevant Visit button. You should see something like this:

View of the home page after installing the theme


There is your HTML snippet at the bottom of the page - this is where the footer template is rendered.


Now you have your first theme created and installed on your computer. You can now do some real frontend development. We recommend to start with studying some principles here:

E-commerce development framework