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 !!! :)