WordPress Meta Box the OOP Way

WordPress has a reputation for being bloated, filled with spaghetti codes and not developer friendly because it is a pain in the ass to extend.
The reason for the WordPress hate is partly because it is procedurally written which result in an ugly codebase thus making developers cringe.

In recent time, WordPress is gradually adopting the Object-oriented programming paradigm albeit at a slow pace.

If you have created WordPress Meta Boxes in the past, you know how messy your code will look littered with disorganized functions and add_action hooks like so:

The codebase actually get messier and unwieldy when building a complex plugin and before you know it, your code becomes spaghetti and in-manageable.

In this article, we will build a Meta Box plugin in an OOP way (with pretty organize and structured code-base) that add a custom message / notification before the actual post or page content.

Planning the Plugin

The plugin PHP class consists of five methods including the __construct magic method as describe below:

  • __construct() : contains all add action function that hooks a method on to a specific action
  • cs_add_meta_box: add the Meta Box container to WordPress post and page administrative interface.
  • cs_meta_box_function : Render the Meta Box content.
  • save : Save the meta data to the database when the post / page are saved.
  • custom_message : retrieves the save meta data from the database and add the text at the top of a post / page content.

We are not using any class property because we are building a simple plugin that doesn’t require one.
Also, there isn’t any restriction that the class methods should be named exactly as the above excluding the __construct method which should remain unchanged.

Coding the Plugin

Firstly, include the plugin header and create the class.
The plugin header (a PHP comment block) is the only requirement for a plugin to function in WordPress. The comment block tells WordPress that this is a valid plugin.

All the add_action functions that that hooks a method on to a specific action should be in the __construct method.

The first add_action function hooks the cs_add_meta_box method (that adds the box to the main column on the Post and Page edit screens) to add_meta_boxes action.

The second hooks the save method to the save_post action so as to save the meta data to the database when the post is saved.

Lastly, the custom_message that retrieves the save meta data from the database and add the notification at the top of a post / page content is hooked to the the_content action.

The code for the cs_add_meta_box method that adds the meta box container to the post and page administrative screen is as follows.

The third argument passed to the add_meta_box function inside the cs_add_meta_box is the method that renders Meta Box content.

The save method verifies this came from our screen and with proper authorization, sanitize the user input and save the meta data when the post or page is saved.

The Meta Box has successfully been constructed. We can now add, edit and save individual post’s meta data to the database.

WordPress Meta Box

We aren’t done just yet, we still need to create our final method (custom_message) that retrieves the meta data from the database. If the meta data of a given post isn’t empty, the data is added as a custom message / notification at the top of the actual post / page content.

WordPress Meta Box in action

Finally, we are done coding the plugin class. To put the class to work, we need to instantiate it.

Conclusion

WordPress isn’t a full Object-oriented compliant CMS as support for OOP is basic, although the reason for this is to maintain backward compatibility.

As much as possible, we as WordPress developer should adopt the OOP paradigm. By so doing, we write organize and maintainable code so we don’t cringe when reviewing the code after a period of time.

The plugin source code is available at my Github account.