How To Create Basic WordPress Plugin?

How To Create a Basic WordPress Plugin (GDPR Notice Plugin)?

What Is A WordPress Plugin?

plugin in WordPress is a PHP-based script that extends or alters the core functionality of WordPress. Quite simply, plugins are files installed in WordPress to add a feature, or set of features, to WordPress. Plugins can range in complexity from a simple GDPR notice plugin to an extremely complex eCommerce package. There is no limit to what a plugin can do in WordPress; because of this, there is no shortage of plugins available for download.

WordPress has, over the past two decades, grown into the CMS that powers more than 60% of all websites. If you’re proficient at WordPress development, you’ll never be out of a job again.

Starting out as a simple blogging system, over the last few years WordPress has transformed into a fully-featured and widely used content management system (CMS). It offers individuals and companies worldwide a free, paid, and open-source alternative to closed-source and often very expensive systems.

When I say fully featured, that’s really only true because of the ability to add any functionality needed in the form of a plugin. The core of WordPress is simple: you add in functionality with plugins as you need it. Developing plugins allow you to stand out from all WordPress Developers: you can showcase your specific area of expertise and help users benefit while not having to deal with parts of WordPress you don’t care or know about.

Why Create A WordPress Plugin?

WordPress plugins have from the basic “Hello Dolly” plugin that often greets new users, to fully functioning online shops and payment portals, but they all exist for a function that the basic elements of a WordPress install do not provide. a developer might have an idea for a new function that targets to perform a certain action or set of actions, and a complex site might use several compatible plugins.

also WordPress plugins market is wide and successful, you can create a business with just one plugin that you develop, and most of the plugins companies do a free version with few functions and features, and add to it by the paid version, and paid version could be recurring or one time, but you can add more services like support, or upgrades or certification..etc and generate more revenue.

What Do You Need To Create Your First WordPress Plugin?

Creating A WordPress Plugin Is Easier Than You Think, to build your own plugin and use it on your WordPress website, you’ll need 2 things:

• 1- a code editor (like Visual Studio Code which is free).
• 2- a WordPress installation on your localhost or on your live website (Coming soon an article on how to install WordPress on your local Windows or Mac PC! stay tuned).
• Note: don’t test your plugin on your live site until you know it works!

What Is WordPress Plugin Folder Structure?

1. The folders you’ll need in your plugin are:
2. the plugin main PHP file (required).
3. assets folder for different file types like JavaScript, CSS, and Images.
4. Include folders to organize the plugin code.

Creating And Installing Your New Plugin (The First Steps)

1. Open WordPress plugins folder, this folder is always located at /wp-content/plugins.
2. Create a new folder for your plugin, giving it a unique name using lowercase letters and dashes
3. Create the main PHP file for your plugin, a PHP file within your new plugin folder and give it the same name as your plugin folder
4. Setup your plugin’s information, by writing this code in the main PHP file:

<?php

/**
 * Plugin Name: Gemini Tutorials Simple GDPR Notice
 * Plugin URI: https://www.geminitutorials.com/create-basic-wordpress-plugin
 * Description: The very first plugin that I have ever created. that shows a GDPR popup once every year.
 * Version: 1.0.0
 * Author: Emad Zedan
 * Author URI: https://www.geminitutorials.com
 * Test Domain: Gemini Tutorials
 * License: GPL v2 or later
 * License URI: https://www.gnu.org/licenses/gpl-2.0.txt
 */

That’s it! You’ve just completed the minimum required steps to create a WordPress plugin. You can now activate it within the WordPress admin and start writing your own code for your own plugin.

Creating A Simple GDPR Notice WordPress Plugin

CSS:

/* Cookies Notice */

.cookies-notice {
    font-size: 12px;
    position: fixed;
    bottom: -150px;
    opacity: 0;
    left: 50%;
    margin-left: -150px;
    width: 300px;
    z-index: 400000;
    background-color: #333333;
    color: #ffffff;
    border: 1px solid #393939;
    transition: opacity ease-in-out 0.5s, bottom ease-in-out 1s;
    -moz-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.3);
    -webkit-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.3);
    box-shadow: 0px 0px 5px rgba(72, 51, 51, 0.3);
}

.cookies-notice-close {
    opacity: 1;
    bottom: 70px;
}

.cookies-notice-text {
    min-width: 165px;
    display: inline-block;
    font-size: 14px;
    padding: 30px;
}

.cookies-notice-button {
    background-color: #3d4049;
    color: #ffffff;
    display: inline-block;
    border: none;
    padding: 10px;
}

.cookies-notice-button:hover {
    background-color: #4277ff;
}


/* End of Cookies Notice */

jQuery:

$(document).ready(function() {
    //Cookies Notice
    $(".cookies-notice").addClass("cookies-notice-close");
    if (Cookies.get("gemini_tutorials_simple_gdpr_notice_cookie") == "seen") {
        $(".cookies-notice").css("display", "none");
        //Comment This Line On Production
        //Cookies.remove("gemini_tutorials_simple_gdpr_notice_cookie");
    }
    $("#cookies-button").click(function() {
        $(".cookies-notice").removeClass("cookies-notice-close");
        Cookies.set("gemini_tutorials_simple_gdpr_notice_cookie", "seen", { expires: 365 });
    });
    //End of Cookies Notice
});

The Plugin Main PHP File Code:

<?php

/**
 * Plugin Name: Gemini Tutorials Simple GDPR Notice
 * Plugin URI: https://www.geminitutorials.com/create-basic-wordpress-plugin
 * Description: The very first plugin that I have ever created. that shows a GDPR popup once every year.
 * Version: 1.0.0
 * Author: Emad Zedan
 * Author URI: https://www.geminitutorials.com
 * Test Domain: Gemini Tutorials
 * License: GPL v2 or later
 * License URI: https://www.gnu.org/licenses/gpl-2.0.txt
 */

if (!defined('ABSPATH')) {
      exit;
}
if (!is_admin()) {

      require_once plugin_dir_path(__FILE__) . '/inc/function-frontend-styles.php';
      require_once plugin_dir_path(__FILE__) . '/inc/function-frontend-scripts.php';

      echo '<div class="cookies-notice">' .
            '<span class="cookies-notice-text">We Use Cookies</span>' .
            '<button class="cookies-notice-button" id="cookies-button">OK! I Got IT</button>' .
            '</div>';
}

Note: I disabled the plugin from showing in the admin area, so it is just viewable on the front-end of the website, also included the CSS and jquery code from the “inc” folder.

function-frontend-styles PHP File:

<?php

if (!defined('ABSPATH')) {
	exit;
}

// Styles=========================================
function gemini_tutorials_simple_gdpr_notice_register_styles()
{
	wp_enqueue_style('gemini-tutorials-simple-gdpr-notice-css', plugin_dir_url(dirname(__FILE__)) . "assets/css/css.css", array(), '1.0.0', 'all');
}

add_action('wp_enqueue_scripts', 'gemini_tutorials_simple_gdpr_notice_register_styles');
// End of Styles==================================

function-frontend-scripts PHP File:

<?php

if (!defined('ABSPATH')) {
	exit;
}

// Javascript=====================================
function gemini_tutorials_simple_gdpr_notice_register_scripts()
{
	wp_enqueue_script('gemini-tutorials-simple-gdpr-notice-jquery', "https://code.jquery.com/jquery-3.6.0.min.js", array(), '3.6.0', true);
	wp_enqueue_script('gemini-tutorials-simple-gdpr-notice-cookie', "https://cdnjs.cloudflare.com/ajax/libs/js-cookie/2.2.1/js.cookie.min.js", array('gemini-tutorials-simple-gdpr-notice-jquery'), '2.2.1', true);

	wp_enqueue_script('gemini-tutorials-simple-gdpr-notice-gdpr-js', plugin_dir_url(dirname(__FILE__)) . "assets/js/js.js", array('gemini-tutorials-simple-gdpr-notice-jquery', 'gemini-tutorials-simple-gdpr-notice-cookie'), '1.0.0', true);
}

add_action('wp_enqueue_scripts', 'gemini_tutorials_simple_gdpr_notice_register_scripts');
// End of Javascript==============================

Read More:

Creat a WordPress Custom Theme

On Our Blog: How to Create a WordPress Custom Theme?

Actions and Filters

If you’re going to start coding your own plugins, I highly suggest you familiarize yourself with how actions and filters work and which ones are available for you to use. The WordPress Codex is where I spend a lot of my time, I suggest you do the same.

Plugin API: Actions and Filters
Plugin API: Action Reference
Plugin API: Filter Reference

Feel Free to bookmark my website to keep it as a reference for your work in the future.