The Engineering Projects

Enqueue Scripts Files in WordPress Plugin

Hello everyone, I hope you all are fine and having fun with your lives. In today's tutorial, I am gonna show you How to Enqueue Scripts Files in WordPress Plugin. It's the third tutorial in this series of WordPress Plugin Creation. In our previous tutorial, we have seen How to Add Basic Functions in WordPress Plugin, so now the next thing we need to add is our scripts .js files and style .css files. As I told you in my previous tutorial that we can add these codes in a single file as well but it will make the file too heavy and complex. But if we divide our code in separate files then it will be quite easily to handle and debug in future. So, let's have a look at How to Enqueue Scripts Files in WordPress Plugin:

Enqueue Scripts Files in WordPress Plugin

• Let's first create a sample .js and .css files.
• So create a new folder in your main folder and rename it to assests.
• In this assets folder, create two files and rename them to:
  • mystyle.css
  • myscript.js

• Here's the folder and files tree which we have created so far:

• Today, I am not gonna add any code in .js or .css files, we will only include them in our Main PHP File.
• In coming tutorials, we will add codes in these files.
• So, now we have created our files, let's Enqueue Scripts Files in main PHP file.

/* Main class code ends here */

if ( !class_exists( 'NamePluginTEP' ) )
{

	class NamePluginTEP
	{

		public $pluginName;

		function __construct()
		{
			$this -> pluginName = plugin_basename(__FILE__);
		}
		
		function activate()
		{
			require_once plugin_dir_path( __FILE__ ).'inc/Activate.php';
			Activate::activatePlugin();
		}
 
		function deactivate()
		{
			require_once plugin_dir_path( __FILE__ ).'inc/Deactivate.php';
			Deactivate::deactivatePlugin();
		}
                
		function enqueue()
		{
			wp_enqueue_style ('mypluginstyle', plugins_url('/assets/mystyle.css' , __FILE__));
			wp_enqueue_script ('mypluginscript', plugins_url('/assets/myscript.js' , __FILE__));
		}

	}
 
	$namePluginTEP = new NamePluginTEP();

}

/* Main class code ends here */

• In the above code, you can see I have added a new function named enqueue().
• The method used to include css file is wp_enqueue_style, which is a predefined WordPress method.
• I have provided it with the path of our newly created css file, placed in assets folder.
• Same goes for the js file with a slight change in predefined WordPress method, for script it is wp_enqueue_script.
• We have successfully created the files and then the enqueue function, now we also need to call this function.
• We can call it in the construct function as construct is automatically called on class initialization but it's better to not add much load on the construct function.
• So here's how we are gonna do that:

/* Main class code ends here */

if ( !class_exists( 'NamePluginTEP' ) )
{

	class NamePluginTEP
	{

		public $pluginName;

		function __construct()
		{
			$this -> pluginName = plugin_basename(__FILE__);
		}
		
		function activate()
		{
			require_once plugin_dir_path( __FILE__ ).'inc/Activate.php';
			Activate::activatePlugin();
		}
 
		function deactivate()
		{
			require_once plugin_dir_path( __FILE__ ).'inc/Deactivate.php';
			Deactivate::deactivatePlugin();
		}
                
		public function init_func()
		{
			add_action('admin_enqueue_scripts' , array($this , 'enqueue') );
		}

		function enqueue()
		{
			wp_enqueue_style ('mypluginstyle', plugins_url('/assets/mystyle.css' , __FILE__));
			wp_enqueue_script ('mypluginscript', plugins_url('/assets/myscript.js' , __FILE__));
		}

	}
 
	$namePluginTEP = new NamePluginTEP();
	$namePluginTEP -> init_func();

}

/* Main class code ends here */

• You can see in the above code that I have created a new function called init_func() and I have simply called enqueue function there.
• I have highlighted another line at the bottom where I have used the variable having new instance of our class, and then triggered the init_func() method.
• It's like an initialization function so if we need to call some other functions at start, we will simply place them in this init_func().

So, that's how we can easily Enqueue Scripts Files in WordPress Plugin. I hope you guys have enjoyed today's tutorial. In the next tutorial, we are gonna have a look at How to insert custom Links in WordPress Plugin. Till then take care and have fun !!! :)

Add Basic Functions in WordPress Plugin

Hello friends, I hope you all are doing great. In today's tutorial, I am going to show you How to Add Basic Function in WordPress Plugin. In the previous tutorial, we have seen How to Create a Simple WordPress Plugin, and today we are gonna add some basic functions in it, which are kind of compulsory. You may not find them useful right now but they will come in handy when we will work on complex plugins. It's the second tutorial in WordPress plugin creation series. If you got into any trouble then ask in comments and I will try my best to resolve them all. So, let's get started with these basic functions and add then in our newly created WordPress plugin:

Add Basic Functions in WordPress Plugin

• As we have already created the class for our wordpress plugin so now its time to add some functions in it.
• The first function we are going to add is the construct function.
• Construct is the default function, which is called by the class on initialization.
• So in simple words, when our plugin will start then construct function will be automatically called.
• Here's our code for the construct function:

/* Main class code starts here */

if ( !class_exists( 'NamePluginTEP' ) )
{ 

	class NamePluginTEP
	{

		public $pluginName;

		function __construct()
		{

			$this -> pluginName = plugin_basename(__FILE__);

		}
	
	}

	$namePluginTEP = new NamePluginTEP();

}

/* Main class code ends here */

• We have already seen How to initialize the class NamePluginTEP.
• Inside this class, I have created a new variable named pluginName.
• After that I have added a construct function and this function will be called by default, it's simple object oriented programming.
• Within this construct function, I have used plugin_basename, which will give us the name of our plugin.
• I have saved the name in our variable pluginName.
• We are not gonna use this variable rite now but soon in the coming tutorials.
• The next two functions we are gonna add are Activate and Deactivate.
• These functions will be executed, when you will activate or deactivate your plugin in the WordPress plugin section.
• Here's the code for these two functions:

/* Main class code starts here */

if ( !class_exists( 'NamePluginTEP' ) )
{ 

	class NamePluginTEP
	{

		public $pluginName;

		function __construct(){
			$this -> pluginName = plugin_basename(__FILE__);
		}

		function activate(){
		}

		function deactivate(){
		}

	}

	$namePluginTEP = new NamePluginTEP();

}

/* Main class code ends here */

register_activation_hook( __File__, array( $namePluginTEP, 'activate') );

register_deactivation_hook( __File__, array( $namePluginTEP, 'deactivate') );

• As you can see in the above code that we have added both of these functions activate and deactivate in our Main Plugin class.
• Now in order to call these functions, we have to use built-in WordPress hooks.
• We have used two hooks, which are:
  • register_activation_hook.
  • register_deactivation_hook.
• These registration hooks will check the __File__ and then will find the activate/deactivate function in our class.
• Instead of adding all codes in a single PHP file, it's always a better approach to create separate PHP files for each method or routine.
• So, now we are gonna create two more PHP files for Activation and Deactivation and then will call them in our main PHP file.

Creating Activation & Deactivation PHP Files

• Till now, we have just created one Folder named NamePluginTEP and then we have created a php file of the same name, which is actually name of our plugin.
• So, now in this Main Plugin Folder, create a new folder and rename it to inc (short for include).
• In this inc folder, you have to create a two php files, named as:
  • Activate.php
  • Deactivate.php
• In the Activate.php file, place the below code:

<?php

/*
* @package NamePluginTEP
*/

class Activate
{
	public static function activatePlugin()
	{
		flush_rewrite_rules();
	}
}

• In the Deactivate.php file, place the below code:

<?php

/*
* @package NamePluginTEP
*/

class Deactivate
{
	public static function deactivatePlugin()
	{
		flush_rewrite_rules();
	}
}

• In both of these files, we have created a new class and then added a public static function.
• We have just used the method flush_rewrite_rules() , which is kind of a refresh and I am not adding any more codes in it.
• Don't worry in coming tutorials, these all are gonna come in handy, rite now we are just building the foundation.
• Now we have to call these functions in our Main PHP File.
• So our main PHP class will be something like that:

<?php

/**
 *
 * @package NamePluginTEP
 *
 */

/*

Plugin Name: NamePluginTEP
Plugin URI: https://www.theengineeringprojects.com/
Author: Syed Zain Nasir
Author URI: https://twitter.com/syedzainnasir
Description: It's our First Simple WordPress Plugin.
Version: 1.0.0
License: GPLv2

*/

/*

This program is free software: you can redistribute it and/or modify
it under the terms of the GNU General Public License as published by
the Free Software Foundation, either version 3 of the License, or
(at your option) any later version.

This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
GNU General Public License for more details.

You should have received a copy of the GNU General Public License
along with this program.  If not, see <https://www.gnu.org/licenses/>.

*/

defined( 'ABSPATH' ) or die( 'We are having an error.' );

/* Main class code starts here */

if ( !class_exists( 'NamePluginTEP' ) )
{

	class NamePluginTEP
	{

		public $pluginName;
		function __construct(){
			$this -> pluginName = plugin_basename(__FILE__);
		}
		
		function activate()
		{

			require_once plugin_dir_path( __FILE__ ).'inc/Activate.php';
			Activate::activatePlugin();

		}

		function deactivate()
		{

			require_once plugin_dir_path( __FILE__ ).'inc/Deactivate.php';
			Deactivate::deactivatePlugin();

		}

	}

	$namePluginTEP = new NamePluginTEP();
}

/* Main class code ends here */

register_activation_hook( __File__, array( $namePluginTEP, 'activate') );

register_deactivation_hook( __File__, array( $namePluginTEP, 'deactivate') );

• We have just added two lines in both of our activate and deactivate functions.
• This method require_once plugin_dir_path is used to include the Activate.php file for once and we have passed its path.
• In the second line, we have simply called our function Activate::activatePlugin() , static functions can easily be called that way.
• Now activate or deactivate your plugin in WordPress Plugin section but it won't do anything as still we haven't added any remarkable code in it, we are just building the foundation. :P
• But the good thing is it's not crashing or giving any error, that's a good sign. :)
• Here's a screenshot of our WordPress plugin:

• I have activated the plugin but still its not doing anything but it will do something soon. :P

So, that was all for today. I hope you will easily Add these Basic Functions in WordPress Plugin. In the coming tutorial, we are gonna have a look at How to Enqueue Scripts Files in WordPress Plugin. Till then take care and have fun !!! :)

How to Create a Simple WordPress Plugin

Hello friends, I hope you all are doing great. In today's tutorial, I am gonna show you How to Create a Simple WordPress Plugin. I am starting this new series on WordPress Plugins and we will cover everything from basics to pro. This WordPress Plugin series is gonna be a long one. As today's our first post, so we are just gonna create a plugin and in later tutorials, we will add different features in it. I will try to cover all the basics but if you got into any trouble then ask in comments and I will try to resolve them out. I have been working a lot these days on WordPress and have learnt many new things so I thought to share them on my blog. It will be helpful for computer software engineers, as if you have created your own site with WordPress then you must have thought about creating custom WordPress plugins as well. So, let's get started with How to Create a Simple WordPress Plugin: Note:

• I would recommend you to use xampp and then install WordPress on it and test everything there.

Create a Simple WordPress Plugin

• First of all, what you need to do is, you need to find the wp-config.php file in the root directory of your WordPress installation.
• Open this file and place the below code in it:

define('WP_DEBUG', true);

• It will bring the WordPress in debugging mode and if we got any error while plugin development then we will also get the reason for that error.
• If its already defined and set to False then you need to change it to True.
• Now let's create some files for our first plugin, so open the folder named wp-content in the root WordPress installation.
• In this folder you will find a folder name Plugins, so open it up.
• In Plugins folder, create a new folder and the name of the folder should be the name of your plugin.
• So, I have renamed this new folder to NamePluginTEP as its my plugin name.
• The name of your plugin must have to be unique because if we have the preexisting plugin with the same name then our plugin will not index.
• So make sure your plugin's name must be different.
• Open this folder and now create a new php file with the same name so my file's name will be NamePluginTEP.php.
• For WordPress, it will be the main file of our plugin, it checks the name the file and compares it with name of the folder.
• Now we have to add some code in this php file for basic configuration.
• So place this code in the NamePluginTEP.php file:

<?php

/**
*
* @package NamePluginTEP
*
*/

/*

Plugin Name: NamePluginTEP
Plugin URI: https://www.theengineeringprojects.com/
Author: Syed Zain Nasir
Author URI: https://twitter.com/syedzainnasir
Description: It's our First Simple WordPress Plugin.
Version: 1.0.0
License: GPLv2

*/

?>

• You have to copy and paste the above code as its the defined syntax by WordPress.
• Now save your file and open the plugins page of your WordPress and if everything goes fine then you will get something as shown in below figure:

• You can activate or deactivate this plugin but it's not gonna make any change as its just created and doesn't have any functions in it.
• First of all, we need to secure our plugin so that if someone is accessing our plugin file externally then he can't get it.
• So, we need to add this line just below the copyrights:

defined( 'ABSPATH' ) or die( 'We are having an error.' );

• So, if the user is accessing the file from ABSPATH (absolute path) then its fine otherwise generate an error and exit.
• Now we need to create a new class for our plugin and the name of this class will be the same as our plugin's name:

if ( !class_exists( 'NamePluginTEP' ) )
{
   class NamePluginTEP
   {
   }
   $namePluginTEP = new NamePluginTEP();
}

• In the above code, first of all I have placed a check to see if the class already exists. It's a safety precaution.
• If the class doesn't exist, then we have created a new class of the same name.
• After the class, I have simply created a new instance of this class and saved it in a variable starting with small "n" while the class starts with capital "N".
• If you already know php, then it won't be much of an issue for you as it's simple object oriented programming.
• So, now when our plugin is loaded then this class will be initialized.
• Here's the complete php code of our plugin:

<?php

/**
 *
 * @package NamePluginTEP
 *
 */

/*

Plugin Name: NamePluginTEP
Plugin URI: https://www.theengineeringprojects.com/
Author: Syed Zain Nasir
Author URI: https://twitter.com/syedzainnasir
Description: It's our First Simple WordPress Plugin.
Version: 1.0.0
License: GPLv2

*/

/*

This program is free software: you can redistribute it and/or modify
it under the terms of the GNU General Public License as published by
the Free Software Foundation, either version 3 of the License, or
(at your option) any later version.

This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
GNU General Public License for more details.

You should have received a copy of the GNU General Public License
along with this program.  If not, see <https://www.gnu.org/licenses/>.

*/

defined( 'ABSPATH' ) or die( 'We are having an error.' );

if ( !class_exists( 'NamePluginTEP' ) )
{

   class NamePluginTEP
   {
   
   }

   $namePluginTEP = new NamePluginTEP();
}

• Here's our plugin in activate mode and there's no error generated by it:

That was all for today. I hope you can now easily create a simple WordPress plugin. I am not giving any files to download rite now as we have just covered the basics. In the next tutorial, we will have a look at How to Add Basic Functions in WordPress Plugin. So, will meet you guys in next tutorial. Till then take care and have fun !!! :)