Lots of people use WordPress for their Blog, they install plugins from the WordPress plugin store and use them. Though there are various plugins available in the store for using them free. But you can not modify them as you want. Years ago, I was also doing the same and started to hate WordPress. But later I understood that if I want to have my own design and customization in my website, then I will have to learn WordPress Plugin Development and understood that it’s really easy than I thought.

If you’ve ever felt this way, let me tell you something. Creating a WordPress plugin is not beyond your capabilities. Anyone that has skills enough to write basic PHP and modify a theme can create a plugin.

You can do almost anything using your own plugin. But as we will be learning to create our first WordPress plugin today, we will add some simple functionality into our plugin. After this tutorial you will have proper knowledge on

  • Creating a plugin that can be installed / activated / deactivated / uninstalled.
  • Displaying a custom HTML design after or before the contents of your blog post.

So lets start learning how to create a WordPress Plugin.

Creating Our First WordPress Plugin

To create a plugin you will have to navigate to the wp-content/plugins folder. Then create a new folder having your plugin name. Try to avoid spaces and Capital letters in the folder name. In today’s tutorial, I will keep “Our First Plugin” as my plugin name. So I created the folder named “ourfirstplugin”. Now create a file named “index.php” inside the folder. For the overview, now my created file path is wp-content/plugins/ourfirstplugin/index.php

Now open the file in a text editor, and paste the following information in it:

<?php
/*
Plugin Name: Our First Plugin
Plugin URI: https://your-website.com
description: This is our first wordpress plugin tutorial from https://blog.frsarker.com
Version: 1.2
Author: Ferdousur Rahman Sarker
Author URI: https://frsarker.com
*/

Of all this information, only the plugin’s name is required. But if you intend to distribute your plugin, you should add as much data as possible.

With that out of the way, you can now go into the Plugins section of your WordPress Admin Panel to activate your plugin. That’s all there is to it! Of course, this plugin doesn’t do anything; but strictly speaking, it is an active, functioning plugin.

Display Custom HTML Design after Blog Posts

As we now know how to create a plugin in WordPress, but the plugin we created actually do nothing. Lets give it some functionality. For this tutorial, our plugin will have the power to add a custom HTML design after each blog post. Lets hope it’s a simple contact box having some text and a send mail button.

Now first update your index.php file as bellow:

<?php
/*
Plugin Name: Our First Plugin
Plugin URI: https://your-website.com
description: This is our first wordpress plugin tutorial from https://blog.frsarker.com
Version: 1.2
Author: Ferdousur Rahman Sarker
Author URI: https://frsarker.com
*/


function insertHtmlAtEnd($content)
{
    /* is_single() is true only for single post page */
    if(is_single()){
        $content .= "<div style='background: #F3F3F3; padding: 20px; display: flex; align-items: center; justify-content: space-between;'>
                     <div>
                         <h4>Have Question?</h4>
                     </div>
                     <div>
                         <a href='mailto:yourmail@email.com'>Contact Me</a>
                     </div>
                 </div>";
    }

    return $content;
}

add_filter('the_content', 'insertHtmlAtEnd');

Let’s break the code. the add_filter() method tells WordPress to pass contents of all pages and posts into insertHtmlAtEnd() method.

You can see that inside the method we first checked if it’s only a single post page or not, cause I don’t want to add the custom HTML design into pages. If it’s only a post page then we added a simple HTML code after the post’s content. Content means the article body of a post.

Now if you visit any article page then at the end of the article you will find a super simple contact box.