A Simple Guide to Create WordPress Plugin

On January 25, 2017, in Other Online Technology, by James Liu

WordPress is widely used to create personal blogs and company website because of its powerful plugin system. The original WordPress only provides a simple system to help people create blogs. Thanks for its flexible plugin system, now WordPress is used to setup any type of website, including blogs, company website, ecommerce website, and even help desk website. With the powerful plugin system, we can use WordPress to do everything. If you know how to create WordPress plugin, it’s definitely a great skill for your career.

Last year, I spent one week to create my first WordPress plugin. In this year, I spent another two weeks to create a new WordPress plugin. After these two plugins, I think it’s time to write down something. The most difficult part when I am creating WordPress plugin is to find the right way implement the feature I want, though WordPress provides a very complete developer manual. But if I want to go through the full developer document, it may take me several months (someone may be faster than me). To make the development process faster, I will share my experience with you, though I just finish two WordPress plugins. By the way, my way to create WordPress may not be correct, but it just works. If you find any mistake or incorrect approach, please leave your comment below.

Make the Simplest WordPress Plugin with Short Code

What’s the simplest WordPress plugin? A plugin doing nothing? Of course not. To make this guide simple, I will make a simple but useful plugin as an example. That means the plugin will have a meaningful function, which is not a “Hello World” plugin. So, let’s get it started.

The plugin in this example will create a link in your article, basing on a small text, such as:

[jms-aff-link-eng]

After you insert preceding code in the WordPress article, it will generate an anchor text inside. This feature in WordPress is named “short code”. This is a quote from WordPress:

The Shortcode API is a simple set of functions for creating WordPress shortcodes for use in posts and pages.

At the beginning, let’s create a folder jms-affiliate-link-engine, and put two files inside:

  • jms-affiliate-link-engine.php: the main plugin function file.
  • readme.txt: the plugin meta data, including the plugin name, version, description, change logs, and update notes. These information will appear on wordpress.org if you publish it there. Here is an official example of readme.txt on WordPress.

Now, let’s see how the php looks like:

<?php
/* 
Plugin Name: JMS Affiliate Link Engine
Plugin URI: http://www.jmsliu.com/pluginlink
Description: Create an affiliate link in posts and pages
Author: James Liu
Version: 0.0.1
Author URI: http://jmsliu.com/
License: GPL2

{Plugin Name} is free software: you can redistribute 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 the License, or
any later version.
 
{Plugin Name} 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 {Plugin Name}. If not, see {License URI}.
*/

defined( 'ABSPATH' ) or die( 'No script kiddies please!' );

add_shortcode( 'jms-aff-link-eng', 'jmsAffiliateLinkEngine');

function jmsAffiliateLinkEngine($atts) {
    $affLink = "<a href=\"http://jmsliu.com/\">Affiliate Link</a>";
    return $affLink;
}
?>

The preceding source code is a very simple example to generate an anchor text with a hyperlink. Please do not delete the comment in the head of the file. It is necessary for WordPress to track the plugin information. If you want to change the anchor text or the hyperlink, you can simple edit the source code and replace them with what you want.

Add Administrator Page for WordPress Plugin

To make it to change the anchor text and hyperlink more easily, we can generate an administrator page to archive this goal. In WordPress plugin, create an administrator page is quite simple. We can use “admin_menu” action to generate a menu in the WordPress admin page. Here is the WordPress official page for Administration Menus. Let’s add following code in the end of jms-affiliate-link-engine.php.

function jmsAffiliateLinkAdmin() {
    add_menu_page(
        "JMS Affiliate",
        "JMS Affiliate",
        'manage_options',
        'jms-affiliate-link-top',
        'jmsAffiliateLinkAdminOptions' );

    // Add a submenu to the custom top-level menu:
    add_submenu_page(
        'jms-affiliate-link-top',
        'About',
        'About',
        'manage_options',
        'jms-affiliate-link-sub1',
        'jmsAffiliateLinkAdminSub1');
}

function jmsAffiliateLinkAdminOptions() {
    echo "This is the admin page";
}

function jmsAffiliateLinkAdminSub1() {
    echo "This is the about page";
}

Make a Service Plugin in WordPress

Just now we have discussed how to create a normal plugin in WordPress. It enables you to add [short code] in the article or page. Furthermore, you can also configure the plugin through the admin page, though there is no exact functions in the admin page in the example. In this section, I will demonstrate how to implement a service plugin. Before we start, let’s talk about what exactly service plugin is.

WordPress is a blog framework. 90% of usage of WordPress is serving as website. When users type URL in the browser, WordPress returns the HTML page with css and javascript. Besides that, WordPress can also provide web services (API). For instance, you can call a certain URL by ajax and WordPress returns the JSON or XML instead. In this case, you can create iOS app or Android app by using web services (API) via plugin in the WordPress to provide service. Now, let’s see how we can do so.

Register JSON API by Adding Query String in URL

First of all, we need to define how user can call the API. Basicly, we can define a simply url for outside calling, for example:

http://website.com/index.php?jmsaff=1

When calling preceding url, WordPress will return the actual affiliate link, in this case, http://jmsliu.com/. To implement this, let’s add following filter in our plugin php file which created in previous section. This will not work in admin page.

add_filter('query_vars', 'add_jms_aff_query_var', 10, 1);
function add_jms_aff_query_var($vars) {
    $vars[] = 'jmsaff';
    return $vars;
}

Generate API URL by Adding Query String in URL

In WordPress, we can use add_query_arg function to generate a link with customized query sting. In this example, it will look like:

<a href="<?php echo esc_url( add_query_arg( 'jmsaff', "1") )?>">

Above example code will add query string on the page “/”. If you want to add query string in a certain page, you can try this code:

<a href="<?php echo esc_url( add_query_arg( 'jmsaff', "1", site_url( '/mypage/' ) ) )?>">

Parse Query String in URL

There are several ways to parse the query string in WordPress, such as in a page created by template, in the theme functions.php or in the plugin. In this example, I will only show you how to parse customized query string in the plugin. To do so, we can use parse_request action. Please see this example source code:

add_action('parse_request', 'jms-affiliate-parse');
function jms-affiliate-parse($wp) {
    $jmsAffID= $wp->query_vars['jmsaff'];
    if($jmsAffID == 1) {
        echo "<link>http://jmsliu.com</link>";
        exit;
    }
}

Let’s install the plugin in the WordPress locally and try to access with following url:

http://website.com/index.php?jmsaff=1

If everything work properly, it will return an xml string like:

<link>http://jmsliu.com</link>

Download Source Code

You can download this plugin example by clicking following link:
Download WordPress Affiliate Link Plugin Source Code

 

Leave a Reply

WordPress Blog

Free WordPress Themes