How to load CSS and JS Scripts on WordPress plugin pages only. The code example below is for a WordPress Top Level Plugin Menu. I searched for this answer for an hour and realized that a detailed answer didn’t exist anywhere. 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. 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 missing or vague information regarding loading CSS and js scripts on WordPress plugin pages only.  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. 

*** Update ***
By request I have added the additional coding showing page 2 loading a custom script that only loads on page 2.

function bulletproof_security_admin_init() {
// whitelist BPS options
register_setting(‘bulletproof_security_options’, ‘bulletproof_security_options’, ‘bulletproof_security_options_validate’);

// Register BPS js
wp_register_script( ‘bps-js’, WP_PLUGIN_URL . ‘/bulletproof-security/admin/js/bulletproof-security-admin.js’);
wp_register_script( ‘some-other-custom-script-specifically-for-page2′, WP_PLUGIN_URL . ‘/bulletproof-security/admin/js/custom-js-for-page2.js’);

// Register BPS stylesheet
wp_register_style(‘bps-css’, plugins_url(‘/bulletproof-security/admin/css/bulletproof-security-admin.css’));

// Create BPS Backup Folder structure – suppressing errors on activation – errors displayed in HUD
if( !is_dir (WP_CONTENT_DIR . ‘/bps-backup’)) {
@mkdir (WP_CONTENT_DIR . ‘/bps-backup/master-backups’, 0755, true);
@chmod (WP_CONTENT_DIR . ‘/bps-backup/’, 0755);
@chmod (WP_CONTENT_DIR . ‘/bps-backup/master-backups/’, 0755);
}

// Load scripts and styles only on BPS specified pages
add_action(‘load-bulletproof-security/admin/options.php’, ‘bulletproof_security_load_settings_page’);
add_action(‘load-bulletproof-security/admin/page2.php’, ‘bulletproof_security_load_settings_page_2′); }

// BPS Top Level Menus
function bulletproof_security_admin_menu() {
//if (function_exists(‘add_menu_page’)){
add_menu_page(__(‘BulletProof Security Settings’, ‘bulletproof-security’), __(‘BPS Security’, ‘bulletproof-security’), ‘manage_options’, ‘bulletproof-security/admin/options.php’, ”, plugins_url(‘bulletproof-security/admin/images/bps-icon-small.png’));
add_submenu_page(‘bulletproof-security/admin/options.php’, __(‘page1 title’, ‘bulletproof-security’), __(‘sub menu1 name’, ‘bulletproof-security’), ‘manage_options’, ‘bulletproof-security/admin/options.php’ );
add_submenu_page(‘bulletproof-security/admin/options.php’, __(‘page2 title’, ‘bulletproof-security’), __(‘sub menu2 name’, ‘bulletproof-security’), ‘manage_options’, ‘bulletproof-security/admin/page2.php’ );
}

function bulletproof_security_load_settings_page() {

global $bulletproof_security

// Enqueue BPS scripts and styles

wp_enqueue_script(‘jquery’);

wp_enqueue_script(‘jquery-ui-tabs’);

wp_enqueue_script(‘jquery-form’);

wp_enqueue_script(‘swfobject’);

wp_enqueue_script(‘bps-js’);

// Enqueue BPS stylesheet

wp_enqueue_style(‘bps-css’, plugins_url(‘/bulletproof-security/admin/css/bulletproof-security-admin.css’));

}

function bulletproof_security_load_settings_page_2() {

global $bulletproof_security

// Enqueue BPS scripts and styles

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(‘some-other-custom-script-specifically-for-page2′);

// Enqueue BPS stylesheet

wp_enqueue_style(‘bps-css’, plugins_url(‘/bulletproof-security/admin/css/bulletproof-security-admin.css’));

}

Tags: Load WordPress CSS And JS Plugin Scripts, WordPress Top Level Menu Plugin Scripts

Categories: Wordpress Tips - Tricks - Fixes