Directory structure

The boilerplate comes with a predefined directory structure to help you organize your plugin files. It is designed to give you a great starting point whether you’re developing small or large WordPress plugins.

.
├── app
├── inc
└── src
    └── blocks

Directories

Here is a brief overview of these directories, and what they are used for:

The app directory

The app directory is for PHP classes that should be autoloaded. Out-of-the-box, the directory contains several classes:

• the Plugin class which serves as the main entry point for the plugin.
• the Blocks class that automatically handles the Gutenberg blocks registration.
• the Settings class is an example that demonstrate how to add a settings page to the WordPress admin dashboard.

You can add more classes in this directory to add the core features or functionalities of your plugin.

PSR-4

Please note that the app directory follows the PSR-4: Autoloader standard. This means the directory structure should match the namespace of the classes.

By default, the root namespace of the app directory, is WPStarterPlugin. Any classes you add to the app directory would use the WPStarterPlugin namespace, followed by the directory structure. For example, if you add a class named Portfolio to the app/PostTypes directory, the namespace should be WPStarterPlugin\PostTypes\Portfolio.

If you’ve changed the root namespace when creating the project, make sure to update the namespace accordingly. For example, if you’ve set it to AwesomePlugin, the namespace of the Portfolio class should be AwesomePlugin\PostTypes\Portfolio.

The inc directory

The inc directory is for PHP functions and other files to support the plugin’s core features and functionalities. Out-of-the-box, you will find some helper functions and a translation file in this directory.

Autoload file

When adding new PHP files to the inc directory, make sure to add the path to the files relative to the root directory in the autoload.files section of the composer.json file. For example, if you add a file named functions.php that contains some generic functions for your plugin, you should add the following line:

"autoload": {
  "files": [
    "inc/functions.php"
  ]
}

Then run the following command, to update the autoloader:

composer dump-autoload

This will ensure that the file is autoloaded when the plugin loads, so you do not need to manually include or require the file in other PHP files.

The src directory

The src directory is for your JavaScript and Stylesheet files. When you run the npm run start or npm run build command, the files in this directory will be compiled and saved in the dist directory. You can add more files here to include additional styles or scripts in your plugin. To learn more, check out our guide on the Enqueuing scripts and styles guide.

The src/blocks directory

The src/blocks is a special directory for Gutenberg blocks. The boilerplate comes with a sample block to help you get started with creating custom blocks. You can add more blocks here, and they will be automatically loaded and registered by the plugin. To learn more, check out our recipe on Adding a block guide.