This is the first installment in a series of articles on how to make a WordPress plugin. This is designed for people who already know PHP but can’t seem to apply their knowledge to writing their own WordPress plugins, and resort to making “plugin fudge” by just melding together other people’s plugins.
Rather than choose some rather mundane plugin for you to write, this is actually going to teach you to write something that should be useful. You will be writing a contact form plugin that will validate the human-ness of the user by sending a validation e-mail to anyone who leaves a message.
Step 1. Create Your Directory Structure
It seems daft, but a good directory structure works wonders for your development process. Firstly go to your wp-content/plugins directory. Now it’s time for the most important part of your whole plugin – deciding on a spiffingly good name ;). I’ll call mine “wp-contact” for want of simplicity. Create the “wp-contact” directory. Now go into it and create these directories:
css – For CSS files
display – For your displayed PHP files
Now your directory is set up. Depending on the project’s complexity you may want to create additional folders for images, PHP include files and Javscript files, etc. The key is to separate out your files so you can instantly find what you want. It may seem superfluous now to create these directories when we’re not going to be using that much code, but when your plugin spans thousands of lines of code (as SBM does) it’ll be invaluable. Best to get into good habits now, eh?
Step 2. The Baseplate PHP File + Comments
Now we get to write some code. Well, not very much for now. Create a “wp-contact.php” file in your plugin’s directory, and then write this in it:
Save that file, then navigate over to your plugins form on your WordPress installation. A new and exciting plugin is now avaliable, “wp-content.” Have a fun time activating and deactivating it, just remember to deactivate it at the end – this is important for later. They’re pretty much self explanatory, but these are what the various comment “tags” mean:
Plugin Name – The displayed name of the plugin.
Plugin URI – Where you can download the plugin from.
Description – A short description of the plugin’s features.
Version – The version of the plugin. It’s important you have a decent versioning scheme so you can accurately refer to every release. I suggest major.minor.revision, e.g. 1.5.3.
Author- Your name.
Author URI – Your URL.
Step 3. Creating the Base Class
I’m an OO programmer; therefore I’m going to teach you OO program design. For my plugins I firstly create a base class, in this case it’s going to be called “WPContact”. Add the following code to your wp-contact.php file:
Now we have a simple plugin template. This exact same template can be used on any plugin you write, you just need to tweak the names a little.
How does this work? Every time you request a page from WordPress this plugin is included, if activated. On every run the “bootstrap” function of the WpContact class will be called – I do it this way so I know exactly where in the file the bootstrap code is. This bootstrap code firstly registers the installation and uninstallation functions. The “install” function will run when the plugin is activated, “uninstall” when deactivated. We’ll use these functions later to add options to the WordPress installation. The “…” comment is where we’ll later add more hooks to WordPress.
Step 4. Decide what data will be stored, then write classes
There’s only one piece of complex data that we’ll be storing in this program: e-mail data. Because I’m teaching you OO principles we now need to write a class that will store information about every e-mail message, and also give it some methods that will perform certain actions on the data. Write a new class called “WPContactMessage” in the file “wp-contact.php” to store this data:
That’s it for that class right now. We won’t be writing any more on it until later in the series.
Step 5. Writing your first hook
I’m sure you’re fed up with writing boring code that doesn’t seem to do much, but bear with me. For now, let’s write something more exciting – outputting the actual contact form itself. Pretty easy to do, first create the file “display/contact-form.php” and write this content to it:
This will be the form that is displayed to your users. Now we need to write a little function that will get the markup for this form – we’ll use this later for the content hook. To the file “wp-contact.php” add the following function to the “WPContact” class:
Finally we need to add the content hook. Add another function to your “WPContact” class as follows:
What this code does is to check if the HTML comment “” is in the content of the post/page. If it is then it’s replaced with the HTML markup for the contact form. There are many ways which you could do this, however I’ve tried to provide a solution that separates code from content as much as possible by using PHP’s caching functions.
End of Part 1
This is the end of this week’s tutorial. Give your code a try by creating a page with “” in it. Next week we get more stuck into data validation and adding action hooks.
Final content of wp-contact.php
EDIT: Due to the number of spam comments I’ve been receiving on this entry I’ve had to close comments. Sorry folks!