August 08, 2021

Create a WordPress Plugin (Basic Guide)

A WordPress plugin is like an add-on or extension that extends the functionality of WordPress by adding new features or modifying existing ones. Learn how to build a WordPress plugin in this post.

Create a WordPress Plugin

WordPress has a huge repository of plugins with over 50k free plugins, allowing developers to extend the default functionality of WordPress. By developing a custom plugin, you add a new functionality without changing the core code of WordPress and other plugins. In this post, we are going to show you how to develop a WordPress plugin by creating a simple plugin.

 

Best Practices for WordPress Plugin Development

There are many practices and guidelines you need to follow as a developer when building a WordPress plugin. I am going to outline a few important practices to follow:

  • Your plugin name must be unique. Make sure there is no other plugin with the same name.
  • Plugin functions and global variables must be unique to avoid any conflict with any other code.
  • Options and transients keys must be unique.
  • Always sanitize user input when saving form data into the database.
  • Keep your code and directory structure organized.
  • Add nonce fields for form submissions.
  • A good practice to follow all these is to prefix all your functions, classes, namespaces and database keys. The prefix should be unique to your plugin.
 

Basic Structure of a WordPress Plugin

The basic structure of WordPress plugin code can be divided into two main sections. First one is to add plugin headers, and after plugin headers comes the plugin code to achieve the desired functionality. Every WordPress plugin starts with a header comment with information like plugin name, author and version etc. Example of WordPress plugin header:

<?php 
/**
 * Plugin Name: A name for your plugin
 * Plugin URI: https://www.your-website.com
 * Description: Your plugin description.
 * Version: 1.0.0
 * Requires at least: 4.7
 * Tested up to: 5.5.3
 * Author: Author name
 * Author URI: https://www.author-website.com
 * Text Domain: csccss
*/

The only required parameter for any plugin is Plugin Name:, while other parameters are optional. Visit the Header Requirements page of WordPress for a complete list of header parameters. Plugin headers are explained as follows:

  • Plugin Name: A unique name for the plugin.
  • Plugin URI: A non wordpress.org URL, unique URL for the plugin.
  • Description: A description of the plugin explaining the purpose and functionality of the plugin.
  • Version: The current version of the plugin.
  • Requires at least: The minimum/lowest WordPress version which is required for this plugin.
  • Tested up to: The latest version of WordPress, the plugin has been tested on.
  • Author: Name of the author of the plugin. Multiple authors can be separated by commas.
  • Author URI: The URL to the website of the author.
  • Text Domain: A unique text domain string for internationalization.
 

How to Create a WordPress Plugin (Beginner's Guide)

We are going to show you how to develop a WordPress plugin that will add critical CSS on front-end pages. We will create a WordPress admin menu page to store critical CSS in the options table. Follow these steps to create a plugin in WordPress:

  • Go to the directory wp-content/plugins of your WordPress website
  • Create a folder with the cs-critical-css name.
  • Inside the cs-critical-css folder, create a PHP file with the cs-critical-css.php name.
  • Remember, the directory name and plugin file name must be the same and unique to your plugin.
  • Open the file cs-critical-css.php in the editor and add plugin headers.
  • Register an activation hook to execute any code when the plugin is activated.
  • Next, we add a WordPress menu page using the hook admin_menu to a add menu page.
  • Add code to render a critical CSS form with a text area in the menu page.
  • Add wp_enqueue_scripts to add critical CSS as inline CSS.
<?php
/**
 * Plugin Name: CS Critical CSS
 * Plugin URI: https://www.your-website.com
 * Description: A simple plugin to add critical CSS in head section of front-end pages.
 * Version: 1.0.0
 * Requires at least: 4.7
 * Tested up to: 5.5.3
 * Author: CodeStacked
 * Author URI: https://www.author-website.com
 * Text Domain: csccss
 */

defined('ABSPATH') or die();

// Activation hook triggered when plugin is activated
register_activation_hook(__FILE__, 'csccss_plugin_activated');
function csccss_plugin_activated(): void
{
    // Add some code here you want to execute when plugin is activated
}

add_action('admin_menu', 'csccss_menu_page');
function csccss_menu_page(): void
{
    add_menu_page(__('CS Critical CSS', 'csccss'), __('CS Critical CSS', 'csccss'), 'manage_options', 'csccss', 'csccss_render_settings_page');
}

if (!function_exists('csccss_render_settings_page')):
    function csccss_render_settings_page(): void
    {
        ?>
        <form method="post" action="options.php" class="form">
            <?php wp_nonce_field("update-options"); ?>
            <input type="hidden" name="action" value="update"/>
            <input type="hidden" name="page_options" value="csccss"/>

            <div class="wrap">
                <h1 style="margin-bottom: 1rem;"><?php _e('CS Critical CSS', 'csccss'); ?></h1>
                <p class="description"><?php _e('Place your critical CSS here', 'csccss') ?></p>
                <div>
                    <textarea rows="15" class="large-text" name="csccss"><?= get_option('csccss'); ?></textarea>
                </div>
            </div>
            <?php submit_button(__('Save', 'csccss'), 'primary', 'submit', true); ?>
        </form>
        <?php
    }
endif;

add_action('wp_enqueue_scripts', 'csccss_front_end');
if (!function_exists('csccss_front_end')):
    function csccss_front_end(): void
    {
        wp_register_style('cs-critical-css', false);

        wp_enqueue_style('cs-critical-css');

        $critical_css = get_option('csccss');

        if (!empty($critical_css)) {
            wp_add_inline_style('cs-critical-css', $critical_css);
        }
    }
endif;

A WordPress plugin is not limited just to this code. The structure of a WordPress plugin can change to a properly organized directory and file structures with PHP classes, depending on the functionality of the plugin. This is how the critical CSS plugin page in WP Admin will look like:

WordPress Admin Menu Page of Plugin

We demonstrated in this post how to build a custom WordPress plugin from scratch with an explanation of plugin structure, plugin headers and usage of hooks in a plugin. To install this plugin, we can create a zip archive of this plugin and use the upload feature of the plugins page in WordPress. This plugin can also be uploaded to the WordPress plugins repository. To upload a plugin to WordPress, we need to register an account and use the SVN (Subversion) version control system tool to upload our plugin.

Home