The Crucial Guide To Constructing A WordPress Plugin

Posted on - Last Modified on

The popularity of WordPress is growing by the day. It provides a service covering the most basic blogging platform and up to basic CMS, meaning more functionality and a need for extra tools. WordPress developers have foreseen this need and included the ability to customize basic functionality through plugins.

WordPress needs plugins with specific functionalities for hitch-free usage. The certified WordPress depository has over forty-five thousand ready-to-use plugins, but many don’t meet expectations. When he one in the depository fails to meet your needs, you have the option of building your own.

WordPress plugins utilize PHP scripts which can modify the look of your website. The change can be as small as altering the header. It can also be something more drastic, like triggering the sending of emails when certain activities are carried out on the website, changing the way log-ins work and much more.

You need to plan carefully before building a great WordPress plugin. Whether you are modeling it from a boilerplate or building from scratch, it is very important you adhere to best practice. This guide will teach you how to construct a quality WordPress plugin.

Techniques involved in writing plugins

When you are writing a plugin rather than using a boilerplate, the first thing to do is create a plugin file, and add codes which can be activated through one of many ways. Every plugin has opening code followed by plugin code. Plugin codes can be activated in one of the following ways:

Though a function: A function is created by your plugin, which you can include in your theme.

Through the hook of an action: There are hundreds of action hooks in WordPress. If there is an action hook in your theme, write a function and attach it to the hook. Whenever the hook is loaded by WordPress, the code in your plugin will run.

Through a filter hook: Like action hooks, there are many filter hooks in WordPress. A filter hook allows you to modify the output instead of adding new codes - and this is where it differs from an action hook.

Through a widget: Plugins that create widgets can be activated by adding them to the widget in the WordPress admin screen.

Through a shortcode: When your plugin creates shortcodes, you can add them to pages or posts.

The planning stage

First, you need an idea of what functions your plugin should have. This guide will use a plugin that will allow guests to save contents to read in the future. The list of registered users will store in the databank, while the list of casual users will be saved using cookies. The functionalities and features of this guide-plugin are as follows:

Screen Settings

  • An option will be available to change the messages presented to visitors viewing part of the plugin.

  • An option for special functionalities to be enabled for registered and logged in users only.

  • An option for admin to include the ‘Save Item’ button at the end of the content.

  • An option for users to decide if they wish to stick with the default style, or predefined style created by this guide.

  • An option to decide which post will contain the special button.

Content Saving

  • Content is saved to a conventional user field if the user is logged in.

  • Content is saved to cookies if the user is not logged in.

Messages

Depending on how the user and the plugin interacts, one of the following messages will appear on-screen:

  • “Unsave Item”

  • “Save Item”

  • “No Saved Item available”

  • “Saved Items available. View.”

Saved Screen

Visitors will view a list of their saved posts here.

  • A long-list of saved objects will show here

  • On triggering the plugin, a saved page will be created

  • On disabling the plugin, saved pages will be deleted.

Making use of a boilerplate

You can find one of the most effective boilerplates here. It is object-oriented, efficient, and well-structured, and adheres to all the best practices. Plugin code base modeled on the Boilerplate of WordPress Plugin can be generated from this page. All you need is to download the zipped file, extract, and copy into the installation folder of WordPress (wp-content/plugins/). Once you have done this, open the Dashboard of your WordPress and locate plugins. You will find your plugin on the list. Leave it inactive at this stage.

Handling activation and deactivation

It is paramount the created plugin should be able to handle deactivation and activation properly. At the point of activation, a page titled ‘Saved’ will be created which holds all the saved items of the users. While that page is being created, a shortcode on behalf of the saved item will be added to the content page. When the page has been saved, the ID will be obtained and stored in the databank, so it can be accessed on disabling the plugin. On deactivation of the plugin, the ID of the ‘Saved’ page will be obtained from the database, and the ‘Saved’ page erased along with any of the plugin’s trace.

Create the settings page of the plugin

The settings page can be created inside the file, admin/class-regal-save-admin.php. First things first - remove the call to wp_enqueue_style() that is contained inside enqueue_style() function. Then call to wp_enqueue_script(), which is contained in enqueue_scripts() task if CSS/JS will not be added to the screen visible to the admin. If there’s some styling to add, it is recommended the files be loaded in the setup page of the plugin only, rather than on all admin pages of the WordPress.

Open the ‘Tool’ page to see the Toptal Save page. It should open to a blank screen since there is nothing in it yet. The next step is to try to make it display some settings. You begin by creating the fields with the help of WordPress Settings API. It lets you create form fields which can be used to save your data.

Locate the register_settings() function and add or configure all the fields. The complete function implementation can be found here.

Creating the plugin functionality

This is the interesting part because multiple functions have to be created to separate the functionality. The different functionalities are:

  • A function that displays a “Save Item” button. If the current user has saved the item some other text will be displayed.

  • A function that allows the user to save/unsave an item

  • A function that displays all saved items.

  • A function that generates the needed shortcodes.

All these would be done in the public/class-regal-save-public.php. It may be necessary to create additional helper functions to take care of certain actions like:

  • Generating a unique cookie name for your website

  • Creating a cookie

  • Fetching the cookie value

  • Fetching the user’s membership status from the settings

You can obtain the codes for the helper functions here.

Modularizing the plugin

By definition, a modular plugin is one that can be modified, added to, interacted with or manipulated without altering the core code. If you want users to be able to make changes to the HTML in the saved item on the saved item page, you need to make few changes to the register_saved_shortcode(), as follows:

  • html_to_return should be modified to inner_html_to_return at all the places that would allow the user to change the HTML.

  • Your filter should be registered using apply_filters().

Once the two changes have been made, you will have something resembling this.

Make your plugin available in more than one language

This is very important so non-English speaking WordPress Community members will find your plugin useful, and apply it to their websites. The translation framework utilized by WordPress is the GNU get text.  This framework has three types of files:

  • Portable Object (PO)

  • Portable Object Template (POT)

  • Machine Object (MO)

Each file represents a step in the translation process. To do this, you will need to translate the text from a POT to a PO file, and then convert the PO file into MO. Doing this manually is time-consuming as each translatable file will need a few lines of code. Alternatively, you can do this using a plugin called Loco Translate.

Once you have installed and activated this handy plugin, open it and go to Plugins>Toptal Save. Click on the option to edit the template. After that, synchronize and save. This action edits the toptal-save.pot file within the language folder. Your plugin is now available for translation.

Building plugins can be time demanding, but there is always the option of hiring a Freelancer to help.

If there is any trick we have left out, let us know in the comment box!

Posted 23 August, 2017

LucyKarinsky

Software Developer

Lucy is the Development & Programming Correspondent for Freelancer.com. She is currently based in Sydney.

Next Article

A Node.js Guide To Actually Doing Integration Tests