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 one. 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 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 a 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 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 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 desired functionality. 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. You can visit Header Requirements page of WordPress for complete list of header parameters. Plugin headers are explained as below:

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

How to Create a WordPress Plugin

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

  • Go to directory wp-content/plugins of your WordPress website
  • Create a folder with cs-critical-css name.
  • Inside cs-critical-css folder create a PHP file with cs-critical-css.php name.
  • Remember the directory name and plugin file name must be same and unique to your plugin.
  • Open the file cs-critical-css.php in editor and add plugin headers.
  • Register activation hook to execute any code when plugin is activated.
  • Add action hook admin_menu to add menu page.
  • Add code to render critical CSS form with text area in 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() {
    // Add some code here you want to execute when plugin is activated
}

add_action('admin_menu', 'csccss_menu_page');
function csccss_menu_page(){
    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(){?>
        <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(){
        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 to just this code. You might need to create a properly structured for directories and more files depending on the functionality of plugin. You can create a zip archive of this plugin and use upload feature of plugins page in WordPress. This plugin can also uploaded to WordPress plugins repository. To upload a plugin to WordPress you need to register an account and use SVN (Subversion) version control system tool to upload your plugin. This how the critical CSS plugin page in WP Admin will look like:

WordPress Admin Menu Page of Plugin
Home