How to Prevent Unwanted Load of Plugin's Files in WP Admin Panel

PressTigers

How to Prevent Unwanted Load of Plugin’s Files in WP Admin Panel

January 15, 2016
Leave a comment

WordPress Plugins are one of the best features of WordPress CMS platform. Using plugin, you can achieve your goal of development/embedding custom functionalities in WordPress website. Several methods are provided by WordPress to add a link in admin panel for plugin’s page. For this, we are going to use “add_menu_page” hook. Following is the code for adding menu page:

add_action( 'admin_menu', 'pt_wp_plugin_menu' );
function pt_wp_plugin_menu() {
add_menu_page( 'WP Plugin', 'WP Plugin', 'manage_options', 'pt-wp-plugin', 'pt_wp_plugin_init' );
}

add_action( 'admin_menu', 'pt_wp_plugin_menu' );

function pt_wp_plugin_menu() {

add_menu_page( 'WP Plugin', 'WP Plugin', 'manage_options', 'pt-wp-plugin', 'pt_wp_plugin_init' );

}

Note that “pt-wp-plugin” is the menu slug of our plugin.

While writing a WordPress plugin, you need to add CSS or JavaScript files more frequently to manage the layout of plugin’s page in WP admin section. Here, we are using “admin_enqueue_scripts” action to enqueue (add) CSS or JavaScript files into WordPress admin section. Following is the common approach to enqueue scripts:

add_action('admin_enqueue_scripts', 'pt_wp_plugin_scripts');
function pt_wp_plugin_scripts(){
wp_enqueue_script('pt-wp-js', plugin_dir_url(__FILE__) . '/assets/js/pt-wp-functions.js');
wp_enqueue_style('pt-wp-css', plugin_dir_url(__FILE__) . '/assets/css/pt-wp-style.css');
}

add_action('admin_enqueue_scripts', 'pt_wp_plugin_scripts');

function pt_wp_plugin_scripts(){

wp_enqueue_script('pt-wp-js', plugin_dir_url(__FILE__) . '/assets/js/pt-wp-functions.js');

wp_enqueue_style('pt-wp-css', plugin_dir_url(__FILE__) . '/assets/css/pt-wp-style.css');

}

This method looks pretty perfect to enqueue scripts, but one thing is making WordPress admin panel over loaded. We enqueued scripts and if we look into view source of any page of admin section, these files are there i.e. unwanted load of scripts exist and is making the admin panel heavy or loading it slowly.

To avoid this unwanted load of files in WP admin panel, we are going to pass one parameter through our scripts’ function. This parameter will tell us the current loaded page/screen of admin panel. Below is the enhanced approach for getting the current page/screen:

add_action('admin_enqueue_scripts', 'pt_wp_plugin_scripts');
function pt_wp_plugin_scripts($screen_id){
    /*===    If not your plugin's page, do nothing    ===*/
if( $screen_id != 'toplevel_page_pt-wp-plugin' ){
   return;
 }
  /*===   else load CSS/Javascript files   ===*/
wp_enqueue_script('pt-wp-js-1', plugin_dir_url(__FILE__) . '/assets/js/pt-wp-functions.js');
wp_enqueue_style('pt-wp-css-1', plugin_dir_url(__FILE__) . '/assets/css/pt-wp-style.css');
}

add_action('admin_enqueue_scripts', 'pt_wp_plugin_scripts');

function pt_wp_plugin_scripts($screen_id){

/*=== If not your plugin's page, do nothing ===*/

if( $screen_id != 'toplevel_page_pt-wp-plugin' ){

return;

}

/*=== else load CSS/Javascript files ===*/

wp_enqueue_script('pt-wp-js-1', plugin_dir_url(__FILE__) . '/assets/js/pt-wp-functions.js');

wp_enqueue_style('pt-wp-css-1', plugin_dir_url(__FILE__) . '/assets/css/pt-wp-style.css');

}

As our plugin’s slug is “pt-wp-plugin“, we just added a pre-fix of “toplevel_page_” to this existing plugin’s slug. In this way, you will get screen/page ID for your plugin. You can follow the same steps for getting your plugin’s page ID.