What is WordPress Plugin Development?

What’s a WordPress Plugin?

Consider WordPress an unlimited lego board onto which we may insert a lego piece that adds value/functionality to the existing WordPress lego board.

Many similar lego pieces may be found in the WordPress plugin directory to help you add functionality and modify the appearance and feel of your website.

How does the WordPress plugin work?

Consider a plugin a piece of code that runs and makes the necessary adjustments each time you request a page from WordPress.

In other words, the WordPress server processes all active plugins and modifies the page based on the plugin code directives.

All of this makes any magic in the WordPress realm possible, 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 page’s header.

Then we have some database functions:

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

WordPress Plugin Development Practice

Enough of words here; 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 to help them display their social links on every page/blog header.

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 the name unique.

Step 3: Inside 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="https://codersera.com/blog/wordpress-plugin-development/$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 = array(
    "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 );
}

?>
‘’’

Line 1-11 are plugin meta-data.

The entry point file must contain meta-data to make your WordPress recognize your plugin.

Line 13   This prevents the plugin from being accessed by any other means than 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 an 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 plugins 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 stylings here but i know you can do much better.

File uninstall.php

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

The first line prevents the file from running if it’s called directly or suspiciously.

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 begin, we recommend reading some blog entries describing the process and consulting the WordPress codex if you get stuck. InApps is always one step ahead of its audience regarding new technology, development, or expertise.

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.

If the plugin is simple, offers a few unique features, and you can submit a concise specification simply, with examples, the cost will be between $500 and $1000.

Every WordPress plugin you install on your website is recorded in your WordPress database. You may switch them on and off at any time.

WordPress connects to the database for each visit, loads the core software, and loads your active plugins.