• Facebook Icon Link
    • Instagram Icon Link

    How to Create a WordPress Plugin.


    Tutorial Overview.

    In this tutorial I will explain what a WordPress plugin is, how to name a plugin, how plugins work and then go through the steps it takes to create a WordPress plugin.

    Quickies.

    What is a WordPress Plugin?

    A WordPress plugin is an application you install on your website that adds or extends features and/or functionality. Plugins allow you to customize WordPress without altering the core WordPress code. All WordPress.org plugins are open source which means you can examine and alter the code of any plugin in the WordPress Plugin Directory.

    What do I Need to Create a WordPress Plugin?

    Things to Consider When Naming a Plugin and its Functions.

    It is important to give your plugin and its functions unique names. The WordPress Plugin Directory has over 50,000 plugins and WordPress itself has thousands of functions. To avoid any naming conflicts, you must give your plugin and the names of its functions that are not being used anywhere else.

    How does a WordPress Plugin Work.

    Plugins use WordPress hooks to interact with the rest of the WordPress core. Hooks provide a way for a piece of code (in this case, that you write) to interact with another piece of code (in this case, from the WordPress core) at specific times. When you visit a WordPress page there are a series of functions that are executed in order to display the webpage. You can hook into these functions and use them to trigger your custom functions. There are two types of hooks, actions and filters.

    Actions: Add or modify functionality. They perform a task and return nothing.

    Filters: Modify data. They accept a variable, modify it and return the new data.

    Here is a complete list of WordPress actions and filters: WordPress Hooks Reference

    How to Create a WordPress Plugin.

    Step 1: Create the Plugin Folder and Files.

    1. Create the main plugin folder and name it after the plugin. See above for important naming information.
    2. If your plugin is going to be called XXX Plugin, create a folder and name it xxx-plugin.
    3. Create the main plugin file inside the plugin folder and name it after the plugin. If the plugin folder name is xxx-plugin, then name the file xxx-plugin.php.

    Step 2: How to Create the Plugin Header Comments.

    Every plugin must have header comments to give WordPress information about the plugin. At the very minimum you must provide a plugin name:

    1. Open the main plugin file, in my case it is xxx-plugin.php, in a text editor.
    2. Add the header code to the top of the file.
    3. As long as you include the Plugin Name: the rest of the info is optional.
    4. Save the file.
    /**
     * Plugin Name: XXX Plugin
     */
    

    Here is some additional header information you can include with the plugin if you like.

    /**
     * Plugin Name:       XXX Plugin
     * Plugin URI:        https://twentysixforty.com/
     * Description:       A simple plugin that does some wicked stuff.
     * Version:           1.0.0
     * Requires at least: 5.0
     * Requires PHP:      7.3
     * Author:            Tyler Norquist
     * Author URI:        https://twentysixforty.com/
     * License:           GPL v2
     * License URI:       https://www.gnu.org/licenses/gpl-2.0.html
     * Text Domain:       xxx-plugin
     * Domain Path:       /languages
     */
    

    Step 3: Upload the Plugin to the WordPress Plugins Directory.

    Now that you have the minimum code for a plugin, you can now upload it to WordPress and activate it. Here are two ways to upload the plugin:

    Upload the Plugin Via FTP.

    1. Make an FTP connection to the website. Instructions: How to Make an FTP Connection with FileZilla.
    2. Upload the plugin folder to the plugins directory. Path: webroot > wp-content > plugins.
    3. Once the plugin is uploaded, login to the WordPress Dashboard.
    4. In the admin sidebar, click on Plugins.
    5. You should see your plugin in the list of plugins.

    Custom plugin

    1. Click Activate.

    You can see that my plugin doesn’t have any information associated with it yet. That is because I only put the plugin name in the header. If you add more info to the header, you will see it show up as information associated with the plugin.

    xxx plugin

    Upload the Plugin Via the WordPress Dashboard.

    For this method to work, the plugin folder must be compressed in the .zip format. In my case, the folder name is xxx-plugin.zip.

    1. Make sure the plugin is compressed.
    2. Login to the WordPress Dashboard.
    3. In the admin sidebar, click on Plugins > Add New.

    plugins sidebar

    1. In the upper left corner, click Upload Plugin.

    plugin upload

    1. Upload the plugin.
    2. Click Install Now.
    3. Click Activate Plugin.
    4. In the admin sidebar, click on Plugins.
    5. You should see your plugin in the list of plugins.

    Custom plugin

    You can see that my plugin doesn’t have any information associated with it yet. That is because I only put the plugin name in the header. If you add more info to the header, you will see it show up as information associated with the plugin.

    xxx plugin

    Step 4: How to Make a Settings Page for the Plugin.

    There are two places you can add the plugin in the admin sidebar menu. You can add it as a top-level menu item or as a submenu item. I generally like to add my plugins as submenu items to keep the top-level menu less cluttered. WordPress recommends that if the plugin has a single options page, add it as a sub-menu item. To add the plugin as a submenu item, we will use the add_submenu_page() function. This function has 5 required parameters and 2 optional parameters. For more information check out the parameter explanation below. If you want to add the plugin as a top-level menu item, use the add_menu_page() function.

    1. Open the main plugin file in a text editor.
    2. Add the following code below the header comments.
    function add_xxx_plugin_menu() {
    	add_submenu_page('options-general.php', 'XXX Plugin', 'XXX Plugin', 'manage_options', 'xxx-plugin', 'xxx_plugin_function');
    }
    add_action('admin_menu', 'add_xxx_plugin_menu');
    
    1. Enter the correct parameters for your plugin.
    2. Save the file.

    settings xxx menu item

    Explanation of the add_submenu_page() Parameters.

    • $parent_slug: (string) (Required) – The slug of the parent menu item.
    • $page_title: (string) (Required) – The text that will be put in the title tags when this page is active.
    • $menu_title: (string) (Required) – The name of the menu item.
    • $capability: (string) (Required) – The capability required for this to be visible to a user.
    • $menu_slug: (string) (Required) – The slug for this menu item. Alphanumeric lowercase, dashes and underscores only.
    • $function: (callable) (Optional) – The function to be called to display the content for this page.
    • $position: (int) (Optional) – The menu order position.

    add_submenu_page( $parent_slug, $page_title, $menu_title, $capability, $menu_slug, $function, $position );

     

    You can test your plugin’s options page by adding a simple function to the main plugin file and clicking on the menu item in the WordPress Dashboard:

    function xxx_plugin_function(){
    	echo "Goodbye, World!";
    }
    

    To see the official WordPress plugin documentation check out the WordPress Plugin Handbook.

     

    Additional Posts.

    Leave a Reply

    Your email address will not be published. Required fields are marked *

    Pin It on Pinterest

    Share This