So, you are writing your plugin and realize that you need to include a Javascript or CSS file on a page. You think back to your HTML days and use:
<link rel="stylesheet" type="text/css" href="<?php echo $your_plugins_url; ?>css/your_css_file.css" />
or
<script type="text/javascript" src="<?php echo $your_plugins_url; ?>js/your_js_file.js"></script>
While technically it is possible to include files using HTML script and link tags on a standalone site, they are not best practice on a WordPress site. The main benefits of using WordPress’s core functions instead of generic HTML are:
- Files are included to the generated page at the right time according to the script dependencies.
- Files will only be included if it has not been already included and if all the dependencies have been registered.
- Script localization is very easy, just call wp_localize_script() on your included files. Check out Script Localization with JQuery in WordPress for more information.
These are the main WordPress functions you should know:
There are two main ways to include your files with these functions. One way is using the wp_register_…() function, with the file’s source as the second argument, to register the file with WordPress. Then enqueue it using wp_enqueue_…(), only specifying the registered name. It looks something like this (real world examples are at the bottom of the post):
wp_register_script( 'my-plugin-script', plugins_url( '/script.js', __FILE__ )); // Usually called in a function attached to the admin_init hook
wp_enqueue_script( 'my-plugin-script' ); //Usually called where you need to include the file
The second method is to just call the wp_enqueue_…() function with the file’s source as the second argument.
wp_enqueue_script('my-plugin-script' , plugins_url( '/script.js', __FILE__ )); // Usually called in a function attached to the admin_enqueue_scripts, wp_enqueue_scripts or your plugins page load hook
Now that we understand the two main ways of including files, below are some examples.
Using WordPress Include hooks
add_action('wp_enqueue_scripts ', 'front_end_include_files’); //Use this only to include on all front-end pages
add_action(‘admin_enqueue_scripts ', 'back_end_include_files’); //Use this only to include on all admin pages
add_action(‘login_enqueue_scripts', 'login_include_files’); //Use this only to include on all login pages
function front_end_include_files() {
wp_enqueue_style( 'style-name', plugins_url('style.css', __FILE__));
wp_enqueue_script( 'script-name', plugins_url(’script.js', __FILE__));
}
function back_end_include_files() {
wp_enqueue_style( 'style-name', plugins_url('style.css', __FILE__));
wp_enqueue_script( 'script-name', plugins_url(’script.js', __FILE__));
}
function login_include_files() {
wp_enqueue_style( 'style-name', plugins_url('style.css', __FILE__));
wp_enqueue_script( 'script-name', plugins_url(’script.js', __FILE__));
}
On Page Load
add_action( 'admin_init', 'my_plugin_admin_init' );
add_action( 'admin_menu', 'my_plugin_admin_menu' );
function my_plugin_admin_init() {
/* Register our stylesheet. */
wp_register_style( 'myPluginStylesheet', plugins_url('stylesheet.css', __FILE__) );
}
function my_plugin_admin_menu() {
/* Register our plugin page */
$page = add_submenu_page( 'edit.php',
__( 'My Plugin', 'myPlugin' ),
__( 'My Plugin', 'myPlugin' ),
'administrator',
__FILE__,
'my_plugin_manage_menu' );
/* Using registered $page handle to hook stylesheet loading */
add_action( 'admin_print_styles-' . $page, 'my_plugin_admin_styles' );
}
function my_plugin_admin_styles() {
/*
* It will be called only on your plugin admin page, enqueue our stylesheet here
*/
wp_enqueue_style( 'myPluginStylesheet' );
}
function my_plugin_manage_menu() {
/* Output our admin page */
}
To do all these in an object oriented programming style, it would generically look like this (modify this code as needed) :
Object Oriented Programming
add_action('wp_enqueue_scripts ', array(‘My_Class’, ‘front_end_include_files’)); //Use this only to include on all front-end pages
add_action(‘admin_enqueue_scripts ‘, array(‘My_Class’, 'back_end_include_files’)); //Use this only to include on all admin pages
add_action(‘login_enqueue_scripts', array(‘My_Class’, ‘login_include_files’)); //Use this only to include on all login pages
class My_Class {
static function front_end_include_files() {
wp_enqueue_style( 'style-name', plugins_url('style.css', __FILE__));
wp_enqueue_script( 'script-name', plugins_url(’script.js', __FILE__));
}
static function back_end_include_files() {
wp_enqueue_style( 'style-name', plugins_url('style.css', __FILE__));
wp_enqueue_script( 'script-name', plugins_url(’script.js', __FILE__));
}
static function login_include_files() {
wp_enqueue_style( 'style-name', plugins_url('style.css', __FILE__));
wp_enqueue_script( 'script-name', plugins_url(’script.js', __FILE__));
}
}
Also, take a look at the WordPress docs for including scripts and stylesheets inline into the header using the admin_print_scripts or admin_print_styles functions. A good example is found here.
Please contact us at feedback@wpdevadvice.com or support@wpdevadvice.com for recommendations and questions.