NB: Make sure you do a back up of your theme, files and database before attempting the tutorials
Last modified : Sep 17 2022
Estimated reading time : 1 minute, 55 seconds - 176 words
Share the post "Using wp_register_style CSS Admin for a WordPress Plugin"
It can prove very efficient to stylize your WordPress plugin content and make it as visually enjoyable as possible.
It is possible, in your plugin’s index or ou settings.php file, to include the functions.php path to add your functions.
Using wp_register_style for a plugin
// Include path functions include( plugin_dir_path( __FILE__ ) . 'functions.php');
Below you’ll find a function that triggers wp_register_style and wp_enqueue_style. Create a new CSS folder and a new CSS file called admin.css.
In your functions.php file
// Load styles css for admin plugin
function via_custom_wp_admin_style() {
wp_register_style( 'custom_wp_admin_css', plugins_url('/css/admin.css', __FILE__), false, '1.0.0', 'all');
wp_enqueue_style( 'custom_wp_admin_css' );
}
add_action( 'admin_enqueue_scripts', 'via_custom_wp_admin_style' );As you can see, the path is done so that it finds the folder and differs from typical paths. This time we’ll use plugins_url instead of get_stylesheet_directory_uri().
For example, let’s inject some Javascript in the plugin by using wp_enqueue_script. You first need to create a new JS folder in the plugin’s root and then a JS folder and PHP folder in your shortcodes.php file. Load it with the following function in your functions.php file
// Load javascript for admin plugin
function via_shortcodes_script() {
wp_enqueue_script('shortcodes',plugins_url( '/js/shortcodes.js' , __FILE__ ),
array( 'scriptaculous' )
);
}
add_action( 'wp_enqueue_scripts', 'via_shortcodes_script' );And you’re almost done! Simply add your DIV tags so you can easily style your plugin.
Learn more about wp_register_style