fbpx

CyberPanel

Untitled 3

WordPress Plugins and How to Create Them

What is a plugin?

If you have been using WordPress for some time, you must have used many plugins by now and know that they are usually used to extend or enhance the capabilities of WordPress. You can add, remove, enable, disable or modify as you see fit most of the WordPress including how your site looks, interacts, and even what’s shown in the admin panel of your site.

Table Of Contents:

  1. Why plugin?
  2. Requirements
  3. Process

Why plugins?

You might be thinking “Hey, why do we have to create a separate plugin? Why not add some code to WordPress and be done with it?”

Good question, however, that’s not the best idea. But the need for plugin arrives from multiple perspectives.

Compartmentalization or sand boxing:

If you change the code of WordPress core and something goes wrong, your whole site is down. However, if it’s just a plugin, you can deactivate or delete it and everything will be back to normal. WordPress will even disable the function if it’s causing the critical error.

Overwrite protection:

WordPress upgrades replace the core files with new ones, if you had made any changes to those, they would be lost with the updates. With plugins, you can keep the changes.

creating-wordpress-plugin

Requirement

A working WordPress installation:

I am not sure if I need to explain this one but you need a working WordPress to create and test WordPress plugins.
Yes, yes I know you can be a super pro coder, and whatever you code runs perfectly without any testing but then again you won’t be here if that was the case so let’s make sure you have a working WordPress installation before we begin

A text-editor:

As WordPress is coded in PHP with styling using CSS and some functionality in JS, you will need a text editor, you can use MS VS code or Atom or Sublime Text or Notepad++. Yes, yes normal notepad will work but these other editors that I mentioned, have some really cool features like auto-completion, syntax highlighting, and even code test features which would save you a ton of time

Access to WordPress files:

While you can theoretically write all code, zip up the files, and go to “Plugins-> Add New” and upload them every time you make a change, it’s much better not to, instead try getting access to file manager for your site.

Better yet use an FTP connection so you can edit the files directly from the server and undo changes if something goes wrong.

Bit of a programming experience:

As developed in PHP CSS and JS, you will need a bit of touch with these languages, at least with PHP.

That’s it. That’s all you need

Untitled 4

Process

Naming your plugin:

Naming is an important part of the plugin. You have to make sure your site doesn’t have any plugin with the same name or handle used, similarly if you are going to upload it to WordPress’s repository of plugins, the same rules apply. There can’t be any duplicates.

Plugin Location:

When you are creating a plugin, you have to save it in your site’s plugin directory which is wp-content/plugins

Create a new folder in that directory with the name of your plugin. Let’s say the name of the plugin we are trying to create is a “My Test WhatsApp Plugin” so we can create a folder under the wp-content/plugin with the name of “my-test-wa” or any other slug that you like, making sure it’s unique.

Creating the main file:

Now we have to create the PHP file for the plugin. The name should be the same as the slug of the plugin i.e. my-test-wa.php in this case.

Describing the plugin:

WordPress plugins are described using the initial comments in the core file

For example, in our case, we will add the following to the very top of the my-test-wa file

<?php

/*

Plugin Name: My WhatsApp Test

Description: Simple plugin to add a WhatsApp click to chat button

Author: CyberPanel

*/

These are the basic things that you need to add, however, only the plugin’s ame is absolutely required whereas you can add things like a version of your plugin, PHP compatibility, WordPress compatibility, License, and external link to the plugin’s home page. Here is a complete list https://developer.wordpress.org/plugins/plugin-basics/header-requirements/

Okay so now we have a plugin that is showing up in our WordPress plugin list but doesn’t do anything. You must be thinking, hey man you can we can extend the functionality. Where is that?

That brings us to actions and hooks which are basically how you interact and enhance WordPress with plugins

Hooks:

Hooks are exactly what the name says they are, you can hook into any part of or any function of WordPress. There are more than 2000 of them which means you can add your code to almost any function of WordPress. Here is a list of all of them

https://adambrown.info/p/wp_hooks/hook

There are two types of hooks

Action hooks:

Actions hooks are used to add functions to any WordPress hook. Do you want to add a function to the head section of your site? You will need a wp_head() hook, want to add a function that runs at the end of your site loading? You have a wp_footer() hook.

In our case, we will be using that footer hook.

Filter hooks:

You want to modify the content of any block or site or manipulate data during its being processed by WordPress? This is where the filter hooks come in. A filter function allows you to modify data after or before being modified by your theme or other plugins etc. Here is a complete list of filter hooks https://codex.wordpress.org/Plugin_API/Filter_Reference

Back to business:

Now that you know what hooks are and that we are going to add an action hook to wp_footer, let’s start doing that.

So the first thing we have to do is create a function in the plugin’s file that we are going to hook into footer.

Hmm, that should be simple enough

function mwtp_whatsapp_button(){

/* code that we will add later

}

 

So, we know have a function, which still does nothing but hey baby steps right?

Now let’s hook it into wp_footer, so after this function ends we will add this

add_action(‘wp_footer’, ‘mwtp_whatsapp_button’)

So, what does that line do, you may ask. It tells WordPress, hey WP, do you mind if you hook my function called mwtp_whatsapp_button to your wp_footer hook?

With that added, whatever we are going to add to the function above will run when WordPress is running the site’s code.

Making the plugin work:

Now that we have hooked up with footer, let just add a button which we can show

In the function we created earlier, we will add the following

$info = '<a href="https://api.whatsapp.com/send?phone=123456789&amp;text=I want to contact you" target="_blank" > Contact on WhatsApp </a>';

echo $info;

This code doesn’t do anything fancy but it does add a link called “contact on WhatsApp” to the footer section of the site.

Voila, we have created a working WordPress plugin.

Adding images or other files to the plugin:

But wait, aren’t we missing something? Let’s think.

Would it be better if we had a WhatsApp icon instead of that text being displayed?

How would we do that now? You are telling me that plugins come with images of their own?

Okay okay, let’s do that too.

Now we are going to add a WhatsApp logo file to the plugin. Where do we put that? We can put it directly in the plugin’s directory and somehow link to it, right?

Nah, we are professionals, aren’t we? So we are going to it the proper way.

Inside the plugin directory, we are going to create another directory called “assets” and inside that directory, another one named “img”.

You might be asking why are we doing this again? No particular reason at this point other than looking cool and professional but in the long time when you plugin grows and you will have a lot of files and function, it’s better to have a hierarchy instead of chaos.

Now, that we have the img directory and we got a WordPress logo file from somewhere and uploaded it into that particular directory. Let’s change that function from text to that image.

So instead of contact on WhatsApp we are going to link to the image in plugin’s directory

$info = '<a href="https://api.whatsapp.com/send?phone=123456789&amp;text=I want to contact you" target="_blank" > <img src="'.plugins_url( " my-test-wa /assets/img/whatsapplogo.png" ).'" alt=" Contact on WhatsApp "></a>';

Remember when I told you that your plugin’s folder name should be unique? Yeah, WordPress provides an option to link directly to plugin URL which means you don’t have to hardcode your site’s URL and complete path to that image, any person who uses this plugin will get their own path with and get the file from their version of the plugin on their own site.

We are done now? We have the function working and we have the logo instead of the text. Is there anything missing?

Yeah, on most of the sites, the logo is kind of on the right bottom even if we keep scrolling. Now, we have to do some CSS trickery to make that happen.

Adding CSS to plugins:

We can directly inject the CSS within this code or I can teach how to add stylesheets in WordPress the proper way.

You guessed it. We are going to do it professionally

First things first, we are going to add a new folder in assets called CSS and create a style.css file in it.

.whatsappbutton {

position: fixed;

left: 8px;

bottom: 70px;

}

Now we are going to add that class to our function

$info = '<a href="https://api.whatsapp.com/send?phone=123456789&amp;text=I want to contact you" target="_blank" class="whatsappbutton"> <img src="'.plugins_url( " my-test-wa /assets/img/whatsapplogo.png" ).'" alt=" Contact on WhatsApp "></a>';

Registering and enqueueing a CSS file:

In order to add a CSS file to WordPress code we have to first register it, which need the function wp_register_style called with the name of what you want to call the stylesheet and the link to it

wp_register_style( 'my-test-wa-style', plugins_url( 'my-test-wa/assets/css/style.css' ) );

Now we have to enqueue it. So that will be

wp_enqueue_style( ' my-test-wa-style' );

Remember when we talked about WordPress hooks and how to use them to get into the functionality? WordPress has another hook for adding CSS or JS to the mix and it’s called wp_enqueue_scripts .

Now we need to move these two function calls in to a new function and hook that function to wordpress’s hook

function mtwb_add_style() {

wp_register_style( 'my-test-wa-style', plugins_url( 'my-test-wa/assets/css/style.css' ) );

wp_enqueue_style( 'my-test-wa-style' );

}

Adding it to the hook as before

add_action( 'wp_enqueue_scripts', ' mtwb_add_style' );

Finally, we have a working plugin with an icon and some css.

That’s it. We have a fully functioning and reasonable looking WordPress plugin.

Screenshot 85

Leave a Comment