Create the plugin directory and files

- [Narrator] In this tutorial, we begin building a complete WordPress plugin. We'll then use the plugin later in the course to demonstrate a variety of techniques. Here is a look at the finish product. Let's go ahead and activate the plugin and then visit the plugins settings page. Here we see the finished plugin that enables the user to customize the login page and also modify a few details in the admin area.

For example, here we've added a setting to change the URL for the logo link on the login page. There are also our settings for customizing the login page title, login style and login message. For the admin area, the user can customize the footer, toolbar and color scheme. For example, here is the custom footer message.

When this setting is enabled, it displays the message at the bottom of every page in the admin area. So, this is what we are building in this chapter of the course. We'll start in this video with just setting up the folder structure and adding a few plugin files. Before jumping in, let's deactivate and uninstall this complete version of the plugin. Now we can start from Scratch in the code editor. First, let's go to the plugins directory.

The first thing to do is create the main plugin folder. This folder will contain all of our plugin files. Now we need a main plugin file. This should have the same name as the plugin folder plus .php at the end.

We also want an index.php file and a license file; license.txt; it is a text file and lastly, we need a readme.txt file. So, now we're all set with the files. Let's add some folders.

The admin folder will contain any code that's used in the WordPress admin area. This includes CSS and JavaScript. We'll add some CSS and JavaScript files in an upcoming video. So, now we have a folder for our admin assets. Let's do the same thing for public facing pages. Same thing here.

We have folders inside of the public folder for CSS and JavaScript files. Next, we need a folder where we can put general code. Anything in the includes folder can be used anywhere; in the admin area or on public facing pages. It's a great location for any common PHP files and last but not least, we need a folder for language files. This folder will include anything related to translating the plugin into other languages.

We'll live it empty until we need it later in the course. For the plugin structure, this is a solid starting point. We could build of great plugins starting out just like this. It's a very versatile, flexible setup. Let's take a closer look at each of these files. The index.php file is just an empty file that prevents people from viewing the contents of the plugin directory. Here is our public directory and we are getting a blank page.

To better understand, let's delete the index.php file. Now, let's try again to access the plugin directory. Without the index file, we gain access to the entire plugin directory, so to improve security, we want to prevent this from happening, so we add a new index.php file. This file contains a simple comment and that's it. Now, with the blank index file in place, let's try again to view the directory contents.

As you can see, the index file helps to lock things down and keep our plugin secure. So, what we're thinking about it; let's add blank index files to the other plugin folders. The admin folder, includes languages and public. What about the CSS and JavaScript folders? Technically, we don't need to add an index file for these folders, because the CSS and JavaScript files already are available to anyone who views the source code of our web pages.

We can see this by viewing the source code of any page. As you can see, any CSS and JavaScript files can be viewed by simply clicking its link and here is a CSS file, so CSS and JavaScript files are meant to be publicly accessible, so there is no real need to add index files to the CSS and JavaScript folders, but it's also totally fine to add them if you prefer. Next, let's look at the main plugin file; myplugin.php.

The first thing that we need to add is a proper file header. We could use this complete file header that's included with the exercise files, but this is just a demo plugin, so we'll go ahead and keep things simple and go with the basic file header. Just remember about the complete file header when it's time to share your plugins publicly vie the WordPress plugin repository. Now that we have included the file header, we can close the main plugin file.

Next is the license.txt file. We covered this file in the previous Getting Started video. The license file is just a copy of the standard GPL text file available at gnu.org. Including a copy of this information is a requirement of the GPL license. So, let's grab a copy and add it into our plugins license file and that's all we need to do here. The license file is now complete. Last but not least is the plugins readme.txt file.

This file is super important, because it tells all users about your plugin. It's the documentation and it needs to be formatted properly. Here is the example readme file provided by WordPress.org. Let's copy the file and use it for our own plugin. We can add it directly to our readme.txt file, but let's use our own file header instead of this one. We can grab it from the main plugin file.

Just like so, but remember to save our changes and now we're all set with a nice template for the readme file and after the plugin is complete, we can revisit this file and flesh it out with actual plugin information. We would edit the description, installation and other sections according to the specifics of our plugin. To hear more about the readme file, check out the Writing Good Documentation section of the previous Best Practices video. Before wrapping up, we want to prevent direct access to our plugins PHP files.

Here is a snippet from the exercise files that does exactly that. So, let's copy this code and add it to any PHP files that might be included in the plugin. We want to include the snippet before any other code like right after the file header in the main plugin file. This code checks if the WordPress constant ABSPATH is defined. If it is not, that means the file is being called directly outside the WordPress and so, in that case, we abort by exiting the script.

This simple technique prevents foul play and helps keep the plugin secure. Note that we don't need to add the no direct access code to any of the blank index files. There is nothing that an attacker could do with them. They're meant to be accessed directly. In order to prevent directory access; at this point, we have a complete set of folders and files to start building our plugin. If we want it to, we could call this a starter template or a boilerplate for our future plugin development. Although it doesn't actually do anything at this point, these files technically are a plugin and we can verify such by visiting the plugins page in the admin area.

Here we see the plugin recognized by WordPress thanks to the file header and it's all ready to go. So, let's go ahead and activate the plugin just to make sure that everything is good and success; the plugin is active and we are on our way to building a complete fully-functional plugin in the remainder of this chapter. In this tutorial, we set up the plugin directory structure and edit some key plugin files. Although the plugin doesn't do anything at this point, it is recognized by WordPress and can be activated via the WordPress plugins screen.

In the next video, we'll begin adding functionality to our plugin by giving it its own place in the WordPress menu.