Getting started

To get started with our child-theme, follow these instructions to quickly set up and utilize the theme’s capabilities.

Setup

Go to the theme directory and run these three commands in the CLI

npm install
composer install
npm run prod

Starting development

When you want to start developing, just run npm run dev. Vite will launch the development server and the theme will automatically include the files from the development server.

Note

The npm run dev command only works on your local development machine and should not be used in production environments.

Note

The browser could block the assets from being included because it doesn’t trust a self-signed certificate. If this occurs, you’ll have to access the asset through the browser itself (check the JavaScript console) and trust the certificate. You’ll only have to do this once.

Theme structure

Below is an overview of the key folders and files in the theme. While the theme contains additional files and directories, the ones listed here are the most relevant for development. It is recommended to modify only these unless you are certain about changes to other parts of the theme.

• Directoryassets

  • Directorysrc

    • Directorycss

      • Directoryabstracts/

        • …
      • Directorybase/

        • …
      • Directorycomponents/

        • …
      • Directorylayout/

        • …
      • Directorypages/

        • …
      • Directoryvendors/

        • …
      • backend.scss
      • frontend.scss
    • images
    • js
• Directoryblocks/

  • …
• Directoryinc

  • enqueue.php
  • generate-blocks.php
  • hooks.php
  • shortcodes.php
• Directoryviews

  • Directoryblocks/

    • …
  • …
• style.css
• functions.php
• composer.json
• package.json
• vite.config.js

Additional information

/inc All files that do not start with an _ from this directory will automatically be loaded by the theme. This is where you should put all your custom PHP code. It’s preferable to use a clear structure inside this folder. For example, when using different custom post types don’t use just one file, but structure it like this;

• Directoryinc

  • Directoryproject

    • post-type.php
    • archive.php
    • single.php
  • Directoryproduct

    • post-type.php
    • archive.php
    • single.php

/blocks Use this folder for creating blocks using LazyBlocks Pro. Make sure the output method for the block is set to theme template. After choosing this option it tells you what folder you need to create inside the blocks folder.

/patterns Use this folder for creating patterns in the child-theme to be used in Gutenberg. Just add a .php file with the pattern name and inside this file add the following comment

/**
 * Title: Name of the pattern
 * Slug: best4u/name-of-the-pattern
 * Post Types: page, post
 * Categories: best4u
 */