NB: Make sure you do a back up of your theme, files and database before attempting the tutorials

Intermediate

---- Last modified : Sep 17 2022

Estimated reading time : 1 minute, 55 seconds - 176 words

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

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>