How to Create WordPress Plugins Step by Step for Beginners

Ready to take your WordPress skills to the next level? This guide will walk you through creating WordPress plugins, step by step.

Creating your own plugins can be an excellent choice if you're a WordPress user wishing to improve your skills and customise your website even further. This guide will walk you through the entire process of creating a plugin, including planning, coding, testing, and publishing. Whether you're a newbie or an experienced developer, you'll find useful advice and tools to help you design high-quality WordPress plugins.

What Are WordPress Plugins?

Before you start making your own WordPress plugins, it's necessary to understand what a plugin is and how it functions. A plugin is essentially a piece of code that adds new functionality to your WordPress site. Contact forms, social media sharing buttons, and custom post kinds are examples of plugins. They can also change existing functionality, such as modifying the look of your website or optimising it for search engines. Understanding the fundamentals of plugins can assist you in developing effective and helpful plugins for your website.

How To Create a Simple WordPress Plugin

Set up your development environment before you begin working on your WordPress plugin. Installing a local server environment, such as XAMPP or MAMP, will allow you to run WordPress on your own computer. You'll also need a coding editor, such as Sublime Text or Visual Studio coding, to write and edit your plugin code. Once your development environment is set up, you can begin working on your plugin!

What Will Your WordPress Plugin Do?

The first step is to identify the problem or functionality that you wish to add to WordPress. You can begin creating your plugin code once you have a clear notion of what you want to do. To guarantee your plugin is secure, efficient, and compatible with other plugins and themes, best practices and WordPress code standards must be followed. Don't forget to thoroughly test your plugin before releasing it to the public!

Start Coding Your WordPress Plugin

It's time to start coding once you've discovered the problem you want to solve or the functionality you want to add to WordPress. This can be a difficult process, but there are numerous tools available to assist you. WordPress has an extensive documentation area that covers subjects ranging from fundamental plugin development to sophisticated issues such as custom post types and taxonomy. You can also find online courses and code snippets to help you get started. Remember to thoroughly test your plugin and adhere to best practices to ensure that it is secure, efficient, and compatible with other plugins and themes.

Testing and Debugging WordPress Plugins

A critical stage in the plugin development process is testing and troubleshooting your plugin. Before making your plugin public, you should extensively test it to ensure that it works as intended and does not interfere with other plugins or themes. To assist you in finding and fixing any mistakes or flaws in your code, you can utilise tools like the WordPress Debugging Plugin or the WP_DEBUG constant. It's also a good idea to test your plugin on a variety of devices and browsers to ensure that it functions properly across platforms. After properly testing your plugin, you can make it public and continue to monitor and update it as needed.

Publishing WordPress Plugins

Once you are happy with your plugin and if you want to publish it to the WordPress Plugin Directory you must first read through the plugin guidelines  which says to keep your code human-readable, comment your code and prefer WordPress functions instead of PHP functions when possible.

WordPress uses Subversion SVN for source control. Before you get access to the repository you must first submit your plugin for manual approval . You should also include a readme.txt which has all the details about the plugin, author, URL, description and so on. You can download a readme.txt template  on the WordPress site.

You can add banners, icons and screenshots which will display on the plugin homepage. These are specially named files which live in the assets directory within your plugin directory.

• For banners create a JPG or PNG called banner-772×250.(jpg|png) for the regular banner and banner-1544×500.(jpg|png) for retina quality.
• Icons should be named icon-128x128.(png|jpg) for normal display and icon-256×256.(jpg|png) for retina.
• Screenshots are named sequentially starting with screenshot-1.(png|jpg)

How To Create New WordPress Shortcodes

WordPress Shortcodes are a great way to add dynamic content to posts, even for the non-techy. They can be as simple or complex as you need. I'm going to start with a very basic WordPress shortcode, one that is very easy to implement. It will display a YouTube video in the post, inline.

This code should go in your theme functions.php or plugin file depending on if you want the shortcode in the theme you are developing.

What are WordPress Shortcodes?

As a security precaution, running PHP inside WordPress content is forbidden. To allow dynamic content, Shortcodes were introduced in WordPress 2.5. Shortcodes are macros that can be used to perform dynamic interactions with the content. i.e. creating a gallery from images attached to the post or rendering a video.

Built-in WordPress Shortcodes

There are several shortcodes that WordPress provides already. You may have already seen and used them.

1. [caption] - allows you to wrap captions around content
2. [gallery] - allows you to show image galleries
3. [audio] - allows you to embed and play audio files
4. [video] - allows you to embed and play video files
5. [playlist] - allows you to display a collection of audio or video files
6. [embed] - allows you to wrap embedded items

How to Create Custom WordPress Shortcodes

Shortcodes are added to WordPress by adding an action to the list of shortcodes. This is done using the add_shortcode function in much the same way as you add an action to a hook.

Let's first create the function that will handle our shortcode.

function youtube_shortcode($atts, $content = null)
{
  extract(shortcode_atts(array('id' => ''), $atts));
  return '<iframe width="640" height="360" src="http://www.youtube.com/embed/'.$id.'?feature=player_detailpage" frameborder="0" allowfullscreen></iframe>';
}

This function is going to create a string that contains the embedded YouTube code (taken from the YouTube site) and it will replace the video ID with the PHP variable $id. The $id variable gets its value from the shortcode attribute id. Shortcodes must always return the value, not echo it.

The shortcode function takes in two parameters. $atts will hold the attributes passed in, for example id and $content contains any text that is between the start and end tags of the shortcode. In this first example, the shortcode has no end tag.

The extract method and the shortcode_atts function will convert the attribute values into PHP variables. In this example, it will create a $id variable which you can use to access the values passed into the id attribute. The array passed into shortcode_atts holds the default values.

extract(
  shortcode_atts(
    array(
      'id' => '123'
      'title' => 'Test Plugin'
    ),
    $atts
  )
);

Is a much neater way of writing

if (isset($atts['id']) $id = $atts['id'] else $id = '123');
if (isset($atts['title']) $title = $atts['title'] else $title = 'Test Plugin');

The return statement is going to return an HTML string containing the full markup that the shortcode will be replaced by. In this examples [youtube id=""] will be replaced by youtube iframe.

The final step is to register the new shortcode so WordPress knows what to do when it sees it in a post. To do this we call the add_shortcode function, specifying the parameters that the shortcode we want to create is called "youtube" and the function that will handle the result is "youtube_shortcode".

add_shortcode('youtube', 'youtube_shortcode');

And that is about it for this basic example. I said it easy! To use this shortcode once it is added to the file, simply create a post (or edit an existing one) and add the shortcode to the content:

[youtube id="{INSERT_ID_HERE}"]

You can get the YouTube video ID from the URL in the address bar. It will look something like this:

When you view the post, this code will be replaced with the HTML in the youtube_shortcode function and you will hopefully see the YouTube video.

You can also add buttons to the shortcode in the editor to make it even easier. There is a great tutorial on WP Tuts+ , so I don't think I need to explain it again here.

Using Custom Fields in Plugins and Themes

One of the many features of WordPress you may have noticed whilst writing posts is the Custom Fields section that appears at the bottom of the new post screen. This is a very powerful feature allowing additional information to be attached to a post. WordPress Custom Fields is a method of storing information about a post, but not contained within the post itself (similar to categories and date stamps).

Custom fields have a name and a value. WordPress remembers previously used field names and can be selected in the drop-down list. You can also create a new field by typing the name into the text box provided. The "value" text area can contain any data you wish, from a single number or string to a whole paragraph or comma-separated list.

In this article, I will show you how I use custom fields on my blog to show image thumbnails on some posts.

Create or Modify an Existing Post

Create a new post as you would normally, or modify an existing post, scroll down to the bottom and find "Custom Fields". You may have to click on the + symbol to expand the full contents.

Create a new field called "pictures", and enter a comma-separated list of URLs. For this example, I will use "/images/icons/icon_lonewolf.jpg,/images/icons/icon_question.jpg". You will need to change these to images that exist on your website.

When you click on Add your new field will appear above and flash yellow. If it flashes red then there was some problem and an error will be displayed.

Save your post and view it, notice there is no mention of the custom field. That is because we need to tell WordPress what to do with the data before it is shown.

Modify your Plugin Theme

Now you need to modify your theme to process your custom fields.

In index.php (or any other file containing "the loop") we will retrieve the custom field and process it. I will use the default themes index.php as the example here.

"The Loop" in the default theme.

<?php 
  while (have_posts()) : the_post(); ?>
    <div class="post" id="post-<?php the_ID(); ?>">
      <h2><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>
      <small><?php the_time('F jS, Y') ?> <!-- by <?php the_author() ?> --></small><br/><br/>
      <div class="entry">  
        <?php the_content('Read the rest of this entry >'); ?>
      </div><br/><br/>
      <p class="postmetadata"><?php the_tags('Tags: ', ', ', '
'); ?> Posted in <?php the_category(', ') ?> | <?php edit_post_link('Edit', '', ' | '); ?>  <?php comments_popup_link('No Comments', '1 Comment', '% Comments'); ?>


    </div>
  <?php endwhile; 
?>

Let's get the value of our field. Before the div containing the "rest of the entry" tag, add these lines:

<?php
      $pictures = get_post_meta($post->ID, "pictures", true);
      echo $pictures;
?>

The first line will get the custom field called "pictures" for the current post as indicated by $post->ID You can change this id to any post number to get the custom field for that post. The second line simply outputs it to the screen. When you view your post now you should get back the value of your custom field you entered previously.

Now we need to do something useful with this custom field so let's add a few more lines to parse and output the images. Your finished script should look like this:

<?php
      $pictures = get_post_meta($post->ID, "pictures", true);
      /check that we have a custom field
      if ($pictures != "")
      {
        / Separate our comma-separated list into an array
        $pictures = explode(",", $pictures);
        /loop through our new array
        foreach ($pictures as $picture)
        {
          echo "<img src='" . $picture . "' />";
        }
      }
?>

After retrieving the custom field, we need to check that we have some data otherwise posts without images will have script errors in them. Next, we use the explode function to split out a comma-separated list into an array of strings, then loop through all the array items in a foreach loop, outputting the picture to the browser in an img tag.

If all goes well you will now have two images in your post.

Clickable Thumbnails From WordPress Uploads

WordPress provides the ability to upload images and automatically generate thumbnails. There is a section where you can insert thumbnails or links into the body of the post. One of my clients did not wish to have the image code within the body but in a separate section. He also wanted to prevent images from showing in the RSS feeds. WordPress does not know what uploaded files are associated with a particular post, and you may wish to include attachments from another post, so the above method has been used and modified so that a given set of uploaded images can be displayed per post.

This code snippet assumes that images are uploaded using the standard file uploader.

When a file is uploaded, click on the edit link and you will see the URL listed in a read-only text box. We are interested in the last part of the URL, ignoring the static, so copy everything after uploads (e.g. "2008/01/my-sample-image.jpg")

Copy and paste this value from the URL field into a custom field called "pictures", if there is more than one image you wish to show, repeat the steps for each image and separate them with a comma. They should all be contained within the one-picture custom field.

You can also use the "browse all" tab to go through all uploaded images from the past. The code within the WordPress theme template should go like this within the loop:

<?php
  $pictures = get_post_meta($post->ID, "picture", true);
  if ($pictures != "")
  {
    $pictures = explode(",", $pictures);
    foreach ($pictures as $picture)
    {
      / convert image.jpg to image.thumbnail.jpg
      $thumbnail = str_replace(".jpg", ".thumbnail.jpg", $picture);
      / output a thumbnail linked to the large image 
      echo '<a href="/content/uploads/'.$thumbnail.'"><img src="'.$thumbnail.'"></a>';
    }
  }
?>

Obviously, this code needs to be changed for your needs/template and the image tag needs width, height and alt tags to be W3C compliant but this should give you a head start.

How It Works on my Blog

Using a recent blog post about our new kitten as an example, the custom field holds the values:

pets/img_3832,pets/img_3886,pets/img_3894

The images and thumbnails have been uploaded onto my server's file system and the photograph details are stored within a database. The custom fields are then parsed by the following code:

<?
    $images = get_post_meta($post->ID, "pictures", true);
    $count = 0;
    if (strlen($images) >0)
    {
      echo "&amp;nbsp;

<span style="padding-left:8px; font-size:80%">Attached Thumbnails:</span><br/><div class="box">";
      $images = explode(",",$images);
      foreach($images as $image)
      {
        $query = "SELECT * FROM XXXXXXXX WHERE XXXXXXXX = '$image' LIMIT 0,1";
        $result = executeQuery($query,"XXXXXXXXXX");
        $nt=mysql_fetch_array($result); 
        $title = $nt[photoTitle];
        $thumb = $nt[thumbnail];
        echo '<a href="/pictures/'.$image.'/"><img src="/' . $thumb . '" alt="' . $title . '" title="' . $title . '" class="thumbnail" /></a>';
        / 4 images per row
        if ($count == 4)
        {
          echo "<br/>";
          $count = 0;
        }
        else
        {
          $count++;
        }
      }
      echo "</div>";
    }
?>

Creating Options/Settings/Configuration Pages for a Plugin

Creating WordPress Sidebar Widgets

WordPress Sidebar Widgets are a form of a plugin that can be used to add functionality and content to your website pages, usually in a sidebar. The WordPress API greatly simplifies the creation of WordPress widgets, and all widgets using the API benefit from settings pages, multiple instances and more.

At the most simplistic level, WordPress widgets now take the form of a Class (object orientation) which contains 4 functions. The basic structure of a WordPress widget is shown below.

class Sample_Widget extends WP_Widget 
{
  function Sample_Widget() { }
  function form($instance) { }
  function update($new_instance, $old_instance) { }
  function widget($args, $instance) { }
}
add_action( 'widgets_init', create_function('', 'return register_widget("Sample_Widget");') );

In this example, we are going to create a WordPress widget called "Sample_Widget" and tell PHP that it is going to extend (inherit from) the WP_Widget class. It is the WP_Widget class which makes your widget function, has settings and allows multiple instances so you don't have to.

You will need to rename every occurrence of "Sample_Widget" with the name of your widget.

The first method, Sample_Widget() in the example, is the class constructor which contains the code that is run every time the widget is loaded - either when activated, used on a page, updated and so on.

The second method, form(), contains the settings page on the Wordpress Widgets administration screen (Appearance -> Widgets). This method is always called form and never changes. Within this function, you add all the controls that will appear when the widget options are expanded. See below for an example.

The third method, update(), is called when the user clicks on "save" from the settings page on the Widgets administration screen. This automatically handles saving to the database of options. You can use this function to validate information before being saved. See the example below for basic operation.

Finally the widget() function contains the code that will be rendered to the sidebar when the widget is added. This is what your visitors will see when viewing your page.

Let's have a look at a very simple example "Hello World" widget.

Custom WordPress Widgets Example

This example shows how to create a widget which outputs "Hello World" to the sidebar. It also demonstrates adding a user-configurable title setting to the widget in the administration panel, saving and retrieving user settings and displaying the widget.

It shares the same structure as the basic example above but has been expanded to include the entire widget code. Simply copy and paste this into a text file called SampleWidget.php and upload it to your plugins folder. You can then activate and play around with it.

<?php
/*
Plugin Name: Sample WordPress Widget
Plugin URI: https://timtrott.co.uk/
Version: 1.0
Description: How to create a WordPress Widget
Author: Tim Trott
Author URI: https://timtrott.co.uk/
*/
 
class Sample_Widget extends WP_Widget
{
  function Sample_Widget()
  {
    $widget_ops = array('classname' => 'Sample_Widget', 'description' => 'My Sample Widget Description');
    $this->WP_Widget('Sample_Widget', 'My Sample Widget', $widget_ops);
  }
 
  function form($instance)
  {
    $instance = wp_parse_args((array) $instance, array( 'title' => '' ));
    $title = $instance['title'];
?>
  <label for="<?php echo $this->get_field_id('title'); ?>">Title: <input class="widefat" id="<?php echo $this->get_field_id('title'); ?>" name="<?php echo $this->get_field_name('title'); ?>" type="text" value="<?php echo attribute_escape($title); ?>" /></label>


<?php
  }
 
  function update($new_instance, $old_instance)
  {
    $instance = $old_instance;
    $instance['title'] = $new_instance['title'];
    return $instance;
  }
 
  function widget($args, $instance)
  {
    extract($args, EXTR_SKIP);
 
    echo $before_widget;
    $title = empty($instance['title']) ? '' : apply_filters('widget_title', $instance['title']);
 
    if (!empty($title))
      echo $before_title . $title . $after_title;;
 
    / Do Your Widgety Stuff Here...
    echo "<h1>Hello World</h1>";
 
    echo $after_widget;
  }
}
add_action( 'widgets_init', create_function('', 'return register_widget("Sample_Widget");') );

?>

In the Sample_Widget function (technically called the constructor) I created some configuration options which will help Wordpress (and the users of your widget) show a friendly title and description.

The form method takes in the current settings as the $instance so you can use this to output the current settings to the user so they can update.

The update method does not do anything too complex, if you add another setting property add a line in here for it otherwise it won't get updated.

Finally, the widget method will generate the output for the widget. Notice the $args parameter, this is the same as the $args parameter on the old-style widgets. $instance contains the settings for this particular widget. If you need help on the $before_widget etc... please see the previous tutorial for explanations.