Pro Blog Design

WordPress is an awesome publishing tool, and one of the best features is its flexibility to customize its core functions with plugins. The simplest definition of a plugin is:

A plugin is a snippet of code which is used to extend the functionality of WordPress.

And one of the nicest things about plugins is that the barrier to entry is extremely low. It takes very little technical knowledge to make your first plugin!

What Will We Learn In This Tutorial?

Let’s take a look at the key points of the tutorial.

• Learn key tools necessary to set up a plugin development environment
• Develop our own simple plugin which will insert an author’s info section in the end of each article.
• Look at some core plugin tools, like hooks and conditional comments.
• Share some great resources for plugin development.

But before we get started, let’s just look at a few reasons you might want to read this post.

Why develop a plugin?

Skip the Repetitive Tasks

For example, to avoid the inconvenience of inserting the link of author’s page manually each time while publishing a post, it would be more beneficial if this subroutine is embedded in a plug-in that will involuntarily perform the task

Earn Money

Not everyone is a code junky. There are a lot of customers who would prefer to pay a handsome amount to some developer for building a plugin that will meet their needs.

Get Back Links

Everyone knows that backlinks are cash of online world. If you have develop a nice plugin that creates some buzz in the community, you’ll get plenty of people linking back to you.

For Fun!

Coding can be quite enjoyable, especially when the end product is a feature that you yourself have always wanted. And it doesn’t hurt to be giving back to the community either!

Now, onto the tutorial!

Setting up the Environment

This first step isn’t essential, but definitely recommended as it will speed up your development time immensely!

We’re going to install WordPress on our own computer, so we don’t have to worry about uploading files to a webserver every time you change something. Thankfully, this is pretty easy to do! Xampp can be used for PC and MAMP for Mac.

After this grab a copy of WordPress and install it on your new localhost server. And you can use your favorite text editor (I’m using Notepad++ because of its nice syntax highlighting).

Mozilla Firefox with Firebug add-on installed is also a necessity. Firebug is an awesome tool for developers; it allows editing and debugging code in real time.

Resources:

• Installing Xampp and WordPress in windows
• Installing MAMP and WordPress in MAC

Now let’s mess with some code.

Coding The Plugin

We need to choose a unique name for our plugin. If it is going to be released to the public, it should not match any plugin in the WordPress repository. I have chosen the name “PBD Author Info” for our tutorial.

The first step in creating the plugin is to create a folder with the plugin name in the wp-content/plugins folder. In our case, it is named PBD_Author_Info.

Now, we create the core file which contains standard plugin header information. The file can be named anything you want as long as it is in the plugin’s own directory.

If the file is placed directly into wp-content/plugins folder (i.e. You skipped out the folder step above!), then it must have a unique identity. In our case, let’s make a file called “PBD_Author_Info.php” containing the following code.

1
2
3
4
5
6
7
8
9

<?php
/*
Plugin Name: PBD_Author_Info
Plugin URI: http://www.problogdesign.com/tag/wordpress/
Version: 0.1
Description: A Plugin that will add an author info section at the end of your posts.
Author: Saad Hameed Bassi
Author URI: http://www.crispytech.com
*/

Line 1 just means that we’re going to write some PHP code. The remaining code is enclosed in /* */, because it’s a comment (Not executable code). This is the standard plugin information header. WordPress would be unable to recognize the plugin without this info.

Now if you visit the installed plugins page, WordPress is able to recognize the plugin.

We can activate the plugin now if we like, but of course it’s not going to do anything because we haven’t taught it to yet! Let’s fix that.

We are going to define a function called author_info which calls the section holding author info.

1
2
3

function author_info()
{
?>

Now we will add some regular old HTML and WordPress template tags to build our author info section.

1
2
3
4
5

<div class="author_info">
<?php if (function_exists('get_avatar')) { echo get_avatar(get_the_author_email(), '65' ); }?>    
This post was written by <?php the_author_posts_link(); ?>.<br />
<?php the_author_meta('description'); ?>
</div>

The functionality has been characterized using WordPress template tags. The three template tags I used here are:

1. get_the_author_email() grabs the author email from his profile page.
2. the_author_posts_link() shows author’s public name with a link to all the posts published by the author.
3. the_author_meta('description') is used to pull out the author’s bio from his profile page.

Lastly, let’s close up our function>

1

<?php } ?>

On top of that, we’re going to add in some CSS styles to control the appearance of our HTML. We’ll need to use the PHP “echo” command to tell the plugin to write the CSS to the webpage.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

<?php
function stylesheet() 
{
echo "
<style>
.avatar
{
float:left;background-color: #9A9B9B;padding: 4px;margin: 0 4px 0 0;display: inline;
}
.author_info
{
color: #666;background: #DDDDDD;padding: 8px;margin:0 0 6px 0; 
}
</style>
";
}

Now we will define the main function called display_author_info. This function is the one that is loaded when the plugin file is loaded, and we’re going to load the 2 functions we’ve just written from this one.

1
2
3
4
5

function display_author_info()
{
if (is_single() )
return author_info().stylesheet();
}

is_single simply conveys to WordPress to execute our function only when it is showing a single post. is_single is one of the core WordPress conditional tags, there are a number of others you can use in your plugins.

At the moment, we can test the output of plugin by adding the following code to our single.php file after the content:

1

<?php if (function_exists(display_author_info)) echo display_author_info; ?>

The above code simply calls our plugin function.

The plugin is almost ready, but we could make it more user friendly by automatically adding the plugin code for users, so they don’t have to edit their theme files at all.

WordPress hooks provide a way of doing this. Hooks provide a way of telling WordPress to automatically load our plugin at a certain point while it is building the rest of the webpage.

There are two types of Hooks. According to the WordPress Codex:

Actions are the hooks that the WordPress core launches at specific points during execution, or when specific events occur. Your plugin can specify that one or more of its PHP functions are executed at these points, using the Action API.

And the definition of Filters according to WordPress codex is

Filters are the hooks that WordPress launches to modify text of various types before adding it to the database or sending it to the browser screen. Your plugin can specify that one or more of its PHP functions is executed to modify specific types of text at these times, using the Filter API.

We will use a filter hook called comments_template to hook the comments on a single post. This filter will ensure that WordPress launches display_author_info when it is loading comments template and append the author info section between the post content and comments.

1
2

add_filter('comments_template', 'display_author_info');
?>

Our Finished Code

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41

<?php
/*
Plugin Name: PBD_Author_Info
Plugin URI: http://www.problogdesign.com/tag/wordpress/
Version: 0.1
Description: A Plugin that will add an author info section at the end of your posts.
Author: Saad Hameed Bassi
Author URI: http://www.crispytech.com
*/
function author_info()
{
?>
<div class="author_info">
<?php if (function_exists('get_avatar')) { echo get_avatar(get_the_author_email(), '65' ); }?>    
This post is written by <?php the_author_posts_link(); ?><br>
<?php the_author_meta('description'); ?>
</div>
<?php
}
function stylesheet() 
{
echo "
<style>
.avatar
{
float:left;background-color: #9A9B9B;padding: 4px;margin: 0 4px 0 0;display: inline;
}
.author_info
{
color: #666;background: #DDDDDD;padding: 8px;margin:0 0 6px 0; 
}
</style>
";
}
function display_author_info()
{
if (is_single())
return author_info().stylesheet();
}
add_filter('comments_template', 'display_author_info');
?>

And that is our basic plugin complete. It doesn’t do a great deal, certainly not anything that you couldn’t do easily enough in your theme anyway, but hopefully we’ve demonstrated some of the core features of plugin development to you!

Resources for More Complex Plugin Development

Now that you’ve found your feet with plugins, it’s time to start building that up knowledge. Here are some of the best recommendations we can give you, in 3 categories.

1. Beginner
2. Intermediate
3. Advanced

Beginner

Writing a plugin – WordPress Codex

This ultimate resource for Newbies. The extensive WordPress codex describes the development procedure in detail. You may find it a little dry though, and other resources which work through real examples may be more useful. The codex will always be an invaluable reference while you’re coding though, nowhere else has anything like the amount of information the codex has on different WordPress functions!

Free e-Book: How to Write a WordPress Plugin

Very Useful ebook for WordPress plugin developers. This twelve part series illustrates the process from creation of a plugin, right through to promoting it. Well worth working through if you have the time!

Developing Plugins for WordPress (Singapore PHP User Group 2008)

A video presentation from Lester Chan (one of the best known plugin devs around!) on developing a WordPress plugin.

Your First WordPress Plugin

This screencast shows you how to make a very simple plugin which will replace foo with bar. A beginner’s guide from Mark Jaquith, who is a core developer for WordPress.

A Crash Course in WordPress Plugin Development

A simple tutorial explaining the implementation a Digg button and adding some formatting to posts.

Intermediate

The slides from Matt Martz’ presentation at WordCamp NY09.You can also watch the video here.

Anatomy of a WordPress Plugin

This article instructs on how to build a widget plugin that queries a given number of blog posts scheduled for the future.

Wordpress Plugin Development Tips And Tricks

A very handy article for WordPress plugin developers about some useful tips and tricks.

Top 10 Most Common Coding Mistakes in WordPress Plugins

Ozh, a very famous wordpress plugin developer writes about how to make your plugin error proof from the most common errors.

Advanced

How To Design And Style Your WordPress Plugin Admin Panel

An advanced tutorial on how to style your WordPress plugin settings panel.

Make your WordPress plugin talk AJAX

Some nice examples of using Ajax in WordPress plugins by Irish WordPress Developer, Donncha O Caoimh.

Mastering Shortcodes

A very useful guide on how to implement shortcodes in plugins.

Create a custom WordPress plugin from Scratch

This tutorial elaborates the development of a plugin that shows random products from an external OSCommerce database.

Create a Plugin with its Own Custom Database Table

A tutorial covering the creation of a plugin which has its own database table. Follow this tutorial if you want to learn how to validate a database table if your plugin is writing entries to it.

Conclusion

The guide above should give you the most basic steps to building your own plugin. It really is that easy to start!

And hopefully with all of the resources we’ve listed, you’ll be able to expand that into a much more complex plugin someday! If you know of a great tutorial or plugin resource we’ve left out, share it with us!