Create a theme

Each theme follows a specific structure that must be respected for Webpack to correctly interpret your project.

Also, each theme has its own Webpack configuration file, in which you must specify the name(s) of the theme(s) that Webpack should process.

More

Each theme is managed as a Single Page Application (SPA) using React.

• Use the functions.php file in the template directory to handle server-side rendering for bots, inject data, register AJAX actions, create webhooks, and more.
• Use the template directory and the theme core structure to provide server-side rendering for bots and crawlers.
• Use the js directory to build your React app or website.

The js and template directories work together. In most cases, you’ll want to create a dedicated PHP file for each corresponding React interface file. PHP handles the server-side rendering and ensures search engine visibility, while JavaScript renders the client-side interface. However, the PHP part is optional and only necessary if you need SSR or SEO support.

Entry Points

|— themeslug
    |— js
        — App.jsx
    |— medias
        — Medias.js
    |— scss
        — App.scss
    |— template
        — functions.php
        — index.php

Locations

• Located in src/themes
• Webpack configuration: configs/webpack.themes.config.js

Directories Overview

js directory:
Entry point need to be in jsx.

medias directory:
Use the Medias.js entry point file for import a media that you can’t import in another file.

scss directory:
You can easily switch to SASS by passing your extension file to .sass instead of .scss, by removing brackets and by replacing /scss/App.scss to /sass/App.sass in your webpack config files.

template directory:
Add to/overwrite theme production files.