This tutorial is a guided tour on how to create a WordPress Plugin from scratch. If you are used to using plugins but not creating them, this post will teach you the basics of how a plugin is constructed.

What is a Plugin?

Firstly, what exactly is a Plugin? According to Codex ( the official WordPress online manual )

Plugins are ways to extend and add to the functionality that already exists in WordPress.”

So what does this mean? Plugins are essentially methods to add more or enhance the capabilities to WordPress sites and applications. In this tutorial, I am going to walk you through the creation of a very basic plugin.

How to create a Plugin?

This post won’t explain how to use PHP or go into detail about the WordPress architecture but will cover the basics to develop your first plugin.

Plugins reside in a folder called Plugins in the wp-content folder of any WordPress installation. These plugins can be single PHP files to folders with 100’s of files and subfolders. The first step to creating a plugin is creating a file. For this tutorial, we are going to create a plugin adding an image to the bottom of each post and we will call it “Post Banner”.

In the plugin folder, create a folder called <strong>post-banner</strong> and within it create a file called <strong>post-banner.php</strong>. Within this file we are going to add the Plugin Header a.k.a Plugin Information. Here will add the plugin a name and optionally add other other information about the plugin. See an example of a plugin header below.

<?php
/**
 * Plugin Name: Post Banner
 * Plugin URI: https://propatel.com/
 * Description: A simple plugin for inserting banner images into posts.
 * Version:1.0.0
 * Author: Altaf Hussain Patel
 * Author URI: https://propatel.com/
 * License: GPL2
 */

Each line tells a bit of information about the plugin.

Plugin Name – Gives the plugin the searchable title in the Plugin Administrative Section

Plugin URI – A link to where someone can find more information about the plugin such as support, detailed description, instructions or how to download.

Description – An excerpt of that describes the plugin and what it does once installed.

Version – This is a way of monitoring which release of the plugin this is. As you make changes to your plugin, you can change the version and create what is called a changelog to describe the changes made in each version.

Author – The name of the person or company that is creating the plugin

Author URI – The url to learn more about the author

License – This defines the usage of the plugin. WordPress is licensed under GPL and it is recommended that plugins especially those that are going to be added to the repository be licensed under GPL.

Now, let’s update our plugin file with our information.

<?php
/**
 * Plugin Name: Post Banner
 * Plugin URI: https://propatel.com/
 * Description: A simple plugin for inserting banner images into posts.
 * Version:1.0.0
 * Author: Altaf Hussain Patel
 * Author URI: https://propatel.com/
 * License: GPL2
 */

Once complete, let’s go to the plugin administrative panel, check out our new plugin and activate it.

Creating a shortcode

According to the Codex, shortcodes  “have been introduced for creating macros to be used in a post’s content.“. These shortcodes can be used for multiple purposes in posts and in our tutorial, we will use it to display a banner. Our shortcode will be the following [post_banner] and to add an image, it will look like this [post_banner image_url=”http://mypluginlab.com/image.jpg”]. So, let’s begin by opening up our plugin file adding the following.

add_shortcode('post_banner','post_banner_func');

The first paramater in this function is the tag that we will use to call our shortcode in our post. The second paramater is the callback function that will make the shortcode work. Below our previous snippet, add the call back function as shown below.

function post_banner_func($atts, $content=""){
 
}

The first parameter of the function is an array of the attributes used in the shortcode for example image in [post_banner image_url=”http://mypluginlab.com/image.jpg”]. The second parameter is the post content.

Now, we will improve the function to make it work.

function post_banner_func($atts, $content=""){
 $atts = shortcode_atts( array(
 	      'image_url' => 'null'
      ), $atts );
    if(!empty($atts['image_url'])){
       $image_div = '<div class="image-holder">';
       $image_div.='<img src="'.$atts['image_url'].'" alt="" border="0" />';
       $image_div.='</div>'; 
       $content.=$content.$image_div; 
    } 
return $content; 
}

Full Code:

<?php
/**
 * Plugin Name: Post Banner
 * Plugin URI: https://propatel.com/
 * Description: A simple plugin for inserting banner images into posts.
 * Version:1.0.0
 * Author: Altaf Hussain Patel
 * Author URI: https://propatel.com/
 * License: GPL2
 */
 
add_shortcode('post_banner','post_banner_func');
function post_banner_func($atts, $content=""){
 $atts = shortcode_atts( array(
 	      'image_url' => 'null'
      ), $atts );
    if(!empty($atts['image_url'])){
       $image_div = '<div class="image-holder">';
       $image_div.='<img src="'.$atts['image_url'].'" alt="" border="0" />';
       $image_div.='</div>'; 
       $content.=$content.$image_div; 
    } 
return $content; 
}

Resources to learn more

If all is working well, here’s a test for you. Try linking your banner image and post it in the comments.

Resources to learn more

Codex of WordPress