Getting Started

You just got everything installed. Congratulations. You're now well on your way to building your first theme.

Everyone's going to have different starting points for their theme. Some people are going to want to start adding in some basic CSS. Some will want to start customizing HTML or PHP. There's no right answer.

This tutorial will walk you through the folder structure. Familiarizing yourself with how things are organized will help you understand a little more about what's going on.

The folder structure

By default, everything is set up like so:

/mythic
	/app
	/dist
	/resources
	...files

99% of the work that you do with your theme will be in either the /app folder or /resources folder. This is pretty much where all your custom code will go. All the other files outside of that can, of course, be tweaked. But, for getting started, you only need to know about those two folders.

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.
• .eslintignore - Used for listing files to ignore for JS linting.
• .eslintrc - Configuration file for JS linting.
• .gitattributes - Attributes for Git.
• .gitignore - Files and folders that Git should ignore when committing and pushing to a repo.
• .stylelintignore - Used for listing files to ignore for style linting.
• .stylelintrc - Configuration file for style linting.
• 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).
• package.json - Setup for node scripts and dependencies (used by NPM and Yarn).
• phpcs.xml - PHP coding standards configuration file.
• readme.md - Readme file used by GitHub and other systems to describe the theme.
• screenshot.png - A 4:3 screenshot image of the theme.
• style.css - Needed by WP to know this is a theme. We use this for configuration, essentially.
• webpack.mix.js - Handles the Laravel Mix configuration.
• yarn.lock - Used by Yarn to lock dependencies (don't edit).

/app

The /app folder is where your "app" lives. This is the PHP code for your theme. Generally speaking, you'll have 3 types of PHP files that live within this folder or its sub-folders:

• bootstrap-{$name}.php - Holds code to bootstrap something in the theme.
• ClassName.php - Holds a single PHP class.
• functions-{$name}.php - Holds a group of related functions.

/dist

The /dist 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.

• scripts - Holds the compiled scripts.
• styles - Holds the compiled stylesheets.

Note that the /resources/views and /resources/lang folders are not copied over to /dist.

/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.
• scripts - JavaScript files.
• styles - SCSS/CSS files.
• svg - SVG files.
• views - The template files for the theme.