In this tutorial we will use the small WordPress plugin we created, WP-Customize, as our example as we guide you through the process of creating a WordPress plugin.

You can download the WP-Customize WordPress plugin by visiting http://wordpress.org/plugins/wp-customize/ and view the files in your favorite IDE or text editor as you follow the tutorial. The WP-Customize plugin allows the user to set some values to configure their WordPress login page so as to customize it with their own logo and text/background colors.

Setting Up Our Plugin

The first step in creating a plugin is simply setting up your PHP file with some comments at the top. If your plugin is simple enough to not require any other files than the PHP file, you can simply create a PHP file. If not, you’ll need to create a directory by the name of your plugin, and also create a PHP file by the same name of your plugin inside of the newly created directory. In our example we will create a file at wp-customize/wp-customize.php and to start out we will add the following:

If you’ve ever added code to your WordPress theme’s functions.php file to change behaviors not related to the theme, you should’ve written a plugin to do it instead. Any functions you can use in a functions.php file, you can use in a plugin.

We’ll start by queueing a JavaScript file to use in our plugin:

Next we add an action onto the “admin_menu” hook for our wsd_add_pages() function. You should proceed all your function names with a unique string, like “wsd_” to avoid functions of the same name:

Now we’ll set up our wsd_add_pages() function to run the add_options_page() function so we can create a “Customize” option in the admin menu under Settings:

Since we specified the last option as “wsd_settings_page” this is the function which will be run when the user clicks the “Customize” link we’re adding to the Settings menu item in the admin menu. Strap on your helmets, and let’s create that function now:

To allow our plugin to optionally replace the footer text, we will hook our wsd_remove_footer_admin() function to the admin_footer_text() hook:

To allow our plugin to set a custom logo for the WordPress Admin page’s header, we add our wsd_custom_logo() function to the admin_head() hook:

To also set the custom logo on the login page is virtually the same process:

To set a custom URL for the WordPress Admin login form to redirect to, we add our wsd_custom_login_url() function to the login_headerurl() hook:

To set a custom WordPress Admin login page header title, add our wsd_login_header_title() function to the login_headertitle() hook:

And lastly, to set a custom error message for incorrect logins:

As you can see, you have access to all of the usual PHP function hooks you would have in the theme’s functions.php file, and the plugin architecture of WordPress is quite powerful and easy to use. Next we need to set up the rest of the files for our plugin.

Setting Up The JavaScript

Create the file wp-customize/script.js and enter the following contents:

This simple jQuery scripting will slowly fade out error messages for the user in our WordPress Admin settings page.

All that is left now is to create our readme.txt file and to optionally create screenshot images.

Setting Up the readme.txt File

WordPress has an example readme.txt file you view at http://wordpress.org/plugins/about/readme.txt to use as a starting point. Edit the information relative to your new plugin and save it in the plugin’s folder.

Creating Screenshots

You may optionally also wish to create some screenshots of your admin page or any other screenshots of your plugin in action, to help users decide if it’s the plugin they’re looking for.