Using Hooks & Shortcodes in WordPress Plugin

This is the second article in the series about developing a WordPress Plugin. You can read my previous article about Getting Started , but here is a short summary.

Step #5 Plugin Prototyping

In the last article, I got all my files and folders ready. But first I want to work out the logic for implementing the five functionalities. For this, I first created a prototype using HTML, CSS and JavaScript. You can do this on your desktop using a notepad and a browser. But one of my go-to tools for this is CodePen.io. If I am prototyping something more complex, then I usually use Netbeans.

Believe me – this is one of the most important and sometimes the most difficult step in this whole process!

Step #6 Using Hooks

This is where you start your real WordPress Plugin development. First a little bit of background on hooks.

In WordPress development, a hook is a part of WordPress code where you can either add your own code or change the existing WordPress code. This allows you to alter WordPress functions and even its output. There are two types of hooks:

1. Action : An action hook is triggered by events in WordPress. For example, sharing your article on Facebook when you publish a post. Given below is the syntax for an action hook:
   <?php add_action($hook_name, $your_function, $priority, $accepted_args); ?>
2. Filters : A filter hook is used to modify WordPress data before saving it to the database or displaying it on the browser. For example, adding some custom code at the end of a post (e.g. a Facebook Like button) before displaying it on the screen. Given below is the syntax for a filter hook:
   <?php add_filter($hook_name, $your_function, $priority, $accepted_args); ?>

The parameters for both add_action() and add_filter() functions are exactly the same.

1. hook_name: This is the action or filter hook names that determine either the trigger or the filter.
2. your_function: This is the function that you will have created in your plugin.
3. priority: The priority in which your function should run (applicable if there are multiple functions attached to the same hook). The lower the number,  the earlier the execution. (default value is 10)
4. accepted_args: The number of arguments your function accepts (default value is 1)

There are thousands of hooks available in WordPress. Here are some example hook names for both types of hooks:

Actions Hooks

• When a new post is published: publish_post
• When a comment is saved in the database: comment_post
• When a plugin is successfully activated: activated_plugin
• When WordPress code has finished loading, but before any headers are sent: init (Useful for intercepting $_GET or $_POST triggers)
• When a new user is created: user_register

You can refer to the entire list of action hooks in WordPress Codex

Filter Hooks

• Applied to the post content after retrieving it from the database and before displaying it on the screen: the_content
• Applied to the post content before adding it in the RSS feed: the_content_rss
• Applied to the post title before displaying it on the screen: the_title
• Applied to the comment text before displaying it on the screen: comment_text
• Applied to the list of pages returned by the function get_pages(): get_pages (Note that the function is get_pages(…) and the hook is get_pages)

You can refer to the entire list of filter hooks in WordPress Codex

Enqueueing Files Using Action Hook

When you create your plugins, you may have created your own stylesheets and javascript files specifically for the plugin. WordPress has an enqueue system using which you can add these custom stylesheets and JavaScripts. This also helps prevent plugin conflicts.

To enqueue your plugin stylesheets or JavaScripts you need to use add_action. This is not very complicated, and I have provided you with an example you can use.
function sony_posh_content_enqueue() {
wp_enqueue_style( 'sony_posh_content_css', plugins_url('css/style.css', __FILE__ ) );
}
add_action( 'wp_enqueue_scripts', 'sony_posh_content_enqueue' );

Step #7 Using Shortcodes

I briefly explained about Shortcodes in my previous article. Here I will give you a bit more detailed summary regarding the implementation.

First a little bit about shortcodes and the function you want the shortcode to call (usually referred to as a callback function).

A shortcode can have 3 parts – tag, attributes and content.

[twitter sonystweets]Follow Me on Twitter[/twitter]

• tag => twitter (shortcode name)
• attributes => sonystweets
• content => Follow Me on Twitter

Choose your shortcode format

When you are planning to create a shortcode, you first decide how you want to use it. For example, I wanted a shortcode that would convert:

[ A ]lice in wonderland to 
Alice in wonderland!
So in this case, I decided to use a very simple shortcode [ “alphabet” ]. This shortcode has no attributes or content. The tag is “A”.

Write your shortcode function

If you have done the prototyping then this is the easy part. This is how I went about it.

During my prototyping, I had displayed a dropcap using HTML:
<span class="dropcap">N</span>ulla consequat massa quis enim.  and CSS
span.dropcap {
display: inline;
color: #c30;
float: left;
}

First I created a function (let us call it, sonys_dropcap). Then I wrote how I wanted [ A ] converted to HTML:

function sonys_dropcap ($tag) {
$text = '<span class="dropcap">' . $tag . '</span>';
return $text;
}

Every callback function can any of the 3 parameters:

1. attributes
2. content
3. tag

In this case, I only needed the tag.

The final step was adding the CSS snippet in my previously created style.css file. As you can see, once you have done the prototyping (in Step 5), this is all easy-peasy because all you are doing is copy-paste and tweaking.

Register your shortcode and function

This is one of the easiest steps. Once your know what your shortcode is going to be and you have defined the callback function, you pretty much write a one-liner.

I created an add_shortcode function along the lines of:
add_shortcode('A', 'sonysdropcap');

This function adds a hook for a shortcode. It takes two parameters: the shortcode tag and the callback function name.

In Summary

If you have completed until Step 7, you can already go and activate your plugin and enjoy! I completed the prototyping of all 5 features and also created the shortcodes for first 3 (dropcap, tooltip and message boxes).  You can see it in action in my next article from this series.

I highly recommend these two books that helped with my journey:

• Professional WordPress: Design and Development
• Professional WordPress Plugin Development

If you would like to see some videos of the actual development work, leave me a comment.