WordPress Website Structure

node_modules

Node.js modules for various project tasks.

src

This is where you do front-end development. The project source files are organized in the following subfolders:

• assets - static asset files (images, fonts, etc.) - files from this folder can be used in styles (url('~assets/path/to/file')), JS (import filePath from '~/assets/path/to/file) or in Twig ({{ assetPath('path/to/file') }}),
• scripts - JavaScript files, check out JavaScript documentation,
• styles - Sass files with ITCSS structure, check out ITCSS documentation.

Moving src folder to the theme folder

It's possible to have the src folder in your theme folder, follow these steps:

1. Move the src folder to the theme folder - wp/wp-content/themes/your-theme-chisel.

2. In chisel.config.js set source.base to wp/wp-content/themes/your-theme-chisel/src, see Configuration for more details.

3. You need to update ignore files (.eslintignore, .prettierignore, .stylelintignore). First, remove slash from /src/assets so it works with assets in the theme, then to not ignore new src directory we need to recursively exclude our directory. In those files replace

   /wp
   

   with

   /wp/*
   !/wp/wp-content
   /wp/wp-content/*
   !/wp/wp-content/themes/
   /wp/wp-content/themes/*
   !/wp/wp-content/themes/[your-theme]-chisel
   /wp/wp-content/themes/[your-theme]-chisel/*
   !/wp/wp-content/themes/[your-theme]-chisel/src

wp

This is where WordPress is installed.

wp/wp-config-local.php

WordPress wp-config.php file is altered to provide support for local configuration. All settings except Authentication Unique Keys and Salts, database charset, and ABS_PATH can be set in the wp-config-local.php file for purposes of local development. The file is added automatically to .gitignore and should not be committed and stored on the production server.

If there is a wp-config-local.php file available in this directory then the environment is recognized as local and configuration from this file is used. If it doesn't exist then settings from wp-config.php are used.

wp/wp-content/themes/your-theme-chisel

This is where you do theme development. The theme folder includes Chisel starter theme with the following structure:

• dist - production-ready files are automatically generated here.
• Chisel - various classes used to extend or add new functionality to your theme. Check out WordPress development
• templates - Twig templates, check out Twig documentation
• functions.php, index.php, etc. - Chisel starter theme files

Configuration files

Chisel uses various configuration files. Usually, it's not necessary to touch these files, unless stated otherwise.

• .browserslistrc - Supported browsers list used to generate only necessary normalization styles, JS transformations, and (when enabled in babel.config.js) automatic polyfills
• .editorconfig - EditorConfig configuration file to achieve consistent coding style
• .eslintignore - ESLint ignore file
• .eslintrc.js - ESLint configuration file to achieve consistent JavaScript coding style (you can update it to your preference)
• .gitattributes - Git configuration file to force Unix line endings in text files
• .gitignore - default Git ignore files and folders
• .prettierignore - Prettier ignore file
• .stylelintignore - stylelint ignore file
• babel.config.js - Babel configuration file
• chisel.config.js - Chisel config file, see Configuration for more details
• dev-vhost.conf - automatically generated virtual host configuration (not needed if you use wildcard virtual hosts)
• package.json - project metadata and dependencies
• package-lock.json - npm lock file, if you use npm
• postcss.config.js - PostCSS config file
• prettier.config.js - Prettier config file
• README.md - project readme; you can use it for the project documentation
• stylelint.config.js - stylelint configuration file to achieve consistent CSS coding style (you can update it to your preference)
• wp-cli.yml - WP CLI configuration file
• yarn.lock - Yarn lock file, if you use Yarn