WordPress Website Structure

WordPress website project generated by Chisel consists of the following folders and files


Node.js modules for various project tasks.


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





This is where WordPress is installed.


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.


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