Coding your first WordPress plugin

Hey Guys,

As you all know, WordPress is one of the most popular, free, open-source content management systems (CMS) out there that powers nearly a quarter of all new websites. The reason for its popularity is the host of features and functionality it offers. You can use it to put up a brand new site without writing a single line of code and customize its look and feel using its extensive theme library, with just a few clicks. That coupled with its plug-in library (which offers over 35,000 third party plug-ins), allows you to extend its out of the box functionality of WordPress as per your requirements, without having to alter the core code. It makes it that easy to modify your site.

However, in some cases, you may need to develop in-house solution for custom functionality if a third party plug-in for it is not available. In this post I’m going to show you how to create your own WordPress plugin.

What is a WordPress Plugin?

So what exactly is a WordPress plug-in? WordPress plug-ins are basically PHP scripts that allow you to modify and extend your site’s functionality. Obviously you can also do this by adding code to your theme’s functions.php* file but that’s not the best way to go about it, since you might update your theme later and if you do that, all your custom code and changes will be lost. With plug-ins though your changes persist. And you can toggle the plug-in on and off in the plug-ins section to revert your changes in case something goes wrong because of the plugin. All your installed plugins are stored in the wp-admin/plugins folder of your site and that’s also where you can create new plugin files.

Now that we have covered the bit about what plug-ins are and why you should use them, let’s move on to how you can create one.

Note *
The functions.php file is contains the code for various purposes such as setting up theme defaults and registering support for various WordPress features. The code in this file is only executed when this file is present the active theme’s directory of your site. The functions.php file is stored with each theme’s sub-directory in the wp-content/themes folder.

Registering your plugin with WordPress

In this tutorial I’ll show you how to create a simple WordPress plugin that adds a few tags to your theme’s head section. Let’s start by first creating a head_tagger.php* file in your plug-ins folder.

Note *
The file name you choose for your plug-in won’t be used for displaying the plug-in in the Plug-ins section but its good practice to relate the file name to the actual name you choose for your plug-in.

Next, add the code below to the file you just created:

This code comment is what WordPress uses to list your plugin in the list of installed plug-ins. You can modify the author and other strings as you like. Now if you save this file and head over to the Plug-ins tab in your site, you’ll see this plug-in installed. It’s inactive by default and you can activate it right from this tab. And that’s it. You haven’t added any actual functionality to the plug-in yet but this is what you need to do to create a plugin and register it in WordPress.

Using WordPress Hooks

Before moving on to the functional part of our plugin, there’s an essential topic we need to cover, and that is Hooks. A hook is a common term used in WordPress that refers to the places where you can add your own code or modify what WordPress is doing by default. WordPress itself provides you with a ton of hooks, but you can also create your own Hooks at any time.

Filters and Actions are two types of WordPress hooks. An Action in WordPress is a hook that is triggered at a specific time when WordPress is running and allows you to take an action. For example, let’s say that you want to share on Facebook whenever a user publishes a post. You can add your action to the publish_post action and in that action, you can share a link to that post on Facebook after it’s published.

Filters are quite similar to Actions with 1 key difference. They are used to get and modify data before it is sent to the database or the browser. It may seem a little confusing at first to figure out whether the hook you need is an action or a filter so just remember this basic difference. When you use a filter, you’re given some data and at the end of your function, you have to return that data after performing your desired operation on it. While with an action, you’re just given a place in WordPress where you can run your code.

You can find a comprehensive list of all the hooks available in WordPress on WordPress Codex. Now that you’ve learnt about hooks and what they are used for, let’s move on to adding the core part of our WordPress plug-in.

Adding functionality to your WordPress Plug-in

First add the following code to your plugin PHP file and then we’ll discuss what this code does.

What we’ve done above is that we’ve hooked the function add_custom_meta_tags to the wp_head action. This hooking is done by the add_action method which takes the first argument as the action name that you want to hook up to, and the second argument is the function you want to execute when that action is being performed. The wp_head hook allows you to add something to the head section of the page. Since WordPress themes are required to add the function wp_head() to the header file, so when the header is requested, all registered hooks to wp_head get called and their output becomes part of the page.

Now save the changes and head back to your site (not the admin section). Let’s see if the WordPress plug-in you created is working correctly. Click the right mouse button and open the webpage’s
source code in your browser to see your page’s HTML. If you look at the head section of your HTML, you’ll see your meta tags added.

Congratulations! You just created your first WordPress plugin.

About Folio3

As a leading software development company, we specialize in developing enterprise and consumer oriented web applications and websites. We also provide website and web application UI and UX design services. If you have a website development or web application development project that you’d like to discuss or would like to know more about our web development expertise, please Contact Us

Blog Post