We've combined Twig (Symfony), the new approach to creating WordPress blocks and our know-how to simplify the approach to creating your WordPress theme with the Phoenix approach. In this article, I explain how to use our approach to create WordPress themes. You don't necessarily need PHP skills. However, you must have some knowledge of HTML and Twig. I'll let you discover a short introduction to Twig via one of our articles. You can also visit the Symfony website to learn more.

Steps before creating a theme for your website.

Before starting to create a WordPress theme, you must first create the design in HTML version. If you wish, you can obtain a template from the online template bank or simply buy one from websites such as Themeforest, ThemeMonster, or start Bootstrap . These solutions can be a good starting point for creating a website. Important: We do not use already developed WordPress themes just because they often require third-party extensions or resources. The aim of our approach is above all to offer customers a turnkey solution less dependent on external resources.

Step 1: Section your HTML design into parts

Each website design usually has several parts or sections:

The header (overall)
The footer (global)
The body of the website

The body of the website can be subdivided into several parts that can be used as needed in various places on your website. It will therefore be a question of identifying the different parts, of sectioning them into parts. You need to section and put each part into a renamed file as needed. You can, for example, have a file header.html, footer.html…. Once you have the different files, you then need to change the extension from .html to .Twig.

Step 2: Create your theme configuration file

So, we use the Json file named theme.json to save the css and js links of your design. The structure of the design will be similar to what you see below.

Explanations:

The code above is in Json format. As an explanation, you simply need to create a “table” which you will split into two parts:

css: to list all CSS links
js: to list all JS links

Step 3: Make parts of your theme dynamic with Twig variables.

We will soon put online the list of authorized variables to make the WordPress theme proactive. I invite you to visit Our introduction to Twig to understand how to use Twig. In this part, we will discuss using the variables that we will offer you to energize your theme.

Step 4: Create the Json File to List the Variables Each Block Uses

So, we also use the Json file to declare the theme variables. This file is named variable.json and contains the information you will find below: You must give the name of the block without .Twig and the variables that you used in the block.

Step 5: Generate your WordPress theme

Once the configuration is complete, we will drop the theme into a location in our software that will generate your WordPress design. As you can see, creating a WordPress theme with the Phoenix approach can be relatively easy. Furthermore, in the coming weeks, we would like to offer webinars to better inform developers who wish to do so on our approach.

Gilblas Ngunte Possi

Founder and Full-Stack Developer at Prositeweb.

My proficiency with modern tools and a keen analytical sense regarding information technology enable me to provide superior guidance in the development and implementation of your web solutions.

How to create a theme for your website with the Phoenix approach