Friday, February 21, 2014, 5 mins 33 secs

WordPress Plug-in Development Guide for Beginners

Vivek Pandey in Development Engineering

WordPress is a free and open source blogging system and a content management system (CMS) based on PHP and MySQL, which runs on a web hosting service. It includes features like a plug-in architecture and a template system.

One very popular feature of WordPress is its plug-in architecture which allows users and developers to extend its abilities beyond the core installation. WordPress has a database of over 20k plug-ins, each of which it offering custom functions and features. This enables users to tailor their sites to their specific needs. These customizations range from SEO (Search Engine Optimization) enhancers, to client portals used to display private information to logged in users.

Although there are lots of plug-ins available out there, there may arise a situation where we would need an extended behavior of exiting plug-ins. Such scenarios can be dealt with great ease by developing a custom plug-in which WordPress allows us to do.
This blog post will guide you on “How to create a custom plug-in in WordPress.”

By the end of this post, you should be able to create a plug-in structure which you can use by adding your custom code and utilize it.
To start with, let’s know where the plug-in development will begin:

Plug-in development will happen within wp-content->plugins folder of the downloaded code.
Traverse to “wp_content” and open to see the following file structure:

File Structure:

+wp-content

+plugins

+themes

Create a folder within plugins named “myplugins” and create other folders to hold the respective kind of files as shown below:

+my_plugin

+img

+js

+css

my_plugin.php

The php file named my_plugin.php will be the file which would hold the code for plug-in. Prepare your php file with proper header information which would describe what your plug-in does.
Place this information inside a comment tag as shown:

// To register you plugin
/*
Plugin Name: My Plugin
Plugin URI: http://www.example.com
Description: Description will be here.
Author: User Name
Version: 1.0
Author URI: http://example.com
*/

 

This information is enough to create a custom plug-in in WordPress, however this do not contain any code as of now.

Let’s proceed further and create an outline frame which can help you in adding your custom code to it.

As per OOPS concept create a custom class in myplugin.php you created just now. Name it according to the feature plug-in is meant for. Let’s name it as “myplugin” for convenience. Note that a good name would help a lot in understanding the functionality and hence naming should be done with lots of consideration.

Please refer to the last section of this blog to know about best practice for naming convention:

Define class My_Plugin in myplugin.php file as follows:

// Plugin class to initiate your plugin functionality
class My_Plugin

{

public function __construct()

{
// Defining your plug-in version
define( 'My_Plugin_VERSION', '1.0' );

// Defining your plug-in directory
define(My_Plugin _DIR', dirname(__FILE__) );

// function which registers the plug-in as a function to be executed when it gets activated.
register_activation_hook(__FILE__,'install');

// function which registers the plug-in as a function to be executed when it gets deactivated.
register_deactivation_hook(__FILE__,'uninstall');

}

}

 

Now you can define your plug-in installation code within a function as shown:

//You can define your plugin install code within function
function install()
{
    // Your Installation Code  
}

//We would definitely need styling for page. For such case, include your CSS style file by using WordPress’s function
function uninstall()
{
  // Your UnInstallation Code  
}

//You can add your style file in your plugin, to include your style file you have to register the style

wp_enqueue_style( 'bootstrap',
           plugins_url( my_plugin/css/bootstrap.css' ),
           array( bootstrap ), My_Plugin_VERSION, 'all' );

//You may Links a script file to the generated page at the right time according to the script dependencies using function

wp_enqueue_script( 'bootstrap',
     plugins_url( my_plugin/js/bootstrap.js' ),
     array(bootstrap),
       My_Plugin_VERSION, true );

 

Lets add page for plug-in and to do so, we will use WordPress function add_menu_page()
Usage:

//To create a main menu page for your plug-in
add_menu_page($page_title, $menu_title, $capability, $menu_slug, $function, $icon_url, $position );

$page_title: (string) (required) The text to be displayed in the title tags of the page when the menu is selected.

$menu_title(string) (required) The on-screen name text for the menu.

$capability: (string) (required) The capability required for this menu to be displayed to the user. User levels are deprecated and should not be used here.

$menu_slug: (string) (required)

The slug name to refer to this menu by (should be unique for this menu). Prior to Version 3.0 this was called the file (or handle) parameter. If the function parameter is omitted, the menu_slug should be the PHP file that handles the display of the menu page content.

$function: (string) (optional) The function that displays the page content for the menu page.

Default: None. Technically, the function parameter is optional, but if it is not supplied, then WordPress will assume that including the PHP file will generate the administration screen, without calling a function.

$icon_url: (string) (optional) The icon for this menu.

$position: (integer) (optional) The position in the menu order this menu should appear. By default, if this parameter is omitted, the menu will appear at the bottom of the menu structure. The higher the number, the lower its position in the menu.

We can add submenu page for plug-in by using WordPress function add_submenu_page()
Usage:

// To create a page for sub menu
add_submenu_page( $parent_slug, $page_title, $menu_title, $capability, $menu_slug, $function )

 

Now the plug-in created is displayed as “My_Plugin” as you see in the figure below:

 

Wordpress Plugin Development

Next step would be to activate the plug-in by clicking on “Activate” Button. This makes plug in active and ready to use. You can now add code to your plug-in and use it wherever you need it.

 

Word Press Naming Conventions and Best Practices:

  1. The name of main plug-in php file should be same as plug-in directory name.

  2. php file should have some description about plug-in for example plug-in name, plug-in description, version, author name, author link etc.

  3. Keep every folder different for images, js and css.

  4. To practice writing code you should create class with class name my_plugin.

  5. Define some constraint for versioning, plug-in name, plug-in directory and define these settings in your constructor because constructor will initialize these data members and you can use anywhere in your plug-in directory.

 

References

http://codex.wordpress.org/Function_Resources/
http://codex.wordpress.org/Writing_a_Plugin/

Vivek Pandey

Vivek Pandey