WordPress plugins 101, Part 1, basics.


person using black and white smartphone and holding blue card

This tutorial looks at the basics of a WordPress plugin, how to create one and where they are located. The goal is to add a sentence to the end of a blog post using a plugin.

The plugins folder

Open your WordPress root folder in VS Code and then click on the wp-content folder, next click on the plugins folder, here you will see all the installed plugins.

Create a new folder for the new plugin

Create a new folder named add-sentence-plugin, this must be a unique name to prevent any conflicts.

Next create a file named after the plugin name, add-sentence-plugin.php, in the new plugin folder. This acts as the main file for the plugin.

In this file type the following:

<?php

/*
Plugin Name: Add sentence plugin
Description: Amazing plugin
Version: 1.0
Author: Geoff Whittaker
*/

After the PHP declaration, the comments tell WordPress some basic information about the plugin. This information will then display in the admin section of the back-end. There are many possible header settings here. There are also activation hooks that we will not go into here.

The main PHP file should include a header comment that tells WordPress that a file is a plugin and provides information about the plugin.

WordPress developer.org

Go to the admin section of the site and you should see the plugin listed.

Add a filter to target the content of a post

Next we need to tell WordPress where to put the new sentence, in this case at the end of the content of a post. WordPress uses the add_filter() function to do this. Copy the code below into the add-sentence-plugin file under the comments section.

The add_filter() function has two parameters, the first one is the filter to use, in this case it grabs the content of a post. The second parameter is the function to run once the content has been obtained.

This call-back function passes in the content, which then becomes available to concatenate the new text to.

// grabs the content section of a post
add_filter('the_content', 'addToEndOfPost');
function addToEndOfPost($content)
{
    return $content . '<p>new line of text</p>';
}

Go to any post and you should see the new line of text.

Finally in a real world application we need to refine where the new sentence will show. for example we do not want this new text appearing in other areas where the content may be used such as the footer.

To do this add an if statement as below. This checks that you are on a single post page and that it is the main query. i.e it is not in the footer or sidebar. If the if statement evaluates as false just the content is returned.

// grabs the content section of a post
add_filter('the_content', 'addToEndOfPost');
function addToEndOfPost($content)
{
    if (is_single() && is_main_query()) {
        return $content . '<p>new line of text</p>';
    }
    return $content;
}

In part two we build something more useful, a plugin that will output some useful data about a post