The official documentation on Writing a WordPress Plugin is great, but it lacks in a usable, clear example of how to write a plugin for WordPress.

All plugins have some required comment fields at the very top of the file. These comment fields give all the information a WordPress blog needs to identify and start using your very own plugin. Let’s take a look at it;

<?php
/*
Plugin Name: Plugin name
Plugin URI: URL to the plugin page
Description: A description of what the plugin does
Version: Version number
Author: Your name, as the author of this plugin
Author URI: URL to your homepage
*/
?>

Now WordPress knows what our plugin is about, let’s add some functionality to it. In my previous example, the plugin was used to correct frequent misspellings to the name of our favorite blogging tool, let’s do that again.

Let’s build your first WordPress plugin

All plugins live (by default) in the /wp-content/plugins/ directory. Create a file called my-first-plugin.php there and paste the comments we’ve just discussed into the file.

<?php
/*
Plugin Name: My very first WordPress plugin
Plugin URI: http://coenjacobs.net/blog/create-WordPress-plugin/
Description: Corrects frequent misspellings in the word: WordPress
Version: 0.1
Author: Coen Jacobs
Author URI: http://coenjacobs.net
*/
?>

As you can see, I’ve added some real values to the comment fields. You can edit them and make it your own plugin by adding your own name and URL’s.

The function that we will use to correct these frequent misspellings is quite simple and uses the PHP function str_replace() to replace certain parts of a WordPress posts content. We will also use a array to select which misspellings we will correct with this plugin to make it really easy to add new frequent misspellings.

Let’s take a closer look at this function;

function correct_misspellings($text)
{
 $misspellings = array(
 "WordPress",
 "WordPress",
 "WordPress",
 );

 $text = str_replace($misspellings, 'WordPress', $text);

 return $text;
}

That’s basically it. All this function does is take the provided variable $text, and have all occurrences of a string inside the array called $misspellings be replaced with the string ‘WordPress’. After that it returns the variable $text.

Hook up our function!

But how does WordPress know how and when to use this function? With WordPress hooks, we can tell WordPress when to use functions from our own plugins. The hook that we will use for this plugin is the_content, the hook that is used by WordPress to show the content of a post. When we run our function on that hook, it will be applied to all posts and that’s exactly what we want. Let’s hook this function up!

add_filter('the_content', 'correct_misspellings');

This little line of code is all we need to make sure our plugins function will be used inside the the_content hook. Using a WordPress function add_filter() we add a new filter to the the_content hook that is provided as the second argument.

Now, the code of our very first plugin is complete;

<?php
/*
Plugin Name: My very first WordPress plugin
Plugin URI: http://coenjacobs.net/blog/create-WordPress-plugin/
Description: Corrects frequent misspellings in the word: WordPress
Version: 0.1
Author: Coen Jacobs
Author URI: http://coenjacobs.net
*/

function correct_misspellings($text)
{
 $misspellings = array(
 "WordPress",
 "WordPress",
 "WordPress",
 );

 $text = str_replace($misspellings, 'WordPress', $text);

 return $text;
}

add_filter('the_content', 'correct_misspellings');

?>

When we save all this code in our my-first-plugin.php file and activate it through the WordPress backend, our plugin will start working immediately and start fixing those irritating misspellings in the name of our favorite blogging tool!

Add some extra misspellings to the plugin

Because we use a array filled with misspellings, we can easily add a new misspelling to be corrected by our plugin, just by adding a new string to the array. When we add a new line of one of these highlighted lines, we can add a new string that contains another misspelling and it will be corrected right away;

function correct_misspellings($text)
{
 $misspellings = array(
 "WordPress",
 "WordPress",
 "WordPress",
 );

 $text = str_replace($misspellings, 'WordPress', $text);

 return $text;
}

Disclaimer

Off course, this plugin isn’t really usable since it replaces all misspellings everywhere throughout the site, even at certain places where you don’t want it to. But it shows that creating a plugin isn’t that hard and can be done in just a matter of minutes.

Sociable is the plugin we all know, that shows those nice little chicklets to allow easy sharing of your articles via social networks and websites. Many people, including myself, aren’t showing these chicklets on their homepage or a static content page, but the stylesheet is loading! Why are we loading that stylesheet on those pages?

The function, including the hook, where Sociable loads its stylesheet is:

function sociable_css() {
 if (get_option('sociable_useiframe') == true) {
 global $sociablepluginpath;
 wp_enqueue_style('sociable-thickbox-css',$sociablepluginpath.'thickbox/thickbox.css');
 }
 if (get_option('sociable_usecss') == true) {
 global $sociablepluginpath;
 wp_enqueue_style('sociable-front-css',$sociablepluginpath.'sociable.css');
 }
}
add_action('wp_print_styles', 'sociable_css');

This function is called at the wp_print_styles hook and will therefor be included in each and every WordPress page, even when Sociable isn’t going to be displayed on that page. When we combine the comparing of the Sociable conditionals to the conditionals of the current page, like Sociable does in the function sociable_display_hook(), we can check if there is a need to include the stylesheet or not.

I think comparing these two conditionals should be implemented in a new function since Sociable needs to check it twice (for a iframe/thickbox and a custom stylesheet), so there is no need for coding this loop twice.

Off course, the Sociable stylesheet (852 bytes) isn’t that big. But this technique is applicable on much more plugins than just Sociable.

The things that I really like about it are the variables that will be printed on a single post page, or single page. Just like Joost, I’ve been struggling while trying to get the right values out of variables, or simply have a little peek inside it to know which variable you are looking for. This theme makes it all a lot easier.

Just like someone posted in the comments, this theme will work great with the Theme Tester plugin. Joost is a real social developer, so please post some more comments on his blog when you find something that he might add to the WordPress Debug Theme.

But today, we can celebrate a little victory and I am quite happy to be able to say that I will discontinue this plugin. Buma/Stemra canceled their actions (read the announcement in Dutch), so paying to embed videos for non-commercial purposes is no longer required. I will publish one more update on this plugin within a couple of days, which will display a message on your administration pages that will recommend you to uninstall this plugin, so it won’t bother you anymore.

Once there is some more action required in this case, I’ll let you guys know and I will continue developing a plugin to block the crawlers on our blogs. Thanks again for sharing it with the world, let’s celebrate our victory!

Today was a sad day for lots of Dutch bloggers. The BUMA/STEMRA announced some new rules for embedding videos from YouTube for example. Starting next year, you have to pay for embedding videos on your blog that contain music that is licensed by BUMA/STEMRA. Yes, you can believe your eyes, we have to pay for embedding videos containing music, kinda crazy isn’t it?

That’s why I started developing the Block Buma Crawler WordPress plugin (aka Teezir Blocker). This plugin is capable of keeping computers outside of your WordPress installation, that are blacklisted via this plugin. You can download the Block Buma Crawler plugin right now, version 0.2 is available. Drop the folder that’s inside the download in your /wp-content/plugins/-folder, activate the plugin and enjoy!

Version 0.1 / 0.2

In it’s current form, the blacklist is managed by me and does only contain IP addresses that we know to belong to BUMA/STEMRA. But in the (near) future, new features will be rolled out to be able to blacklist hostnames and to share the items you add to the blacklist. Off course the blacklist will be moderated to keep it as clean as possible.

Version 0.2 comes with some caching options, to help protect the server that hosts the blacklist. Please update manual if you can, or wait for the automatic updater to allow you to update once WordPress.org hosts this plugin.

Future versions

The version I have been working on today has some more functionalities already, but it’s useless to release functions that I can’t fill a blacklist for right now. I’m spending some more time in making it even better, releasing it when we can use it.

Once we know more on the crawlers, we can add or change features of this plugin too. Time will tell what we can do to stop these crawlers, I honestly don’t know it all right now. Cooperation will be important to make this plugin succeed, so:

Keep me posted!

Please let me know, or simply comment on this post if you have any tips/ideas for this plugin, all comments are welcome! As always, the plugin is free to download and use, but you can always donate if you like my work!

You can follow this blog via RSS, or follow me as @coenjacobs on Twitter to stay updated on this subject. Thanks for all the support so far!

Bijgespijkerd has become a quite popular marketing blog, got a solid base of over 350 subscribers, over 1.500 comments and published over 500 articles in the first year. Sjef Kerkhofs and Vincent Neve founded the blog in late 2008, not really knowing what they could expect. Now they have one of the best upcoming marketing blogs in the Netherlands, got nominated for various blog awards and have won the Nobiles Blog Award in the start of 2009 which gave the blog a huge boost!

What did I built for Bijgespijkerd?

When I started at the Bijgespijkerd project, there was nothing but a sketch of what the layout should look like. After a few days, the first version of Bijgespijkerd kicked off and seemed to blend in properly in the world of marketing blogs. But the layout seemed a little old-fashioned as the focus was mainly on the content.

That’s where the fun really started when Bas Bakker generously donated a brand new design! The .psd layout was dropped in my inbox and I got to develop a new theme out of it, which I was more that happy to do off course!

Within the Bijgespijkerd project, I’ve used the following techniques:

• Custom WordPress widgets like the video widget in the sidebar.
• Build a custom WordPress theme out of a Photoshop design.
• Develop custom WordPress plugins, mainly for the backend of the blog.

As you can see, Bijgespijkerd was a project that many WordPress developers would love to start on. There’s nothing more satisfying than to raise a blog from HTML code, to a fully functional and successful blog!

Starting my career, for real

I was a freelancer for quite some time when I met Sjef and Vincent. We started working on the first versions of Bijgespijkerd and the rush started. For the first time in my career I had the feeling that I was working on a large project, working with experienced people and actually being appreciated for my knowledge.

Sjef Kerkhofs – Bijgespijkerd founder:
“Coen developed the technique (in WordPress) behind our Marcom-blog Bijgespijkerd.nl. During the process he became ‘one of the guys’ because of his passion and creative thinking. At this point we don’t see him as a supplier anymore, but as one of the founders of our blog!”

Today, I’m still working with Sjef and Vincent on various other projects. We are able to work together like we know each other for years!

The best thing that I’ve done to reduce the time I need to develop a new WordPress theme, is to create a wireframe theme. A wireframe is nothing more than a clean theme, with no layout at all. It’s just a bunch of ‘wires’ (borders mostly) connecting all the elements of your theme.

But the best part is that all the basic functionality is already there. So when I’m going to develop a new WordPress theme, I’m not going to start from scratch, but take a fresh copy of my wireframe and start building my new theme on top of it. I just have to take care of the looks and extra (non-standard) functions.

How do I build my own wireframe?

Just follow these steps and you will get your wireframe up and running in no time:

• Draw a sketch of what you’re going to build. Yes, on paper. Might sound a bit odd, but it gives you a nice overview of possible challenges to you have to overcome. Sketching forces me to think a bit different about the same problems.
• Design the required pages in either Photoshop, Fireworks or any other application you like. If you feel the sketches are more than enough to get you going with the HTML, that will do too.
• Build a static HTML page of each page that is really different than the others. If you keep your wireframe really basic, you can also choose just to markup a single page for now.
• Build a basic working WordPress theme that contains all the basic functions of a WordPress theme.
• Add specific functionality that you might need by adding custom functions in the functions.php file.

A wireframe is unique to any developer, to suit some specific needs or habits. That’s why with writing this tutorial, it is really hard to help each and every developer at the same time. You should look at your coding habits and support them with your wireframe. Otherwise you might end up adding more time to the development stage instead of reducing that amount of time.

What should a good wireframe theme be capable of?

I like my wireframe to be as pure as possible. Nearly no styling will be applied, just a few borders to maintain the overview in development stages. Besides that, it should have all the functionality that you desire from your WordPress themes. Imagine (possibly multiple) widget-ready sidebars, extra added functions and whatever you can think of.

When you are developing your own custom wireframe theme, you should always keep your goal in mind. Is the wireframe really reducing the development time? That is the goal of a good wireframe, so when people ask me; what is the perfect wireframe? The answer is quite simple: A perfect wireframe suits your needs while developing a new WordPress theme and reduces the development time for every single WordPress theme that you build on top of the wireframe.

My wireframe is constantly being tweaked. When I come across a modification that I have to make more than once to the wireframe while developing a new theme, it is likely that I will change it in the wireframe. You should always keep in mind that you decide what’s best for your wireframe.

What does your wireframe theme look like?

Have you built your own wireframe and what does it look like? Does it have any customized functionality, or any other spectacular innovations? Please let me know, or us give a sneak peek under the hood of your WordPress wireframe theme!

Yes, I know that there are other plugins around that do the same. But this plugin has more options and even more options will be added in the near future.

Share, Remix, Reuse — Legally
Creative Commons is a nonprofit organization that increases sharing and improves collaboration.

With Creative Commons you are able to publish your content within a license that allows other people to use it, within the limits that you set.

Future plans

I’m planning on adding support for displaying a text in the footer of your blog, so there is one central spot where the Creative Commons license is presented.

Right after that, a feature will be added to provide a tag in the <head> of each page, so machine based visitors can read the license too.

Support

Support for this plugin is available on the WordPress support forums. Please use this plugins tag when posting to maintain the overview, ensure that I read your topic and receive support for this plugin.

The diamond on the crown of this all was Erno Hannink asking me to join the Genius Bar as adviser for WordPress questions at WordCamp Netherlands 2009. It really excited me that people actually wanted me to give them support on WordPress at such a major event! But then, the party was over before it even started.

I checked my schedule for the weekend that WordCamp Netherlands is being held and I immediately spotted why I didn’t subscribe to attend WordCamp in the first place. My completely filled agenda for that weekend isn’t allowing me to go to this major WordPress event, in my own country.

But I’m sure the attending WordPress gurus (check out the speakers) will be able to help all attendees with their WordPress problems and questions. It’s just to bad that I can’t be one of them and be part of the joy. Maybe next year!

But many people are changing the core files, because they simply don’t know any other way to change the default layout your comments have. Once they have to update their WordPress core, the changes are lost and need to be applied again!

By default, the call to wp_list_comments() in comments.php looks like this;

<ul>
<?php wp_list_comments(); ?>
</ul>

Using it this way, it will use the default formatting on the comments. We can provide some arguments to that function, so we can change the looks of our comments. When we look at the arguments we can provide, there is the callback-argument;

callback – (string) The name of a custom function to use to display each comment. Defaults to null. Using this will make your custom function get called to display each comment, bypassing all internal WordPress functionality in this respect. Use to customize comments display for extreme changes to the HTML layout. Not recommended.

It says doing this is not recommended, but it is the way to change the looks of your comments without changing WordPress core files! We can list our function to be executed to display each function like this;

<ul>
<?php wp_list_comments('callback=theme_display_comments'); ?>
</ul>

This way, the function theme_display_comments() will be used to display each comment, skipping the normal WordPress routines to do this. Because we skip those routines, we have to take a closer look at our function to make it sure it will display the comments properly. The WordPress codex provides us with the following example, that should get you started on creating custom looks for your comments;

function mytheme_comment($comment, $args, $depth) {
   $GLOBALS['comment'] = $comment; ?>
   <li <?php comment_class(); ?> id="li-comment-<?php comment_ID() ?>">
     <div id="comment-<?php comment_ID(); ?>">
      <div>
         <?php echo get_avatar($comment,$size='48',$default='<path_to_url>' ); ?>

         <?php printf(__('<cite>%s</cite> <span>says:</span>'), get_comment_author_link()) ?>
      </div>
      <?php if ($comment->comment_approved == '0') : ?>
         <em><?php _e('Your comment is awaiting moderation.') ?></em>
         <br />
      <?php endif; ?>

      <div><a href="<?php echo htmlspecialchars( get_comment_link( $comment->comment_ID ) ) ?>"><?php printf(__('%1$s at %2$s'), get_comment_date(),  get_comment_time()) ?></a><?php edit_comment_link(__('(Edit)'),'  ','') ?></div>

      <?php comment_text() ?>

      <div>
         <?php comment_reply_link(array_merge( $args, array('depth' => $depth, 'max_depth' => $args['max_depth']))) ?>
      </div>
     </div>
<?php
        }

When we put this function in the functions.php-file of our theme, we can customize it (and thus modify the looks of our comments) and save these modifications, so they will be protected from being overwritten by a WordPress core update.