Create a WordPress Plugin From Scratch

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.

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.

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)

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.

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