Design a WordPress Plugin in Five Minutes or Less

Tara Hornor

In a recent article on shortcodes, I explained a fast way to quickly add shortcodes to a WordPress site. But, sometimes you need more than a quick-fix, stop-gap solution like shortcodes. That’s where the more powerful option of plugins come into play.

Creating plugins can be incredibly intimidating, though. The first one I made took me a solid day of research, trial and error, and hair-pulling “fun.” But, once I had the plugin in place, it made development so much easier.

More importantly, plugins are relatively safe from clients breaking your WordPress efforts when they run those automatic WordPress updates, upgrade their theme, or even change themes entirely. If you’re looking for a permanent solution to a WordPress design demand, plugins are the answer.

The lazy way to add functionality is to just open up the functions.php file and start adding your code. But, this is destined to get broken. If you’re not directly managing the site, someone is going to get in there and break something. It’s just the way curious clients work, it seems.

So, creating a WordPress plugin gives you the safety of a near-permanent solution (clients have been known to uninstall plugins for some unknown reason). Short of a WordPress upgrade that makes your code obsolete, you don’t have to worry about your new functionality disappearing or getting overwritten.

Step 1: Create Your Plugin File

This is the first and most important point of the process — and actually way easier than most people realize. To demonstrate just how simple creating a plugin can be, here’s a useless plugin that you can write and install by simply copying and pasting this code and uploading it to your site. It doesn’t do anything, but it does properly register and install the plugin with this little bit of code:


<?php

  /*

  Plugin Name: Pure	Awesomeness

  Plugin URI: 	http://www.yoursite.com/pure-awesomeness

  Description: A	Plugin By Which All Plugins Will Be Judged!

  Version: 		1.0

  Author: 		@tarahornor

  Author URI:		http://www.yoursite.com

  License: GPLv3

*/

?>

Try it! Save the above code into a file called awesome.php and upload it in your “Plugins” > “Add New” page within your WordPress site. You’ll get the activation confirmation and you’re done! Now it shows up as one of your installed WordPress plugins…even though it doesn’t do anything useful yet.

Note: You may have to compress the file into a zip folder first, depending upon your version of WordPress.

Now, like I said, this plugin doesn’t do anything yet, so let’s look at how we can get WordPress to actually start doing something useful with our newly-created plugin.

Step 2: Initializing a Function

With a fully-registered plugin, you can now start telling WordPress about the functions that you create. To do this, we use the built-in initialize feature. Just add the following below your code:


add_action('init', 'pure_awesomeness');

function pure_awesomeness() {

  //some code here

}

Again, we’re doing anything just yet, but if you’ve ever written in PHP, you should start getting excited at this point. Once you have PHP functions, you can do anything! But, it’s not as easy to get WordPress to start processing our functions.

I could stop there, but I want to give you some tools you can use to start building on this ultra-simple plugin. The above code isn’t anything, really. Plugins give you the ability to create powerful functionality by linking lots of files and other content into your plugin, but it’s not exactly intuitive.

Step 3: Link Files (Optional)

If you do any kind of web development, you’re going to want to break your functionality up into multiple files. Forms, CSS, and images would all be prime examples of separate files that you may want to reference.

To link additional files, use the WordPress include function:


include( plugin_dir_path( __FILE__ ) . 'pure-awesome-functions.php');

The file we linked to could contain anything — additional functions, forms, etc. Any functions in your included files are now available for you to call whenever you need them!

Step 4: Enqueue CSS (Optional)

Another piece of the plugin puzzle that you may want to implement could be CSS. Whether you are styling your own functions or adding styles to the existing WordPress theme, you must first register the CSS, which WordPress refers to as enqueuing — one of the least intuitive words ever.

The enqueue process takes four steps:

  1. add_action
  2. create a function
  3. register the CSS
  4. enqueue the CSS

Sound like a pain? Yep. But that’s the process and here’s what it looks like in code:


add_action( 'wp_enqueue_scripts', 'pure_awesome_stylesheet' );

function pure_awesome_stylesheet() {

wp_register_style( 'pure-awesome-style', plugins_url('css/cpure-awesome-styles.css', __FILE__), array() );

wp_enqueue_style( 'pure-awesome-style' );

}

A point worth mentioning here is that the CSS file is relative to the location of the file in which you are calling the CSS. In the above example, I am pointing to a CSS folder. This folder would be protected from clients and core updates within the plugin directory.

Let’s step back and look at what’s happening. First we use the add_action to tell WordPress that we’re about to enqueue a script — this could be a PHP file, CSS, or something else. The next argument in the add_action feature is the name of the function that we want to call.

Next, we create the function. This is required for actually doing the work of registering and enqueuing the file.

The wp_register_style simply points to the file location of the CSS file and gives it a short name.

Lastly, the wp_enqueue_style function actually registers the style with WordPress, making it ready to access. You’ll see the CSS file in the <head> section of the site’s source code now.

Step 5: Add Shortcodes (Optional)

Another feature you may want to take advantage of with plugins are the ability to create an infinite number of shortcodes. Using the above include call (from Step 3), you can write any number of functions. If you want to use the function as a shortcode, all you have to do is use the technique in Step 3 to link to the file where your functions live, and then add the following:


add_shortcode( pure_awesome_shortcode', 'pure_awesome_function' );

Put the name of the shortcode as the first argument and the name of the function you want to call as the second argument.

Of course, there are lots of other things to learn about plugins, but hopefully this will give you the confidence to get started by creating your own today and learning as you go.

Good luck and have fun!

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.

  • http://isaactroth.bravesites.com Judith

    Howdy just wanted to give you a brief heads up and let you know a few of the pictures aren’t loading correctly. I’m not sure
    why but I think its a linking issue. I’ve tried it in two different web browsers and both show the same outcome.

    • https://plus.google.com/u/0/117883511520701899763?rel=author Tara Hornor

      Thanks for the heads up! I went back through and double-checked. Should be good to go :)

  • 337design

    WordPress includes user friendly website development features which helps any person to build a website easily. There are many plug-ins already available in WordPress and it’s also easy to design a new plugin. I am really impressed by this step-by-step information to design WordPress plugin. Thank you for your great information.

  • http://www.updateshunt.com Alok Krishali

    I will use the way to create own plugin..thanx for this info..