Folder Structure

Folder structure

root

The root theme folder has several files, some of which shouldn't be edited.

• .editorconfig - Used for configuring code editors for consistent styles. See: EditorConfig.
• .browserlistrc - Used for configuring target browsers between different front-end tools. See: Browserlist.
• .eslintrc - Used to configure ESLint linting rules. See: ESLint.
• .eslintignore - Used to ignore files by ESLint.
• .stylelintrc - Used to configure stylelint linting rules. See: stylelint.
• .stylelintignore - Used to ignore files by stylelint.
• .gitignore - Files and folders that Git should ignore when committing and pushing to a repo.
• composer.json - Used for listing Composer dependencies.
• functions.php - Functions file first called by WordPress to bootstrap the theme.
• index.php - Unused fallback template that's required in WP's system.
• package-lock.json - Used by NPM to lock dependencies (don't edit).
• postcss.config.js - PostCSS settings.
• webpack.common.js - The core Webpack config.
• webpack.dev.js - Handles development specific Webpack settings.
• webpack.prod.js - Handles the production Webpack settings.
• style.css - Needed by WP to know this is a theme. We use this for configuration, essentially.

/app

The /app folder is where your under-the-hood PHP lives. Use this folder for adding custom functions and classes. My preferred naming system is the following (feel free to do your own thing):

• class-{$classname}.php - File holds a single class.
• functions-{$group}.php - File holds a related group of functions.
• /{$folder}` - Code under a sub-namespace, generally classes.

Also, see the functions.php file for how all of these get loaded too.

/public

The /public folder is for holding our compiled assets for distribution. These files should not be edited directly. The sub-folders are organized on par with the sub-folders in /resources.

• js - Holds the compiled scripts.
• css - Holds the compiled stylesheets.
• svg - Holds the cleaned and optimised SVGS.

/resources

The /resources folder is where much of the magic of theme development will happen. This is essentially the stuff that you will be editing the vast majority of the time when creating a theme.

• fonts - Font files.
• img - PNG, JPG, and most other image files.
• lang - POT and any other MO or PO language files.
• js - JavaScript files.
• scss - SCSS/CSS files.
• svg - SVG files.
• views - The template files for the theme.