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 Surikata.io theme.

Prerequisities

• GIT/github and HTML programming knowledge
• local web development environment up and running (for example LAMP for Linux or WAMP for Windows).

Step 1: Download & install Surikata.io framework

Visit github.com/wai-blue/Surikata.io and follow the instructions to install the empty project.

Checkpoint

• You have successfuly installed an emtpy Surikata.io project accessible through your local address - either localhost or 127.0.0.1.
• You can log into the administration panel.
• You can browse through project's websites (something like http://127.0.0.1/mysurikata/hello-world or http://127.0.0.1/mysurikata/en).

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"

3. Modify all src/Themes/MyFirst/Layouts/WithoutSidebar.php file similarly. Example:

namespace Surikata\Themes\MyFirst\Layouts; // the "HelloWorld" was changed to "MyFirst"

4. 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:

<p>
  This is MyFirst Theme
</p>

</body>
</html>

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.

Checkpoint

• You created a your first theme (which we call MyFirst here).
• You have a folder src/Themes/MyFirst.
• You modified necessary files.
• You made a small change to your theme.

Step 3: Use your theme in the project

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

• Log in to the administration panel. Default login is 'administrator' and password also 'administrator'.
• In the left sidebar navigate to Websites -> English Version -> Design and change the theme used to render this domain to your new theme.

Checkpoint

• You configured the website for the english version to use your theme.

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

Checkpoint

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

Conclusion

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:

• Page - Layout - Sections - Templates
• Understanding layouts
• Understanding templates
• Working with assets

Surikata

E-commerce development framework