create a plugin from scratch

Create a WordPress Plugin From Scratch

Last modified: October 23, 2018

One of the best features of WordPress is WordPress plugins. Plugins could add virtually any functionality you might need. There are plugins for:

Even if you are a WordPress developer, sometimes building a plugin from scratch might look like a huge deal, however – you can create a simple plugin within minutes. It all depends on the functionality you want to add to the plugin.

Build a Plugin From Scratch - 1 file

  1. Within you plugins folder add a new folder with your new plugin name. In my case it will be called “whatsapp-c2c”
  2. Add a file with the same name within the file, so in my case it will be called whatsapp-c2c.php
  3. Add some information about the plugin, similar to what we do within the style.css file when creating a WordPress theme from scratch – The following is what I will add to mine, change yours accordingly
    <?php
    /*
    Plugin Name: Whatsapp c2c
    Description: Whatsapp click to chat simple plugin
    Author: Scan WP
    */
    

     

If I told you you just created a plugin would you believe me? Well you did.

Go to your plugin page in the /wp-admin/and search for your plugin name, you should find it there inactivated but installed.

Plugin

Now all you have to do is click activate and your plugin will be activated. Of course it won’t do anything but it’s an active plugin.

Add a Function to the Plugin

For the purpose of this tutorial, we are going to create a very simple Whatsapp Click to Chat plugin with static information.

function SWP_Whatsapp_btn() {
  $info = '<a href="https://api.whatsapp.com/send?phone=00155555555&amp;text=I am interested in your service" target="_blank" class="whatsapp">
  <img src="'.plugins_url( "whatsapp-c2c/assets/img/whatsapp.png" ).'" alt="whatsapp">
</a>';
echo $info;
}
add_action( 'wp_footer', 'SWP_Whatsapp_btn' );

Explanation:

In the above function we are injecting a button into the site footer. The button is a simple image (icon) with a link around it. For it to actually work for you, change the number into your own phone number. You can also edit the text of the message.

For the image to work, I added a free icon to a folder called assets->imgwhich lives inside the plugin. So now we have a main folder with 1 php file and an image in an img folder which is in the assets folder.

If you refresh your site (front end) you should actually see the icon at the bottom of the page (assuming you installed one)

Inject a Style File for the Plugin

The next step here is to add a style file which we will use to make the icon in a fixed position on the bottom of the page.

Add the following to your main PHP file:

// Register style sheet.
add_action( 'wp_enqueue_scripts', 'swp_register_plugin_styles' );

/**
 * Register style sheet.
 */
function swp_register_plugin_styles() {
  wp_register_style( 'whatsapp-c2c-style', plugins_url( 'whatsapp-c2c/assets/css/plugin.css' ) );
  wp_enqueue_style( 'whatsapp-c2c-style' );
}

After adding the above, go into your assets folder, and add a css folder. Within that folder, add a file called plugin.css

Add this to the style sheet:

.whatsapp {
    position: fixed;
    left: 5px;
    bottom: 65px;
}

This will make sure the icon is position fixed to the bottom left of the page.

Finish Creating a Wordpress Plugin From Scratch

That’s basically it. Yes – this is a VERY simple plugin but it gets the job done.

Final Thoughts

If you want to build something similar to be sold on a marketplace, you will have to add much more functionality such as enabling a dynamic phone number, dynamic icon, dynamic positioning etc.

However, this plugin was just for the purpose of practice. In our next tutorial we will take this to the next level and learn how to add a shortcode to our plugins.

If you had a hard time following along – here is the final code – whatsapp-c2c

Save 4 Later
Email these links to yourself