webSIGHTdesigns - Web Design, Web Development, Web Hosting

How to Create a WordPress Plugin

Posted on Tuesday, January 7th, 2014 at 1:46 am
by webSIGHTdesigns

This tutorial outlines how to create a WordPress plugin.

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:

<?php
/**
 * @package WP_Customize
 * @version 1.0
 */
/*
Plugin Name: My Plugin Name
Description: Describe what this plugin does here.
Author: Your Name
Version: 0.1
Author URI: http://yourwebsite.com/
License: GPL2
*/

/*
Copyright 2013  Your Name  (email : ENTERYOUREMAIL)

This program is free software; you can redistribute it and/or modify
it under the terms of the GNU General Public License, version 2, as
published by the Free Software Foundation.

This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
GNU General Public License for more details.

You should have received a copy of the GNU General Public License
along with this program; if not, write to the Free Software
Foundation, Inc., 51 Franklin St, Fifth Floor, Boston, MA  02110-1301  USA
*/

?>

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:

wp_enqueue_script( 'wsd-customize-js', plugin_dir_url(__FILE__) . '/script.js', array(), '1.0', true );

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:

add_action('admin_menu', 'wsd_add_pages');

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:

function wsd_add_pages() {
	// Add a new submenu under Settings:
	add_options_page(__('Customize','wsd-menu'), __('Customize','wsd-menu'), 'manage_options', 'settings', 'wsd_settings_page');
}

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:

function wsd_settings_page() {
	if (!current_user_can('manage_options')) {
		wp_die( __('You do not have sufficient permissions to access this page.') );
	}
	$opt_name = 'wsd_admin_footer_contents';
	$hidden_field_name = 'wsd_submit_hidden';
	$data_field_name = 'wsd_admin_footer_contents';
	$opt_val = get_option( $opt_name );
	if( isset($_POST[ $hidden_field_name ]) && $_POST[ $hidden_field_name ] == 'Y' ) {
		update_option('wsd_admin_logo', htmlentities(stripslashes($_POST['wsd_admin_logo'])));
		update_option('wsd_admin_logo_width', htmlentities(stripslashes($_POST['wsd_admin_logo_width'])));
		update_option('wsd_admin_logo_height', htmlentities(stripslashes($_POST['wsd_admin_logo_height'])));
		update_option('wsd_admin_logo_area', htmlentities(stripslashes($_POST['wsd_admin_logo_area'])));
		update_option('wsd_admin_bgcolor', htmlentities(stripslashes($_POST['wsd_admin_bgcolor'])));
		update_option('wsd_admin_linkcolor', htmlentities(stripslashes($_POST['wsd_admin_linkcolor'])));
		update_option('wsd_admin_linkhovercolor', htmlentities(stripslashes($_POST['wsd_admin_linkhovercolor'])));
		update_option('wsd_admin_footer_contents', htmlentities(stripslashes($_POST['wsd_admin_footer_contents'])));
		?><div class="updated fade"><p><strong><?php _e('Settings saved.', 'wsd-menu' ); ?></strong></p></div><?php
	}
	?>
	<div class="wrap">
	<?php screen_icon(); ?>
	<h2>Customize</h2>
	<form name="wsd_customize" method="post" action="">
		<?php //settings_fields('myoption-group'); ?>
		<?php //do_settings_fields('myoption-group'); ?>
		<input type="hidden" name="<?php echo $hidden_field_name; ?>" value="Y">
		<p><strong>Wordpress Admin Login</strong></p>
		<table class="form-table">
			<tr valign="top">
				<th scope="row"><?php _e("Custom Logo URL:", 'wsd-menu'); ?> </th>
				<td>
				<input type="text" size="42" name="wsd_admin_logo" value="<?php
					echo ($_POST['wsd_admin_logo'] ? $_POST['wsd_admin_logo'] : html_entity_decode(get_option('wsd_admin_logo', htmlentities(get_option('wsd_admin_logo')))) );
				?>">
				</td>
			</tr>
			<tr valign="top">
				<th scope="row"><?php _e("Logo Image Size:", 'wsd-menu'); ?> </th>
				<td>
				Width: <input type="text" size="5" name="wsd_admin_logo_width" value="<?php
					echo ($_POST['wsd_admin_logo_width'] ? $_POST['wsd_admin_logo_width'] : html_entity_decode(get_option('wsd_admin_logo_width', htmlentities(get_option('wsd_admin_logo_width')))) );
				?>"> px.    Height: <input type="text" size="5" name="wsd_admin_logo_height" value="<?php
					echo ($_POST['wsd_admin_logo_height'] ? $_POST['wsd_admin_logo_height'] : html_entity_decode(get_option('wsd_admin_logo_height', htmlentities(get_option('wsd_admin_logo_height')))) );
				?>"> px.
				</td>
			</tr>
			<tr valign="top">
				<th scope="row"><?php _e("Logo Area Height:", 'wsd-menu'); ?> </th>
				<td>
				<input type="text" size="5" name="wsd_admin_logo_area" value="<?php
					echo ($_POST['wsd_admin_logo_area'] ? $_POST['wsd_admin_logo_area'] : html_entity_decode(get_option('wsd_admin_logo_area', htmlentities(get_option('wsd_admin_logo_area')))) );
				?>"> px.
				</td>
			</tr>
			<tr valign="top">
				<th scope="row"><?php _e("Background Color:", 'wsd-menu'); ?> </th>
				<td>
				#<input type="text" size="5" name="wsd_admin_bgcolor" value="<?php
					echo ($_POST['wsd_admin_bgcolor'] ? $_POST['wsd_admin_bgcolor'] : html_entity_decode(get_option('wsd_admin_bgcolor', '000')) );
				?>">
				</td>
			</tr>
			<tr valign="top">
				<th scope="row"><?php _e("Links Text Color:", 'wsd-menu'); ?> </th>
				<td>
				#<input type="text" size="5" name="wsd_admin_linkcolor" value="<?php
					echo ($_POST['wsd_admin_linkcolor'] ? $_POST['wsd_admin_linkcolor'] : html_entity_decode(get_option('wsd_admin_linkcolor', 'fff')) );
				?>">
				</td>
			</tr>
			<tr valign="top">
				<th scope="row"><?php _e("Links Text Hover Color:", 'wsd-menu'); ?> </th>
				<td>
				#<input type="text" size="5" name="wsd_admin_linkhovercolor" value="<?php
					echo ($_POST['wsd_admin_linkhovercolor'] ? $_POST['wsd_admin_linkhovercolor'] : html_entity_decode(get_option('wsd_admin_linkhovercolor', 'cfcfcf')) );
				?>">
				</td>
			</tr>
		</table>
		<p><strong>Wordpress Admin Footer</strong></p>
		<table class="form-table">
			<tr valign="top">
				<th scope="row"><?php _e("Admin Footer:", 'wsd-menu'); ?> </th>
				<td><textarea cols="42" rows="4" name="wsd_admin_footer_contents"><?php echo html_entity_decode(get_option('wsd_admin_footer_contents',htmlentities(get_option('wsd_admin_footer_contents')))); ?></textarea></td>
			</tr>
		</table>
		<?php submit_button(); ?>
	</form>
	</div>
	<?php
}

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:

function wsd_remove_footer_admin () {
	$wsd_footer_default_value = 'Thank you for creating with <a href="http://wordpress.org/">Wordpress</a>.';
	if(get_option('wsd_admin_footer_contents') == "") {
		echo $wsd_footer_default_value;
	} else {
		echo html_entity_decode(get_option('wsd_admin_footer_contents', htmlentities($wsd_footer_default_value)));
	}
}
add_filter('admin_footer_text', 'wsd_remove_footer_admin');

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:

function wsd_custom_logo() {
	echo '<style type="text/css">
		#header-logo, .login h1 a {
			background-image: url(' . html_entity_decode(get_option('wsd_admin_logo')) . ') !important;
			background-size: ' . html_entity_decode(get_option('wsd_admin_logo_width')) . 'px ' . html_entity_decode(get_option('wsd_admin_logo_height')) . 'px !important;
			height: ' . html_entity_decode(get_option('wsd_admin_logo_area')) . 'px !important;
		}
	</style>';
}
add_action('admin_head', 'wsd_custom_logo');

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

function wsd_custom_login_logo() {
	echo '<style type="text/css">
		h1 a {
			background-image:url(' . html_entity_decode(get_option('wsd_admin_logo')) . ') !important;
			background-size: ' . html_entity_decode(get_option('wsd_admin_logo_width')) . 'px ' . html_entity_decode(get_option('wsd_admin_logo_height')) . 'px !important;
			height: ' . html_entity_decode(get_option('wsd_admin_logo_area')) . 'px !important;
		}
		body { background-color:#' . html_entity_decode(get_option('wsd_admin_bgcolor', '000')) . ' !important; }
		#login #nav a, #login #backtoblog a { color: #' . html_entity_decode(get_option('wsd_admin_linkcolor', 'fff')) . ' !important; text-shadow: none !important; }
		#login #nav a:hover, #login #backtoblog a:hover { color: #' . html_entity_decode(get_option('wsd_admin_linkhovercolor', 'cfcfcf')) . ' !important; text-shadow: none !important; }
	</style>';
}
add_action('login_head', 'wsd_custom_login_logo');

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:

function wsd_custom_login_url() {
	return site_url();
}
add_filter('login_headerurl', 'wsd_custom_login_url');

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

function wsd_login_header_title() {
	return get_bloginfo(‘name’);
}
add_filter('login_headertitle','wsd_login_header_title');

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

add_filter('login_errors', create_function('$a', "return 'Incorrect login. Please try again.';"));

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:

jQuery(document).ready(function($){
	// fade away update messages
	setTimeout(function(){
		$('.fade').fadeOut('slow');
	}, 5000);
});

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.

webSIGHTdesigns

Saturday, May 10th, 2014 at 4:41 pm

Version 0.2 of the WP-Customize plugin is now available. This version fixes the plugin to work properly in WordPress 3.9 and adds the option to set a width for the logo area. Available at http://wordpress.org/plugins/wp-customize/" target="_blank">http://wordpress.org/plugins/wp-customize/"

Please Sign In

Please sign in to post a comment.

Web Development

View details »

Web Hosting

View details »

Our Portfolio

View portfolio »

WebSight Designs webSIGHTdesigns preferred email webSIGHTdesigns United States United States