WordPress Tutorial: How to Create a WordPress Plugin

Step 6 – Directory Structure

WordPress Plugin Directory Structure
WordPress Plugin Directory Structure

Steps to Create a WordPress Plugin

  1. Name Your WordPress Plugin
  2. Isolate Your Plugin From Other Plugins
  3. Organize Your Plugin Files
  4. Define Directory Paths
  5. Load Plugin Files
  6. Directory Structure
  7. Plugin Activation, Plugin Deactivation, and Plugin Uninstallation
  8. Essential Plugin Files
  9. Security: Protect Plugin Files
  10. Plugin Hierarchy

I like to create an “includes” directory under each “view” or “scope” directory. The includes directory can be labeled as inc instead of includes. This is just a personal preference, because if you were to spell everything out in full, your file paths can end up becoming rather long. I try to keep directory names short if possible. When you’re programming your code, you should have the opposite mentality. Spell it out the long way (without getting too long of course), it helps to better identify what your code is expected to do.

Create an “includes” directory for each  “view” or “scope”:

  1. frontend => ./wp-content/plugins/mbe-plugin/frontend/inc
  2. backend => ./wp-content/plugins/mbe-plugin/backend/inc
  3. global => ./wp-content/plugins/mbe-plugin/global/inc

Planning Ahead

As you continue to develop your plugin, you’ll begin to add additional files of various types / extensions. It’s important to always keep organization in mind as you add these additional files to your plugin.

Create the following sub-directories in each of the includes directories as a starting point. You may or may not use all of these directories in your plugin.

FRONTEND
  1. classes => ./wp-content/plugins/mbe-plugin/frontend/inc/class
  2. styles => ./wp-content/plugins/mbe-plugin/frontend/inc/css
  3. images => ./wp-content/plugins/mbe-plugin/frontend/inc/img
  4. scripts => ./wp-content/plugins/mbe-plugin/frontend/inc/js
BACKEND
  1. classes => ./wp-content/plugins/mbe-plugin/backend/inc/class
  2. styles => ./wp-content/plugins/mbe-plugin/backend/inc/css
  3. images => ./wp-content/plugins/mbe-plugin/backend/inc/img
  4. scripts => ./wp-content/plugins/mbe-plugin/backend/inc/js
GLOBAL
  1. classes => ./wp-content/plugins/mbe-plugin/global/inc/class
  2. styles => ./wp-content/plugins/mbe-plugin/global/inc/css
  3. images => ./wp-content/plugins/mbe-plugin/global/inc/img
  4. scripts => ./wp-content/plugins/mbe-plugin/global/inc/js

Leave a Reply