Connect with us

Writing your first plugin for WordPress

coding

Writing your first plugin for WordPress

WordPress doesn’t provide an “Hello world”  plugin tutorial. There are some links to 3rd party tutorials,  but those samples are years old and doing stuff in old way.

It doesn’t have to be that complex. I will demonstrate how to create a simple plugin in 20 lines, the plugin can add some HTML to page footer and/or post.  This is an “Hello World”, so I won’t explain the plugin framework in detail but I will cover essential concepts.

This tutorial is for (newbie) plugin developers, it won’t explain how to use WP and how to code PHP.

Creating a plugin

Create a directory “simple-add-to-footer” under wp-content/plugins, then create a file “simple-add-to-footer.php”. Add this code to the newly created page.

<?php
/*
Plugin Name: Simple Add To Footer
Plugin URI: http://localhost/wordpress/
Description: Add HTML snippets to posts and/or page footer.
It is a plugin tutorial using latest plugin API of WP2.7+
Version: 0.1
Author: me
Author URI: http://blog.orangecabin.com/
Disclaimer: Use at your own risk. No warranty expressed or implied is provided.
*/
?>

This is called “Standard Plugin Information”, you can read more about it on http://codex.wordpress.org/Writing_a_Plugin. That is all it needs to be a valid plugin. Now this “plugin” can be activated like other plugins.

Adding something interesting

OK it does nothing till now. Please add this after the plugin info.

add_action('wp_footer', 'simple_add_to_footer_wp_footer');
function simple_add_to_footer_wp_footer(){
echo '<div>Hello world! '. get_option('blogname') .'</div>';
}

If you activated the plugin now, you can see it print something in the page footer.

What is “action”

Here goes some theory : “action” is one type of the extension points of WordPress, that means you extend an action to do something to WordPress.
add_action is “the interface” between wordpress and your plugin. The 1st parameter “wp-footer” is a simple action which is called to produce page footer. The 2nd parameter is name of you function. And you do what you need in that function.
simple_add_to_footer_wp_footer calls get_option(‘blogname’). It is a WordPress defined API to get blog options, like blog name.

Filter – another type of extension point

Now add this to the file

add_filter('the_content', 'simple_add_to_footer_the_content');
function simple_add_to_footer_the_content($content = ''){
return $content .'<div>I am '. get_the_title(). '</div>' ;
}

Reload your blog page, now you can see it adds some info to the post.
Filter is another type of extension point. Instead of echo something directly, you get a parameter ($content) from WordPress and you can manipulate it, like upper case or something.

Conclusion

That is all. Here is what we have now:

<?php
/*
Plugin Name: Simple Add To Footer
Plugin URI: http://localhost/wordpress/
Description: Add HTML snippets to posts and/or page footer.
It is a plugin tutorial using latest plugin API of WP2.7+
Version: 0.1
Author: me
Author URI: http://blog.orangecabin.com/
Disclaimer: Use at your own risk. No warranty expressed or implied is provided.
*/
add_action('wp_footer', 'simple_add_to_footer_wp_footer');
function simple_add_to_footer_wp_footer(){
echo '<div>Hello world! '. get_option('blogname') .' </div>';
}
 
add_filter('the_content', 'simple_add_to_footer_the_content');
function simple_add_to_footer_the_content($content = ''){
return $content .'<div> I am '. get_the_title(). '</div>' ;
}
?>

Ok, I know it is not really useful. But this plugin can be easily extend to do interesting stuff, like inserting arbitrary HTML code to page footer. To do that, you need a page for the plugin user to type the HTML they want to insert.

For a more detailed course on how to learn to implement your first WordPress plugin, you can check on the course offered by me on Teachable, with focus on WordPress Plugin Development (Basic to Advanced).

Also, check this follow up article, for this tutorial.

Continue Reading
You may also like...
Click to comment

Leave a Reply

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

More in coding

To Top