Start Your First Plugin Project with WPPB.me

I think the reason I was scared to create a plugin before was because I thought that the setup would be a pain to do. Looking at other successful plugins, I saw that they often had folders upon folders of organized files and extremely well-structured code.

But it really wasn’t the complexity that put me off. It was the fact that I had to start from essentially nothing. This meant I had a lot of questions to answer even before typing my first line of code.

Should I organize files by type or by function? What framework should I follow? Do I really need a separate folder for each type of file?

So you can imagine my relief when I found that you don’t have to set up all the folders and files manually. Just use the WordPress Plugin Boilerplate Generator.

WordPress plugin boilerplate generator

Step 1: Generate the Plugin Zip File

To create a plugin with all the needed files, you just need to fill in the form. In return, it sends you a zip file with all the things you need to make your plugin work. All the files themselves explain what they do which is a nice bonus.

First, let’s talk about the parts of the form:

  • Plugin Name. This is the name of the plugin that will show up when you install the plugin.
  • Plugin Slug. This is the code-friendly name of the plugin. The slug is used as the filename of your main plugin file, as well as an identifier of some of the other important files in it. Since I’ll be referring to this a lot, let’s call it “{plugin-slug}“.
  • Plugin Uri. This is the link to your plugin’s website. I suggest you use the link to your personal site or company’s site here for now unless you already have a website for the plugin itself.
  • Author Name. Enter your name here, or the name of your company
  • Author Email. Enter the email you want to share as part of the plugin. Note that this will be accessible to the users of your plugin so make sure it’s an email you want to share with the public.
  • Author Uri. Add the link to your personal website or company site here.

Step 2: Download and Unzip the File

Once you download the zip file, you’ll need to unpack it to edit the files so that you can add the functionality you need. For the next discussion points, keep in mind that we’ll use “{plugin-slug}” as a placeholder for the Plugin Slug you entered above.

After you’ve unzipped the file, you’ll see a lot of folders and files in it. Let’s focus on the important files and folders first and discuss the others later:

  • {plugin-slug}.php. This is the main file of the plugin. It’s what WordPress uses to build the description of your plugin when added it to the user’s plugin page. We can actually add the code needed to make the plugin work right here, but I think it would be better to modify the files below instead.
  • admin. This folder is where the admin part of your plugin lives. That includes your plugin options, internal menus found in the WordPress admin area, and so on. You’ll add the code in the  class-{plugin-slug}-admin.php file found here.
  • public. This folder is where the public-facing part of your plugin will be. If you change the way your blog looks, you need to add the code for that in class-{plugin-slug}-public.php.

Now I mentioned that you don’t want to modify {plugin-slug}.php directly. That’s because you want to make it easy to find the code you need if and when you need to modify it.

From my experience, adding all the code into one file can turn into a huge mess. Much better if you put the admin-facing code in the admin folder, and the public-facing code in the public folder. The generator even separates the files by type within each of those folders.

testing your plugin

Step 3: Testing Your Plugin

Obviously, the plugin doesn’t do anything right now. Let’s add a bit of test code now and add the plugin to your site to check if it works.

  1. Go to the admin folder of your plugin and open class-{plugin-slug}-admin.php using your favorite text editor, either NotePad for Windows users or TextEdit for Mac users.
  2. Look for this line:
    $this->version = $version;
  3. In the next line after that, type in this text:
    add_action('admin_head', function() { echo '<style>body{background:gold;}</style>'; });

    then, save the file.

  4. Go to the top folder of your plugin and turn it into a zip file. Often, you’ll just need to right click on the folder and choose the necessary menu item.
  5. After that, open up your site and go to the admin area. Navigate to Plugins > Add New.
  6. Click Upload Plugin at the top of the page, then click on Browse and upload the zip file you made earlier.
  7. Click Install Now and then click Activate Plugin.

admin area

If the background of your admin area is now in bright gold like the one shown above, congrats! You’ve just installed your first working plugin! Just deactivate it to revert to your normal color and uninstall it if you’d like.

PS: If you’re having trouble uploading the plugin, you might want to ask for some help from your site admin.

Now that you’ve made your first plugin, it’s time to modify it to add the features you want. But first, let me teach you a couple of things that will help you code better: creating a local WordPress setup for coding offline and how to edit your plugin’s code.