image
Development 5 MINUTE

Guide to WordPress Plugin Development

author

Lucas White

Lucas is a passionate software engineer with over fifteen years of experience developing software under both web and Windows environments. He specializes in Node.js and .NET frameworks, as well as React and AngularJS on the front-end. Lucas holds a Master's degree in computer science and has worked with a variety of Agile teams. He communicates extremely well.
image
Reading Time: 5 minutes

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 to 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 works?

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 WordPress world ranging from 

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

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

Some of 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 doesn’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 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 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 which 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 = 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.

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 WordPress admin panel.

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

These are action triggers which 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 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:

(wordpress plugin development)add my plugin

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

(wordpress plugin development)

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

myplugin(wordpress plugin development)

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

Road to Mars(wordpress plugin development)

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 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.

How do I start a WordPress plugin developer?

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.

How much does it cost to develop a WordPress plugin?

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

How does a WordPress plugin work?

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.

How useful was this post?

How useful was this post?

Click on a star to rate it!

Average rating 0 / 5. Vote count: 0

No votes so far! Be the first to rate this post.

Please do Rate Us and Share!

Related Blogs

  • author
    Kela Casey

    TabView in React Native

    Reading Time: 4 minutes React Native is a JavaScript framework that rites actual, natively rendering mobile apps for iOS and Android. It is based on React, Facebook’s JavaScript library for developing user interfaces and it is solely made for mobile devices. React Native allows you...

  • author
    Adam Davidson

    How to Monitor and Scale your Supply Chain Performance

    Reading Time: 7 minutes Supply Chain performance is a critical business method, not just a business purpose. The main trends in the business right now are low-cost country sourcing, outsourcing, customization, globalization— all of these create tremendous complexities in a supply chain. It refers to...

  • author
    Thomas Wilfred

    Bootstrap Vs Material UI | Which Is Best For Next Web App?

    Reading Time: 7 minutes Bootstrap vs Material UI has been a trending topic for a long time amongst developers. The excellent user interface has become particularly significant for companies as it aids in user engagement and brand recognition. Front-end website and app development systems, such...

image

About The Author

Lucas is a passionate software engineer with over fifteen years of experience developing software under both web and Windows environments. He specializes in Node.js and .NET frameworks, as well as React and AngularJS on the front-end. Lucas holds a Master’s degree in computer science and has worked with a variety of Agile teams. He communicates extremely well.

Try our One-Week Risk Free Trial for Hiring a Coder

Know more Hire a Coder

Hire Top 1% Remote Developers, Free For The First Week

Connect with quality remote developers and code your ideas away.

X