WordPress is not the newest or the shiniest way to create a website, but WordPress is established. It powers something like 40% of the internet, which means that there are millions of people using WordPress every day.
To accommodate this massive user base and its needs, numerous plugins have been created and added to the WordPress plugin repository. These plugins are a great way to add additional functionality to WordPress websites, and they are also a great way to earn some money — if you know how to develop them.
WordPress plugin development is not very hard, and whether you’re learning WordPress plugin development because you want to add custom functionality to your own site or because you want to land a lucrative job as a WordPress developer, this guide will certainly be of help to you.
Prerequisite Knowledge
This guide is not about teaching you how to code. We are going to cover what’s involved in developing a plugin for WordPress — the workflow, and how plugins utilize WordPress’ inbuilt functions. Some familiarity with PHP or another programming language will be helpful.
Let’s get started.
Improve Your Development Skills by Learning React With These Amazing Courses!
Basic Concepts For WordPress Development
The following concepts aren’t specific to plugin development. They’ll work anywhere on your WordPress site, and you can add them directly to your theme. That being said, they are really the bread and butter of your plugins, so we’d better take a look at them.
Hooks
There are two types of hooks
- Action hooks – Which attach a function to an action.
- Filter hooks – Which attach a function to some data that’s filtered and passed back to WordPress.
Action Hooks
The gist of an action hook, is they tell WordPress to listen for a specific action and then do something extra when that action happens. For example.
- When the user logs in, save a file to the database.
- When a page loads, change the language of that page to match the user’s region.
- After a file is attached, upload it to an S3 bucket.
All the actions available to you are in the WordPress documentation:
https://codex.wordpress.org/Plugin_API/Action_Reference
The syntax is like this:
The add_action() hook is the first of two action hooks. We’ll get to the other one shortly.
There are more than two arguments but we’ll keep it simple. The first argument is the name of the action that you want to hook into. The second argument is the name of the function you want to run when that action happens. Let’s try it out.
Here’s an action we got from the list we just mentioned. It’s called init.
So we plug the name init into the add_action() hook and create the callback function that’s triggered by this action. Let’s name the callback function dummy_function()
Our dummy_function is very simple. All it does is echo out a line of JavaScript which creates an alert.
If we save and reload, once the page initializes, we get this:
To teach concepts and avoid losing anyone in the syntax we are keeping these examples intentionally simple, but your callback function can do anything you’d like.
We’ll quickly show you something that’s useful. Take a look at this.
- is_page()
- is_user_logged_in()
- wp_redirect()
- home url()
These are all built-in WordPress functions. There’s a ton of them. A large part of WordPress development is knowing a function exists and using it correctly.
The function checks if the current page is called ‘auth’. Then it checks if the user is logged in. If the user is not logged in. If the user is not logged in then the wp_redirect() function will send the unauthenticated user back to the home page. Finally, die() will kill the process. To test it out, create a new page called auth and see what happens when you try to visit it.
That’s it for the add_action() hook let’s look at the other action hook — do_action(). Exactly as the name suggests, do_action() does the action. For example:
‘madeup_name’ isn’t an action in WordPress core. Without the do_action() hook calling it It’s not normally going to run ever. Doing the action, with the do_action hook forces this custom action to occur and in turn, runs this madeup_function().
A lot of WordPress developers don’t properly understand do_action() and add_action(). At first glance, it looks like do_action() is declaring an action and add_action() is invoking it, but that’s not what’s happening. These hooks are well named, so trust the English.
When we typed “madeup name” as the first argument of the add_action hook we created a new action. This new action is attached to “madeup” function, same as always. Later in the code, we invoke the function with do_action().
You can also pass in arguments to a do_action hook. This is extremely powerful because it lets you write reusable hooks.
The WoooCommerce Plugin API for example exposes functionality to other WordPress developers with do_action() hooks. To interact with this plugin, you’re doing the custom action and passing in your own custom arguments.
You can run their do_action() hooks inside your own functions.
https://woocommerce.github.io/code-reference/hooks/hooks.html
Filter Hooks
Filter hooks are used to manipulate data. Typically filters pass in some type of data and you write a function that handles it and returns that data filtered. With filters, you must return a value.
Let’s go through some examples to show you how filter hooks work. Here’s the basic TwentySeven theme.
Nothing special happening just posts outputting content. Now let’s write a basic filter:
The add_filter hook is told to filter the first argument, ‘‘the_content’ which it gets from WordPress. It will then apply our content_filter function. Here’s the result:
The filter is modifying our content and changing it to whatever we return. Replacing content with a fixed string is pointless, but what if we did something like this:
Once we refresh, you can read all about Lorem Sandwich.
This is a silly example, but it hints at tremendous power. We’ve changed dozens of mentions of a single word with a single line of code. If ever there’s a need to change sandwich back to lorem or to macaroni, all we need to do is change one word in the code.
Shortcodes
Shortcodes are snippets that perform a dedicated function on your site. WordPress has 6 built-in shortcodes (use without spaces):
- [ caption ] – allows you to wrap captions around content
- [ gallery ] – allows you to show image galleries
- [ audio ] – allows you to embed and play audio files
- [ video ] – allows you to embed and play video files
- [ playlist ] – allows you to display a collection of audio or video files
- [ embed ] – allows you to wrap embedded items
You can also code your own custom shortcodes.
Say you built a calculator that’s needed all over the site. Rather than copy this code, again and again, a custom shortcode can render that piece of UI straight to the page just by typing a simple [calculator].
Shortcodes can take in arguments too which makes them dynamic and reusable. Let’s show you what we mean. This function returns a string of Lorem Ipsum:
We have the add_shortcode() hook and just like the add_action() hook the first argument is what you want to name the shortcode, and the second argument is the function you want to run when that name is used. Now, to use this all we need to do is type [lorem] in a post or page:
These 7 characters now yield this:
And this [lorem] shortcode can be used on any page or post throughout the site. Obviously, your shortcodes can get way more complicated than returning simple text. The best shortcode will also accept arguments.
Say we wanted to create a shortcode that can dynamically return multiple blocks of Lorem Ipsum by entering a single number as an argument into our shortcode. Something like this.
We can achieve this with the following code:
There are many different ways to go about this, but this works well enough.
It looks more complicated than it is. The extract function is pulling $length out the$atts argument, and passing it into str_repeat.
Your shortcodes can return an entire visual element or pull data from an API. The only limit is your imagination and PHP abilities.
Whether you choose to use shortcodes or hooks to expose functionality is entirely up to you. Woocommerce and other popular WordPress plugins use a combination of both.
How To Develop Plugins For WordPress
Everything we’ve talked about up to this point is relevant to WordPress plugin development.
Hooks and shortcodes will work the same in plugins as they would if you’d coded them straight into your functions.php file. With this in mind, you might be asking why use plugins at all? The one cardinal rule of WordPress development is to never touch WordPress core.
WordPress overwrites everything when it updates. If you edit themes directly, you’ll lose everything. This is why it’s best practice to use child themes and plugins.
Plugins are separate from WordPress core, and this separation avoids the overwriting problem. They can also be shared and added to different sites with ease, or sold in online stores for money. Furthermore, plugins separate code in a logical way. One plugin is concerned with one set of functionality. By using them you keep code tidy and modular.
Let’s quickly run through how to start developing a plugin for your WordPress site. To get started creating a new plugin, follow the steps below:
- Navigate to the WordPress installation’s wp-content directory.
- Open the plugins directory.
- Create a new directory and name it after the plugin (e.g. plugin-name).
- Open the new plugin’s directory.
- Create a new PHP file (it’s also good to name this file after your plugin, e.g. plugin-name.php).
Once you’ve done that go to the WordPress backend and enable your plugin. Let’s build the simplest plugin humanly possible. Take a look at this code.
The comment which starts on line 4 is the minimum header requirement for all WordPress plugins.
Without at least naming your plugin inside this comment WordPress won’t know it’s a plugin and you’ll get an error on install or when you reload your site. Eventually, you’ll want to add authors and version numbers to your plugins. That all goes in the header field. You can read more about header fields here.
And that’s it really. You develop your plugin in this file the same as you would if it was in the functions.php file and WordPress takes care of the rest.
Start Developing WordPress Plugins
WordPress plugin development isn’t hard once you understand how it works. It requires you to understand some basic WordPress-related concepts and to know a programming language, preferably PHP.
However, should you decide to develop plugins that will work great on any platform, consider developing on Common Ninja’s Developer Platform. Not only will your plugin be available on all other e-commerce and website-building platforms (like Shopify, Wix, Duda, Webflow, BigCommerce and many others), but you will also get access to Common Ninja’s Marketplace, marketing services and a helpful community.
