Tutorial: Your First WordPress Plugin

The best way to learn is by doing. And if you are going to learn how to create WordPress plugins by coding one, it may as well be one that you can use. If you are a web developer who routinely creates WordPress websites for clients this plugin will surely come in handy. Without further ado, let’s take a look at what we will be creating:

custom login logo for wordpress

As you can see we will replace the WordPress logo on the admin login screen. What you can’t tell from looking at the image above is that if you click the custom logo you will be taken to my website, not the WordPress site as it usually does. Customizing the login screen is actually fairly easy. All you need is a custom logo and a few lines of PHP code.

Create the image for the admin login page

Before we get our hands dirty with code, you are going to need an image to replace the WordPress image typically found on the admin login page. Just fire up your preferred image editor and create version of your logo (or whatever image you want displayed) that is exactly 67 px in height. The width isn’t that important but don’t get carried away.

Set up your wp-contents/plugins folder

Inside your wp-contents/plugins directory, create a directory named custom-login-logo. In custom-login-logo create another directory named images and place your logo file there. Finally, create a blank custom-login-logo.php file and place it in the custom-login-logo directory. Your files and directories should look something like this:

Plugin Directory Structure

 

Create and activate your plugin

Open the custom-login-logo.php file with your favorite code editor. In that file, paste the following PHP comment:

<?php
/*
Plugin Name: My Custom Login Logo
Plugin URI: http://www.wpdice.com/tutorial-your-first-wordpress-plugin
Description: This plugin, when activated, will replace the default WordPress logo on the admin login screen with the Strategy6 logo.
Author: Brandon Shoupe
Version: 1.0
Author URI: http://www.wpdice.com/brandon-shoupe
*/

?>

The comment above is the minimum requirements for creating a plugin. But with just a comment, our plugin doesn’t actually do anything. But let’s take a look at the elements in the comment:

Plugin Name

The Plugin Name you select needs to be unique. If you were going to distribute this plugin for others to use you would have to check wordpress.org/extend/plugins to make sure that there were no other plugins that had the same name. You won’t be distributing this plugin, but you still want to make sure it won’t conflict with any other plugin. For now just give it your name and add “custom login logo.” So if your name is Elton Smith then call your plugin “Elton Smith Custom Login Logo.”

Plugin URI & Author URI

The plugin URI is where someone can go to find out more information about your plugin. The author URI is where someone can go to find out more information about you. Since you aren’t going to distribute this plugin just put whatever you want to for these values.

Plugin Description

The plugin description is where you can give a user and potential user of your plugin a brief, but good description of what your plugin actually does. In this case you can just use what I wrote.

Hello Plugin

Congratulations! You have now created your first plugin. All that is left to do is make sure it is uploaded to your server. When it is, login and go to Plugins->Installed Plugins. If you have the PHP comment above correctly placed in the custom-login-logo.php file and have uploaded it correctly then you should see something like this:

 

Cool, huh? But it will be cooler when your plugin actually does something. All it does now is show up on your Plugins screen. Let’s start by adding the following code to your PHP file which will replace the WordPress logo with your logo:

add_action('login_head', 'dbs_cll_custom_login_logo');

/* Display the custom logo on the admin login page. */

function dbs_cll_custom_login_logo(){
$dbs_cll_logofile = plugins_url('images/logo.png', __FILE__);
echo '<style type="text/css">
h1 a { background-image:url(' . $dbs_cll_logofile . ') !important;
</style>';
}

One thing you may notice is the long, unwieldy name of the function. When you are programming for WordPress you have to remember that you cannot have two functions with the same name. That goes for the core WordPress code and for the plugins. In this example I am following the methodology presented in the book Professional WordPress Plugin Development by Williams, Richard, and Tadlock (Great book, BTW). In the book the authors say to prepend all of your variable and functions with two things: your initials and the name of the plugin. My initials are DBS and the name of the plugin is Custom Login Logo. The name of this function is also custom_login_logo. So the resulting function name is dbs_cll_custom_login_logo().

Line #6 grabs the URL of the location of the current file and adds “/images/logo.png”. Lines 7 – 9 echo out CSS code which will change the background image for the h1 a element to your logo. Reload the admin login screen and you should see your logo above the login fields. If you still see the WordPress logo then double check your code.

Changing the URL

Now it is time to change the web address that the logo links to. Doing that is pretty easy with this code:

add_filter('login_headerurl', 'dbs_css_login_url');

/* Return the url to your website instead of the url to wordpress's site. */
function dbs_cll_login_url(){
return "http://www.strategy6.com";
}

The function returns the URL that I want the logo to link to. The real magic of this code is provided by the add_filter() function. It adds the dbs_cll_login_url() function to the login_headerurl filter hook. Whenever WordPress calls the login_headerurl filter hook, this code will replace what is normally returned (the link to wordpress.org) with the value returned in line #5.

Bonus

We could leave the code as it is, but if you are going to take time to develop a plugin you may as well learn how to do it correctly. We want to move the add_action() and add_filter() functions inside of another function called dbs_cll_custom_login_logo_setup(). Then, we want to call that function when the plugins_loaded action hook is called by WordPress core. The reason we want to do this is because the plugins_loaded action hook is called after most of the core WordPress code is loaded but before any code begins executing. This prevents your plugin from accidentally causing an error if a specific WordPress function is not loaded.

Without further ado, here is what your final code should resemble:

<?php
/*
Plugin Name: My Custom Login Logo
Plugin URI: http://www.wpdice.com/tutorial-your-first-wordpress-plugin
Description: This plugin, when activated, will replace the default WordPress logo on the admin login screen with the Strategy6 logo.
Author: Brandon Shoupe
Version: 1.0
Author URI: http://www.wpdice.com/brandon-shoupe
*/

/*

Copyright 2012 Brandon Shoupe
This program is free software; you can distribute it and/or modify it under the terms
of the GNU General Public License as published by the Free Software Foundation; either
version 2 of this license or (at your opinion) any later version.

*/

/* Setup this plugins functionality when the plugins_loaded action hook is fired. This is a best practice and will
* prevent your plugins from causing problems with WordPress.
*/
add_action('plugins_loaded', 'dbs_cll_custom_login_logo_setup');

/* Add the custom login logo action hook. */
function dbs_cll_custom_login_logo_setup() {
add_action('login_head', 'dbs_cll_custom_login_logo');
add_filter('login_headerurl', 'dbs_css_login_url');

}

/* Display the custom logo on the admin login page. */
function dbs_cll_custom_login_logo(){
$dbs_cll_logofile = plugins_url('images/logo.png', __FILE__);
echo '<style type="text/css">
h1 a { background-image:url(' . $dbs_cll_logofile . ') !important;
</style>';
}

/* Return the url to your website instead of the url to wordpress's site. */
function dbs_cll_login_url(){
return "http://www.strategy6.com";
}

?>

[button url=”http://www.strategy6.com/wp-content/uploads/2012/11/custom-login-logo.zip” style=”grey” size=”large” type=”round” icon=”download” target=”_self”] Download Plugin Code [/button]

0 replies

Leave a Reply

Want to join the discussion?
Feel free to contribute!

Leave a Reply