Most plugins require additional JS and CSS files to work properly.
You can enqueue these scripts and styles as soon as you activate your plugin.
We recommend placing your CSS plugin files in a directory:
plugin/assets/css/admin/style.css for admin-panel styles plugin/assets/css/front/style.css for frontend styles
place js files in directories:
plugin/assets/js/admin/script.js for admin-panel scripts plugin/assets/js/front/script.js for frontend scripts
<?php
/*
Plugin Name: My Plugin
Plugin URI: https://mypluginsite.com/
Description: One of best plugins in the planet
Version: 1.0
Author: John
Author URI: https://facebook.com/john
Licence: GPLv2 or later
Text Domain: myplugin
Domain Path: /lang
*/
if(!defined('ABSPATH')){
die;
}
class myPlugin{
function register(){
add_action('admin_enqueue_scripts',[$this,'enqueue_admin']);
add_action('wp_enqueue_scripts', [$this,'enqueue_front']);
}
public function enqueue_admin(){
wp_enqueue_style('myplugin_style_admin', plugins_url('/assets/css/admin/style.css',__FILE__));
wp_enqueue_script('myplugin_script_admin', plugins_url('/assets/js/admin/scripts.js', __FILE__),array('jquery'),'1.0',true);
}
public function enqueue_front(){
wp_enqueue_style('myplugin_style_front', plugins_url('/assets/css/front/style.css',__FILE__));
wp_enqueue_script('myplugin_style_front', plugins_url('/assets/js/front/scripts.js', __FILE__),array('jquery'),'1.0',true);
}
}
if(class_exists('myPlugin')){
$myPlugin = new myPlugin();
$myPlugin->register();
}
The code defines a class named myPlugin, which contains methods for registering and enqueueing styles and scripts.
Inside the register method of the myPlugin class, two action hooks are added:
- admin_enqueue_scripts: this hook is used for enqueuing styles and scripts in the WordPress admin area.
- wp_enqueue_scripts: This hook is used for enqueuing styles and scripts on the front end of the website.
The enqueue_admin method is responsible for enqueuing styles and scripts for the WordPress admin area. It uses the wp_enqueue_style and wp_enqueue_script functions to load CSS and JavaScript files.
These files are located in the plugin’s folder under /assets/css/admin/ and /assets/js/admin/. The provided URLs use the plugins_url function to generate the correct URLs for the plugin’s assets.
The enqueue_front method is responsible for enqueuing styles and scripts for the front end of the website. It is similar to the enqueue_admin method but loads assets from the /assets/css/front/ and /assets/js/front/ directories.