Log in

Sign in with your email address and password:

No account? Sign up here.
Forgot your password? Reset it here.
Didn't receive account confirmation email? Request a new one.

WP Plugin Development Tutorial – Part 4

Welcome to Part 4 of this tutorial series. In Parts 1, 2 and 3, we have learnt how to create a basic content-altering WordPress plugin from scratch. Now we’ll add some more features to our Content Enhancer plugin. We’re going to start by adding merge fields capability to our plugin. This will allow the user to specify any key-value pairs for inclusion at any point within the post: We can specify a key [my_twitter] with the value ‘<a href=”http://twitter.com/twoggle”>Follow Me On Twitter!</a>’.  Then wherever we specify this key within our blog post, it will get replaced with the value of the key – neat, right?

Some topics we’ll cover in this tutorial are WP option arrays and using jQuery in a WordPress plugin (since we want to be able to add an unlimited number of merge fields, we’ll need some dynamic HTML and jQuery is our friend).

Using an Array As an Option Setting

Every option you create in WordPress adds a new record to the wp_options database table. By storing our options in an array, we can save some valuable database space by storing multiple options in a single database record (WordPress is clever like that!).

Since we are aiming to add an arbitrary number of merge field options to our Content Enhancer plugin, this also makes more sense to store all these fields in a single option, as an array. We will start by adding a pre-populated merge field to our settings page.

Later we’ll look at adding (& saving) any number of options. To save key-value pairs for our merge fields, we will use one array for all keys and one array for all values. They can then be linked up by their index (a key-value pair corresponds to: key[0]->value[0], etc).

Go ahead and add the following code into the content_enhancer_register_settings() function:

Note that we have defined two separate callback processing functions for the merge field key and value arrays. The code for these can be added to the file too:

Replace the content_enhancer_settings_page() function with the following code:

http://pastebin.com/hD8in1PG (because this code contains a mix of php and HTML, I’ve opted to use Pastebin since the CodeColorer plugin used so far doesn’t deal too well with the syntax mix).

Work Plugin, Work!

As a final step, replace the content_enhancer_process_content() function with the following code:

That’s it!  You should now have everything in place to make the Content Enhancer do its job of adding content to top and bottom of posts, as well as replace custom-created merge fields within the content. As an example, I am going to create a [my_facebook] merge field:

Content Enhancer In Action | Twoggle


Now we can simply insert the code [my_facebook] into our post:

WP Plugin Development Tutorial

And we can see in the output of our blog post, our merge field key is replaced by its value:


WP Plugin Tutorial


Eureka! Our plugin is working as expected …

I hope that, like me, you’ve learnt something new during this WP plugin development tutorial series. What we have done is create a useful WP plugin, using minimal code. We hope that you will be able to use this as a base to create your own powerful plugins in the future. Be sure to check back soon for additional WordPress development tutorials.

The complete Content Enhancer plugin (and source code) can be found on the Twoggle Content Enhancer WordPress plugin page.

Any questions, ideas or comments – please leave them below.

Submit a Comment