Guide to WordPress Plugin Development

According to W3Techs, WordPress powers 40% of all the websites on the Internet, including those without a content management system (CMS) or with a custom-coded CMS. Or to put it another way, WordPress powers over one-third of the web!

And what makes WordPress so powerful is its vast ecosystem of plugins.

What’s a WordPress Plugin?

You can think of WordPress as an infinite lego board on which we can place a lego piece that adds some value/functionality to the existing WordPress lego board.

The WordPress plugin directory is full of many such lego pieces that help you add features and change the look and feel of your website.

How does the WordPress plugin work?

You can think of a plugin as a piece of code that runs and makes necessary changes every time you request a page from WordPress.

To put in other words the WordPress server goes through all the active plugins and makes changes to the page as per the plugin code commands.

All this makes every magic possible in the WordPress world ranging from

• custom page builders.
• page comments filtering
• advanced SEO
• and many more

WordPress core comes preloaded with many functions that help plugin development a breeze.

Some of the functions we’ll be using are

add_action($tag, function)
‘’’php
add_action(‘wp_head’,’ functionToaddHeader’);
function functionToaddHeader(){
	return (‘<h1> Header from my Plugin </h1> ‘);
}
‘’’

With this, we’ll be able to add content to the header of the page.

Then we have some database functions:

• get_option(key, value)
• delete_option(key)
• update_option(key, value)

Enough of words here, now let’s dive in and make a very simple plugin.

Before moving ahead, we would advise you to set up a WordPress testing environment just to make sure any changes you make don’t affect any of your published content.

(‘https://developer.wordpress.org/themes/getting-started/setting-up-a-development-environment’)

Here we’ll be making a plugin that will help them display their social links on the header of every page/blog.

Step 1: Head on to the WordPress directory and then to wp-content/plugin

Step 2: Here, we’ll be naming our plugin as ‘my_plugin’

so create a folder ‘my_plugin’

However, for publishing, you need to make sure that the name is unique.

Step 3: Inside the my_plugin folder, create two files.

1) my_plugin.php

This will act as the entry point for our plugin

2) uninstall.php

This usually contains some cleanup logic that runs when the user uninstalls your plugin.

3) Also create a dashboard.php

This will render a simple html form to take user inputs.

File: my_plugin.php

‘’’php
<?php
/**
* Plugin Name: My Plugin
* Plugin URI: http://pluginURI.com
* Description: Brief About Your Plugin
* Version: 1.0.0
* Author: Your Name
* License: GPL2

*/

if (!defined("ABSPATH")) {
    die();
}

add_action("wp_head", "functionToaddHeader");
add_action("admin_menu", "addPluginAdminMenu", 9);

function functionToaddHeader()
{
    $data = get_option("socialLinks");
    if (is_array($data)) {
        $fb = $data["facebook"];
        $ins = $data["instagram"];
        $twi = $data["twitter"];
        print "
			<div >
				<a style ='padding: 0px 5px ' href = '$fb'> Facebook </a>
				<a style ='padding: 0px 5px ' href = '$ins'> Instagram </a>
				<a style ='padding: 0px 5px ' href = '$twi'> Twitter </a>
			</div>
			";
    }
}

function checkFormSubmission()
{
    if (array_key_exists("myPlugin_submit", $_POST)) {
        $facebook = $_POST["facebook"];
        $twitter = $_POST["twitter"];
        $instagram = $_POST["instagram"];

        $data = [
            "facebook" => $facebook,
            "twitter" => $twitter,
            "instagram" => $instagram,
        ];
        update_option("socialLinks", $data);
    }
}

function renderPageFun()
{
    require_once plugin_dir_path(__FILE__) . "/dashboard.php";
}

function addPluginAdminMenu()
{
    add_menu_page(
        "MyPlugin",
        "MyPlugin",
        "administrator",
        "plugin-settling-page",
        "renderPageFun",
        "dashicons-chart-area",
        30
    );
}
?>
‘’’

Lines 1-11 are plugin meta-data.

To make your WordPress recognize your plugin, the entry point file must contain meta-data.

Line 13   This prevents the plugin from being accessed by any other means other than the WordPress admin panel.

add_action('admin_menu', 'addPluginAdminMenu' , 9) 
add_action('wp_head', 'functionToaddHeader');

These are action triggers that are already defined in WordPress core.

The first one adds admin-menu-item.

The second one adds a header to every page/blog.

The second parameter is the function that returns or performs the actions.

You can read more about the function from WordPress official doc.

(‘https://codex.wordpress.org/Plugin_API/Action_Reference’)

Refresh your admin plugins listings and now you will see the plugin listed:

Now that we have the code in place we can activate the plugin and see what it does.

Now let’s also create a file dashboard.php this will be our plugin dashboard page.

Here we’ll provide options to update the social links.

File dashboard.php

‘’’php
<h1>Welcome To Social Links</h1>
<?php
$submitURL = admin_url() . "admin.php?page=plugin-settling-page";
$data = get_option("socialLinks");
if (is_array($data)) {
    $fb = $data["facebook"];
    $ins = $data["instagram"];
    $twi = $data["twitter"];
}
?>
<form method = "POST" action = "<?php echo $submitURL; ?>">
		<span >Facebook </span> <input type = "text" name = "facebook" value = "<?php echo $fb; ?>"/><br/><br/>
		<span >Instagram </span> <input type = "text" name = "instagram" value = "<?php echo $ins; ?>" /><br/><br/>
		<span >Twitter </span> <input type = "text" name = "twitter" value = "<?php echo $twi; ?>" /><br/><br/>
		<button type = "submit" name = "myPlugin_submit">Save</button>
</form>
‘’’

This is a simple php file that outputs html with data stored in the database.

Initially the data is empty but once you fill in the details the fields will display the corresponding data.

The form submission is handled by checkFormSubmission() function defined in the main php file

To see the result you can visit any of your page/blog.

I haven’t done much of the styling here but I know you can do much better.

File uninstall.php

if (!defined('WP_UNINSTALL_PLUGIN')) {die; }
delete_option('socialLinks');

The first line prevents the file from running if it’s called directly or in any suspicious way.

The next line deletes the data that we stored on form submission.

Key Takeaways

WordPress plugin development is fairly easy, however, you need to know the following to get started:

• Web Development (HTML, CSS, Javascript)
• WordPress Plugin Architecture.
• Little understanding of WordPress core APIs.

To get started, we would advise you to go through some blog posts explaining the same, and every time you get stuck, look up the WordPress codex. Codersera tends to stay one step ahead in terms of updating its audience with new technology, development, or knowledge.

Navigate to Plugins in your WordPress admin dashboard, then click Add New. On the following screen, click Upload Plugin to pick a plugin file from your machine. Click Install Now after selecting the very first plugin.zip file you made.

The cost will range between $500 and $1000 if the plugin is basic, includes a few unique features, and can provide a straightforward specification easily and with examples.

Each WordPress plugin that you install on your site is saved in your WordPress database. You can turn them on and off whenever you want. WordPress connects to the database, loads the core program, and then loads your active plugins for each visit.

FAQ's