Plugins are one of the best parts of using wordpress because you can install them very easy and get a new functionality for your website. You can find out there a plugin for alomost anything you want for your website. However you have to pay attention to what install in your website because some of these plugins can virus your website very easy without even realizing it.

Create Plugin in Wordpress From Scratch

In this part of the tutorial we will create the main files of our plugin and we will create the basic functions every plugin should have. Open your favourite ftp client and go  where your wordpress is installed -> wp-content/plugins.

Here we will create a new folder name: "my-first-plugin". In this folder let's create the following structure

• assets (folder)
  • css (folder)
    • style.css (file)
  • js (folder)
    • main.js (file)
  • images (folder)
• my_first_plugin.php (file)

my_first_plugin.php will be our main plugin file because here we will create all important functions for our plugin.

Step 1.

First step in plugin development is to make the plugin show up in the wordpress plugins page, right? To do that, open the php file and add the following bunch of code.

<?php
/**
* Plugin Name: My First Plugin
* Plugin URI: https://penguin-arts.com/
* Description: Best plugin to use for map images with hotspots.
* Version: 1.0
* Author: PenguinArts
* Author URI: https://penguin-arts.com/
**/

Now refresh the plugins page in wordpress and you will see that the plugin is already there. Even if it appear there, it won't work because there is no functionality. Let's create the basic functions for our plugin.

class MyFirstPlugin {
  /**
   * Plugin version, used for cache-busting of style and script file references.
   *
   * @since   1.0.0
   * 
   * 
   * @var     string
   */
   
   const VERSION = '1.0.0';
   
   /**
   * Unique identifier for the plugin.
   *
   * Use this value (not the variable name) as the text domain when internationalizing strings of text. It should
   * match the Text Domain file header in the main plugin file.
   *
   * @since    1.0.0
   *
   * @var      string
   */
   
   protected static $plugin_slug = 'pa-my-first-plugin';
   private $plugin_table;
   
   public function __construct(){
   	global $wpdb;
   	$this->plugin_table = $wpdb->prefix.'my_first_plugin';
    
    add_action('admin_head', array($this, 'register_css'));
    add_action('admin_init', array($this, 'register_scripts'));
   }
   
   
   
   public function register_css(){
    wp_enqueue_style('fontawesome-cdn', '//use.fontawesome.com/releases/v5.10.1/css/all.css?ver=5.10.1');
    wp_enqueue_style('googlefonts-cdn', '//fonts.googleapis.com/css?family=Fira+Sans:300,400,500,600,700&display=swap&subset=latin-ext');
    wp_enqueue_style('jqueryui', plugin_dir_url(__FILE__) . 'assets/css/style.css');
  }

  public function register_scripts(){
    wp_enqueue_script('main-scripts', plugin_dir_url(__FILE__) . 'assets/js/main.js');
  }
   
}

new ImageMapHotspot();

In the above code we have two main functions register_css and register_scripts which will be used to add our scrips and css files.

Now let's proceed to the next step and create first page of the plugin. To do that add the following line of code to the end of the __construct() function.

$this->create_main_page();

The following code will create the page:

public function create_main_page(){
    $page_title = 'My First plugin page';
    $menu_title = 'First Plugin';
    $capability = 'read';
    $slug = self::$plugin_slug;
    $callback = array($this, 'init_plugin_page');
    $icon = 'dashicons-book-alt';
    $position = 100;
    add_menu_page( $page_title, $menu_title, $capability, $slug, $callback, $icon, $position );
  }

In the callback parameter we have a function called init_plugin_page, we will use this function to create the whole content of the plugin, in other words this function will be used for the HTML structure of the page.

public function init_plugin_page(){
   $template = '<div class="plugin_content_page">';
   $template .= '<h2>My first plugin content</h2>';
   $template .= '</div>';
   echo $template;
}

That's it. Now we have all basic functions for our plugin. From here we will have to scale the plugin to do what we need from it.