WordPress Plugin Development, Part 1

WordPress is an extremely powerful content management system, and while we are drupal heads over here at SOTC, WordPress is still to be loved and respected. It offers not only users, but also developers an easy to use system that allows easy content construction and management. Today, using WordPress 3.0.1, we are going to make a very simple WordPress plugin that will introduce you to the basics of developing in the WordPress system.

The Rick Rolling craze has come and gone. It was fun while it lasted, but no one really seems to want to pull a good Rick Roll these days….that is until our WordPress plugin comes to life. That’s right, I am going to take you through the creation of a Rick Roll WordPress plugin.

Before we start diving into things too deep, lets start with a “shell”. This is how our plugin will start:

<?php
/*
Plugin Name: Rick Roller
Plugin URI: http://www.switchonthecode.com/
Description: Rick Roll Shortcode
Version: 1.0
Author: The Hairiest
*/

class RickRoll
{
  private $vidURL = "http://www.youtube.com/watch?v=4R-7ZO4I1pI";
       
  function RickRoll()
  {    
  }
}

$rickRoll  = new RickRoll();
?>

As you can see, we have something very basic to start with. The important thing to note at this point is the comment at the top, which supplies WordPress with information on the plugin, so it is important to always remember to put that comment in. Other than that, we have pretty much a standard PHP class. Just don’t forget to initiate a new RickRoll object the bottom of the file.

So lets imagine that you want to insert a tricky RickRoll link into your post. All you want to do is use a tag, say [RickRoll], to insert a link to a video on YouTube. This is all too simple. All we have to do is add a function to our class to register a new shortcode event with wordpress. First we have our shortcode function, and remember we are adding this to our RickRoll class:

function RR_Shortcode($atts)
{
  $rickRoll  = "<a href=\"". $this->vidURL . "\">" . $atts[‘title’] . "</a>";
  return $rickRoll;
}

As you can see, this seems almost too simple. However, we must also remember that all we are doing is replacing some text, so nothing complicated is needed. Basically what we are doing with this function is returning what the tag will be replaced with. In the case of the tag attributes we can set, those are passed into the function by WordPress itself. Now all we have to do is tell WordPress that we have a new “shortcode” for it to filter. We do this by adding a simple line to our class constructor:

function RickRoll()
{      
  add_shortcode(‘rickroll’, array(&$this, ‘RR_Shortcode’));
}

That’s it. You may, however, want to take notice at the array we are passing as the second argument. With a small function and one line in our constructor we have created our WordPress shortcode filter. With this plugin we can now write:

[rickroll title="Not a Rick Roll"]

And it turns into:

<a href="http://www.youtube.com/watch?v=4R-7ZO4I1pI">Not a Rick Roll</a>

Pretty tricky, no? But you know, I am not really satisfied with having to input all my Rick Rolls. What if I just wanted to take every link in my post and turn it into a rick roll? Well, thankfully for mischievous people everywhere, we can easily accomplish this with filters. Again, we have to start with a function addition to our RickRoll class:

function Replace_RR_Content($content)
{
  $anchors = array();
  preg_match_all(‘/<a.*?>.*?<\/a>/x’, $content,
    $oldAnchors, PREG_PATTERN_ORDER);
               
  foreach($oldAnchors as $anchor)
  {
    $newAnchor = preg_replace(‘/href=.*?/’,
      "href=\"". $this->vidURL . "\"", anchor[0]);
    $content = str_replace($anchor, $newAnchor, $content);
  }
       
  return $content;
}

You probably can already tell that this is another super simple function, and you would be right. First WordPress passes the function the post content, then we find all the anchor tags inside this content. Then we replace the href‘s of all the anchor tags, finally returning the content back to WordPress for display.

However, just like before, WordPress needs to know that we want this function to filter our post content. This requires another addition to our class constructor:

function RickRoll()
{      
  add_shortcode(‘rickroll’, array(&$this, ‘RR_Shortcode’));
  add_filter(‘the_content’, array(&$this, ‘Replace_RR_Content’));
}

With this addition our rick rolling filter is complete. Now all of the anchor tags in a post will be replaced. For example:

[rickroll title="Not a Rick Roll"]

<a title="Some Link Again" href="http://codex.wordpress.org/Function_Reference/add_filter" target="_blank">Link 1</a>
<a class="wp-caption-dd" title="Another Link!" href="http://www.spaweditor.com/scripts/regex/index.php" target="_blank">Link 2</a>
<a class="alignright" title="Some Link" href="http://www.php.net/manual/en/function.preg-replace.php" target="_blank">Link 3</a>

Becomes:

<a href="http://www.youtube.com/watch?v=4R-7ZO4I1pI">Not a Rick Roll</a>

<a title="Some Link Again" href="http://www.youtube.com/watch?v=4R-7ZO4I1pI" target="_blank">Link 1</a>
<a class="wp-caption-dd" title="Another Link!" href="http://www.youtube.com/watch?v=4R-7ZO4I1pI" target="_blank">Link 2</a>
<a class="alignright" title="Some Link" href="http://www.youtube.com/watch?v=4R-7ZO4I1pI" target="_blank">Link 3</a>

Quite a devious plugin indeed. Yet somehow I feel we need more Rick Astley on our blog. I think it is about time we pull out all the stops and put a rick roll video directly in every post, embed Rick Astley into the top of everything. And once again, this is all too easy. Here is the function to add this time around:

function Add_RR($content)
{
  $rrVid = <<<rrvid
    <object width="640" height="385">
      <param name="movie"
       value="http://www.youtube.com/v/4R-7ZO4I1pI?fs=1&amp;hl=en_US"></param>
      <param name="allowFullScreen" value="true"></param>
      <param name="allowscriptaccess" value="always"></param>
      <embed src="http://www.youtube.com/v/4R-7ZO4I1pI?fs=1&amp;hl=en_US"
        type="application/x-shockwave-flash"
        allowscriptaccess="always" allowfullscreen="true" width="640"
        height="385"></embed>
    </object>
rrvid
;
   
    $content = $rrVid . $content;
   
    return $content;
  }

This is the same basic concept as the other function, except, we are going to add this as an action rather than a filter. This could be accomplished as a filter, but actions are extremely important to WordPress, so we might as well go over how to add an action as well. Here is what our final constructor will look like:

function RickRoll()
{      
  add_shortcode(‘rickroll’, array(&$this, ‘RR_Shortcode’));
  add_filter(‘the_content’, array(&$this, ‘Replace_RR_Content’));
  add_action(‘the_content’, array(&$this, ‘Add_RR’));
}

As you can tell, adding an action is exactly like adding a filter. The main difference is really how you implement them. Filters are meant to….well, filter the data, while actions extend normal WordPress processes. In this case our filter and action are about the same functionally, but our action is actually called before the the_content() function is called in WordPress. With our filter, we are merely passed the post content to modify. It seems similar, but when you start building more complex plugins, the difference becomes more apparent.

With this final addition, we add a rick roll in every post. So a post like so:

[rickroll title="Not a Rick Roll"]

<a title="Some Link Again" href="http://codex.wordpress.org/Function_Reference/add_filter" target="_blank">Link 1</a>
<a class="wp-caption-dd" title="Another Link!" href="http://www.spaweditor.com/scripts/regex/index.php" target="_blank">Link 2</a>
<a class="alignright" title="Some Link" href="http://www.php.net/manual/en/function.preg-replace.php" target="_blank">Link 3</a>

Transforms into:

<object width="640" height="385">
 <param name="movie"
  value="http://www.youtube.com/v/4R-7ZO4I1pI?fs=1&amp;hl=en_US"></param>
 <param name="allowFullScreen" value="true"></param>
 <param name="allowscriptaccess" value="always"></param>
 <embed src="http://www.youtube.com/v/4R-7ZO4I1pI?fs=1&amp;hl=en_US"
  type="application/x-shockwave-flash"
  allowscriptaccess="always" allowfullscreen="true" width="640"
  height="385"></embed>
</object>

<a href="http://www.youtube.com/watch?v=4R-7ZO4I1pI">Not a Rick Roll</a>

<a title="Some Link Again" href="http://www.youtube.com/watch?v=4R-7ZO4I1pI" target="_blank">Link 1</a>
<a class="wp-caption-dd" title="Another Link!" href="http://www.youtube.com/watch?v=4R-7ZO4I1pI" target="_blank">Link 2</a>
<a class="alignright" title="Some Link" href="http://www.youtube.com/watch?v=4R-7ZO4I1pI" target="_blank">Link 3</a>

At this point we are done with our Rick Roll plugin and if all is right, you should have just one php file. Now, in order to use the plugin we have to put it in the WordPress plugin folder. Makes sense, huh? You will find it at your-wordpress-blog/wp-content/plugins. Once you have it in the right place all you have to do is activate it and start using it. Remember, we have a tag [rickroll title="some title"], all links in your content will be replaced with Rick Rolls, and finally our plugin will at a Rick Roll video to all our posts/pages. All you have to do now is make a post.

So this is our rick rolling plugin, in all its silly glory. It wasn’t that difficult, but we did a whole lot with our code, all thanks to the powerful WordPress plugin API. This concludes this tutorial, but just remember, when you need coding help all you have to do is Switch On The Code.

Leave a Reply

Your email address will not be published. Required fields are marked *