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().