How to Develop WordPress Plugin: The Ultimate Beginner’s Guide

I had to develop a custom plugin for specific need, for my own blog site. From my own personal experience, It was a very fun experience. WordPress powers nearly 43% of all websites on the internet, making plugin development not just fun but also incredibly valuable.

When I started, I was overwhelmed by lengthy tutorials that took forever to get to the point. That’s why I created this guide – to help you start creating WordPress plugins FAST without all the unnecessary fluff.

In this tutorial, we’ll build two things:

1. A simple “Hello World” plugin that adds text to the beginning of every post
2. A practical Facebook Like button plugin that you can actually use on your site

By the end, you’ll have the skills to create your own custom plugins that can transform any WordPress site. Let’s dive right in!

What Are WordPress Plugins?

WordPress plugins are PHP scripts that extend or modify WordPress functionality. They’re what make WordPress so incredibly flexible – enabling you to transform a simple blog into an e-commerce store, membership site, forum, or pretty much anything else you can imagine.

The best part? You don’t need to modify WordPress core files to add new features. Plugins keep your customizations separate, making them safer and easier to maintain.

Prerequisites

Before we start, I’m assuming you:

• Have basic knowledge of PHP
• Understand how WordPress works generally
• Are familiar with the WordPress folder structure
• Have a working WordPress installation for testing

If you’re missing any of these, don’t worry! The examples are simple enough that you can probably follow along anyway.

Where to Place Your Plugin Files

Every WordPress plugin lives in its own directory inside the wp-content/plugins folder of your WordPress installation. You have two options for organizing your plugin files:

1. Single file approach: Create one PHP file directly in the plugins directory
2. Multiple file approach: Create a folder for your plugin, with the main PHP file named the same as the folder

For this tutorial, we’ll use the second approach as it’s better for organization as your plugins grow. Let’s create a folder named like-fb and inside it, a file named like-fb.php.

Pro Tip 💡: Always choose a unique name for your plugin folder/file to avoid conflicts with other plugins in the WordPress ecosystem.

Making Your Plugin Visible in the Admin Panel

For WordPress to recognize your plugin, you need to add a special comment block at the top of your main PHP file. This provides WordPress with essential information about your plugin.

Add the following to the top of your like-fb.php file:

<?php
/*
Plugin Name: Like FB Plugin
Plugin URI: https://yourdomain.com/plugins/like-fb
Description: A simple plugin that adds a Facebook Like button to your posts
Version: 1.0
Author: Your Name
Author URI: https://yourdomain.com
License: GPL2
*/

// Plugin code will go hereCode language: HTML, XML (xml)

This header information tells WordPress:

• The name of your plugin
• Where to find more information (Plugin URI)
• What your plugin does
• The current version number
• Who created it
• Where to find the author
• What license the plugin uses

With this header in place, your plugin will immediately show up in the WordPress admin panel under Plugins, though it won’t do anything yet.

Creating Our First “Hello World” Function

Let’s start by creating a simple function that displays “Hello World” at the beginning of each post. Add this code below the plugin header:

function say_hello($content) {
    $hello_text = '<div class="hello-world-plugin">Hello world! This is my first WordPress plugin!</div>';
    return $hello_text . $content;
}Code language: PHP (php)

This function:

1. Takes the post content as a parameter
2. Creates a variable with our “Hello World” message inside a div
3. Returns our message followed by the original content

But this function won’t do anything until we tell WordPress when to run it.

Connecting Your Function to WordPress with Hooks

WordPress uses a system of “hooks” that allow your plugin to interact with WordPress at specific points during execution. There are two types of hooks:

1. Action hooks: Let you add functionality at specific points
2. Filter hooks: Let you modify data as it’s being processed

For our Hello World plugin, we need to modify the post content, so we’ll use a filter hook. Add this code after your function:

// Hook our function to WordPress
add_filter('the_content', 'say_hello');Code language: JavaScript (javascript)

This tells WordPress: “When you’re about to display post content (the_content), run our say_hello function first.”

Now activate your plugin in the WordPress admin panel and visit one of your posts. You should see “Hello world! This is my first WordPress plugin!” at the beginning of the post content.

Congrats! You’ve created your first WordPress plugin!

Upgrading to a Facebook Like Button Plugin

Let’s make our plugin more useful by replacing the hello world message with a Facebook Like button. Replace your say_hello function with this new function:

function fb_like($content) {
    // Get the current page URL
    $current_url = urlencode(get_permalink());
    
    // Facebook Like button HTML
    $fb_button = '
    <div class="fb-like-button-wrapper" style="margin-bottom: 20px;">
        <iframe src="https://www.facebook.com/plugins/like.php?href='.$current_url.'&width=450&layout=standard&action=like&size=small&share=true&height=35&appId=" 
                width="450" 
                height="35" 
                style="border:none;overflow:hidden" 
                scrolling="no" 
                frameborder="0" 
                allowfullscreen="true" 
                allow="autoplay; clipboard-write; encrypted-media; picture-in-picture; web-share">
        </iframe>
    </div>';
    
    // Add the button before the content
    return $fb_button . $content;
}

// Hook the function to WordPress
add_filter('the_content', 'fb_like');Code language: PHP (php)

This function:

1. Gets the URL of the current post using WordPress’s get_permalink() function
2. Creates an iframe that loads Facebook’s Like button for that specific URL
3. Returns the button HTML followed by the original content

Testing Your Facebook Like Button Plugin

After updating your code, go back to your WordPress admin panel. If your plugin was already activated, you might need to deactivate and reactivate it for the changes to take effect.

Now visit any post on your site, and you should see a Facebook Like button at the beginning of the content. The best part is that this button is customized for each post – when users click like, they’re liking the specific post they’re reading!

Adding Plugin Settings

Real-world plugins usually provide options that users can configure. Let’s enhance our plugin by adding a simple settings page that lets users:

1. Enable/disable the Like button
2. Choose where to display it (before or after content)
3. Select which post types should display the button

Add this code to your plugin:

// Create admin menu for plugin settings
function fb_like_menu() {
    add_options_page(
        'FB Like Settings',          // Page title
        'FB Like Settings',          // Menu title
        'manage_options',            // Capability required
        'fb-like-settings',          // Menu slug
        'fb_like_settings_page'      // Function to display the page
    );
}
add_action('admin_menu', 'fb_like_menu');

// Create the settings page content
function fb_like_settings_page() {
    // Save settings if form was submitted
    if (isset($_POST['fb_like_submit'])) {
        $options = array(
            'enabled' => isset($_POST['fb_like_enabled']) ? 1 : 0,
            'position' => sanitize_text_field($_POST['fb_like_position']),
            'post_types' => isset($_POST['fb_like_post_types']) ? $_POST['fb_like_post_types'] : array('post')
        );
        update_option('fb_like_options', $options);
        echo '<div class="updated"><p>Settings saved!</p></div>';
    }
    
    // Get current settings
    $options = get_option('fb_like_options', array(
        'enabled' => 1,
        'position' => 'before',
        'post_types' => array('post')
    ));
    
    // Display the settings form
    ?>
    <div class="wrap">
        <h1>Facebook Like Button Settings</h1>
        <form method="post" action-xhr="#">
            <table class="form-table">
                <tr>
                    <th>Enable Like Button</th>
                    <td>
                        <input type="checkbox" name="fb_like_enabled" value="1" <?php checked(1, $options['enabled']); ?>>
                    </td>
                </tr>
                <tr>
                    <th>Button Position</th>
                    <td>
                        <select name="fb_like_position">
                            <option value="before" <?php selected('before', $options['position']); ?>>Before content</option>
                            <option value="after" <?php selected('after', $options['position']); ?>>After content</option>
                        </select>
                    </td>
                </tr>
                <tr>
                    <th>Show on</th>
                    <td>
                        <?php
                        $post_types = get_post_types(array('public' => true), 'objects');
                        foreach ($post_types as $post_type) {
                            $checked = in_array($post_type->name, $options['post_types']) ? 'checked' : '';
                            echo '<label><input type="checkbox" name="fb_like_post_types[]" value="'.$post_type->name.'" '.$checked.'> '.$post_type->labels->singular_name.'</label><br>';
                        }
                        ?>
                    </td>
                </tr>
            </table>
            <p class="submit">
                <input type="submit" name="fb_like_submit" class="button-primary" value="Save Changes">
            </p>
        </form>
    </div>
    <?php
}

// Update our fb_like function to use settings
function fb_like($content) {
    // Get plugin options
    $options = get_option('fb_like_options', array(
        'enabled' => 1,
        'position' => 'before',
        'post_types' => array('post')
    ));
    
    // If disabled or not on a selected post type, return content unchanged
    if (!$options['enabled'] || !is_singular($options['post_types'])) {
        return $content;
    }
    
    // Get the current page URL
    $current_url = urlencode(get_permalink());
    
    // Facebook Like button HTML
    $fb_button = '
    <div class="fb-like-button-wrapper" style="margin-bottom: 20px;">
        <iframe src="https://www.facebook.com/plugins/like.php?href='.$current_url.'&width=450&layout=standard&action=like&size=small&share=true&height=35&appId=" 
                width="450" 
                height="35" 
                style="border:none;overflow:hidden" 
                scrolling="no" 
                frameborder="0" 
                allowfullscreen="true" 
                allow="autoplay; clipboard-write; encrypted-media; picture-in-picture; web-share">
        </iframe>
    </div>';
    
    // Add button before or after content based on settings
    if ($options['position'] == 'before') {
        return $fb_button . $content;
    } else {
        return $content . $fb_button;
    }
}Code language: JavaScript (javascript)

Now our plugin allows users to customize its behavior without editing code. This is critical for real-world plugins that might be used by non-developers.

Best Practices for WordPress Plugin Development

As you continue developing WordPress plugins, keep these best practices in mind:

1. Use unique function names – Prefix your functions with your plugin name to avoid conflicts
2. Sanitize all user input – Never trust user input; always sanitize it before using or storing it
3. Follow WordPress coding standards – Makes your code more readable and compatible
4. Use nonces for form submissions – Protects your forms from CSRF attacks
5. Enqueue scripts and styles properly – Don’t hardcode them into your plugin
6. Use translation functions – Makes your plugin translatable (__(), _e(), etc.)
7. Write clear documentation – Help users understand how to use your plugin

Advanced Plugin Features You Can Explore

Once you’ve mastered the basics, you might want to explore these more advanced plugin features:

1. Custom post types – Create entirely new content types
2. Custom taxonomies – Add custom categories and tags
3. Shortcodes – Let users add plugin features anywhere with a simple code
4. Widgets – Add content to widget areas
5. AJAX interactions – Create dynamic, interactive features
6. Database operations – Store and retrieve custom data
7. REST API integration – Allow other applications to interact with your plugin

Conclusion

Creating WordPress plugins is an incredibly powerful skill that can take your development career to new levels. We’ve covered the basics of plugin creation, from setting up files to adding settings pages, but this is just the beginning.

I encourage you to experiment with your own plugin ideas. Start small, test thoroughly, and gradually add more features as you get comfortable with the WordPress plugin API.

Remember, the key to becoming a successful plugin developer is practice and persistence. Every great WordPress plugin started with a simple idea and grew from there.

Have you created a WordPress plugin before? What challenges did you face? Share your experiences in the comments below!

Additional Resources

• WordPress Hook Reference
• WordPress Plugin Developer Handbook
• WordPress Coding Standards
• Plugin Security Guide
• WordPress MultiSite Guide