BulletProof Security Blog

How to load CSS and JS Scripts on specific WordPress plugin pages only. The code example below is for a WordPress Top Level Plugin Menu.  It is specifically concentrating on only the portion of code that deals with loading CSS and js scripts for plugin pages.  Refer to WordPress Plugin Administration Menus Codex for the complete coding required to create plugin menus. 

The basic idea is that you want your wp_enqueue_script and wp_enqueue_style function in another function that you call with the add_action function to load your scripts for only your specific plugin pages and not throughout the WP Admin Dashboard area and in other plugins option settings pages, which could conflict with other plugins js and css scripts causing them to be overridden by your scripts – or in other words, breaking other plugin’s scripts.  Another important aspect of containing scripts to only necessary pages is that every time a js or css script is loaded it costs something for a website.  Loading Plugin or Theme scripts in unnecessary areas throughout the WordPress Dashboard and in other plugins settings pages slows down the site and other plugins functionality.  So not only is containing your scripts polite, but if done correctly you do not impact a website negatively performance-wise and impact other plugin’s performance negatively.

The add_action function hooks a function on to a specific action. This example shows 2 plugin pages calling /using / loading the same identical function (with add_action) that contains the enqueue functions, but you could create separate functions for separate plugin pages and call individual scripts or styles for each specific plugin page that you specified in your add_action functions per page.  If you are calling a separate script or style be sure to register it.  (see *** Update ***) Since these 2 plugin pages are using the same scripts and styles the scripts and styles only need to be registered once.  Hope this saves someone some time looking around for this answer.  😉  You could also make the plugin pages an array if you had a very large number of pages, but most plugins are only going to have probably max 10 pages so adding 10 add_action function calls is not a real big deal.  This post is intended to provide the vague information regarding loading CSS and js scripts on specific WordPress plugin pages only.

*** Update ***
Additional coding showing page 2 loading a custom script that only loads on page 2.

function my_plugin_admin_init() {
	// Register my plugins js script
	wp_register_script( 'my-plugin-js-script', plugins_url('/my-plugin/admin/js/my-plugin-admin.js')); 
	wp_register_script( 'my-plugin-js-script-page2', plugins_url('/my-plugin/admin/js/my-plugin-js-script-for-page2.js'));

	// Register my plugins css stylesheet
	wp_register_style('my-plugin-css-script', plugins_url('/my-plugin/admin/css/my-plugin-admin.css'));

	// Load scripts and styles only on my plugins specified pages 
	add_action('load-my-plugin/admin/my-plugin-options.php', 'my_plugin_load_settings_page_1'); 
	add_action('load-my-plugin/admin/my-plugin-options-page2.php', 'my_plugin_load_settings_page_2'); }

// my plugins Top Level Menu
function my_plugin_admin_menu() {
	if (is_multisite() && !is_super_admin()) {
		$MyPluginSuperAdminsError = 'Only Super Admins can access my plugin';
  		return $MyPluginSuperAdminsError;
		} else {
	add_menu_page(__('My Plugin Settings', 'my-plugin'), __('My Plugin', 'my-plugin'), 'manage_options', 'my-plugin/admin/my-plugin-options.php', '', plugins_url('my-plugin/admin/images/my-plugin-icon-small.png'));
	add_submenu_page('my-plugin/admin/my-plugin-options.php', __('page1 title', 'my-plugin'), __('sub menu1 name', 'my-plugin'), 'manage_options', 'my-plugin/admin/my-plugin-options.php' );
	add_submenu_page('my-plugin/admin/my-plugin-options.php', __('page2 title', 'my-plugin'), __('sub menu2 name', 'my-plugin'), 'manage_options', 'my-plugin/admin/my-plugin-options-page2.php' );
}}

function my_plugin_load_settings_page_1() {
	// Enqueue my plugins scripts
	wp_enqueue_script('jquery');
	wp_enqueue_script('jquery-ui-tabs');
	wp_enqueue_script('jquery-ui-dialog');
	wp_enqueue_script('jquery-form');
	wp_enqueue_script('swfobject');
	wp_enqueue_script('my-plugin-admin.js');

	// Enqueue my plugins stylesheet
	wp_enqueue_style('my-plugin-css-script', plugins_url('/my-plugin/admin/css/my-plugin-admin.css'));
}

function my_plugin_load_settings_page_2() {
	// Enqueue my plugins scripts
	wp_enqueue_script('jquery');
	wp_enqueue_script('jquery-ui-tabs');
	wp_enqueue_script('jquery-form');
	wp_enqueue_script('swfobject');
	wp_enqueue_script('bps-js');
	wp_enqueue_script('my-plugin-js-script-for-page2');

	// Enqueue my plugins stylesheet
	wp_enqueue_style('my-plugin-css-script', plugins_url('/my-plugin/admin/css/my-plugin-admin.css'));
}