Wordpress plugin development - Load the enqueued files only where we need them

Question

I have developed 2 Wordpress plugins and I'm trying to load the needed css and js files in admin only where I need them.

I have written a function:

function ds_shortcodes_enqueue() {

$shortcodes_pages = array(
    "shortcodes_plugin",
    "add_shortcode",
    "edit_shortcode"
);
$the_page = isset($_GET['page']);
if(in_array($the_page,$shortcodes_pages)){

    // enqueue all our scripts
    wp_enqueue_style( 'ds-shortcodes-style', plugins_url( '/admin/css/shortcodes-style.css', __FILE__ ) );

    wp_enqueue_script( 'ds-shortcodes-script', plugins_url( '/admin/js/shortcodes-scripts.js', __FILE__ ) );

    }
}
add_action( 'admin_enqueue_scripts', 'ds_shortcodes_enqueue' );

The function shoud load the files only on the pages with the slugs mentioned in the array.

Then, I have written a second plugin. Different name, different text domain, different functionality and I have used the same function:

function ds_videos_enqueue() {

$videos_pages = array(
  "videos_plugin",
  "add_video",
  "edit_video",
  "edit_video_category",
  "video_categories",
  "edit_video_level",
  "video_levels",
  "video_shortcode"
);
$current_page = isset($_GET['page']);
if(in_array($current_page,$videos_pages)){
    wp_enqueue_style( 'ds-videos-style', plugins_url( '/admin/css/videos-style.css', __FILE__ ) );

    wp_enqueue_script( 'ds-videos-script', plugins_url( '/admin/js/videos-scripts.js', __FILE__ ) );
    }
}
add_action( 'admin_enqueue_scripts', 'ds_videos_enqueue' );

Now here's the problem.

They load the files from both plugins on any plugin page in admin.

I just don't get it.

I couldn't find any way to fix this.

It seems in_array() returns always true.

I hope you can help.

Thank you.

Yes. Only in admin. And it works. But they load everywhere. They were supposed to load only on the pages listed in array. — user4419473, Feb 20 '19 at 11:13

Vasim Shaikh · Answer 1 · 2019-02-20T12:23:59.420

There is a global variable in wp-admin called $pagenow which holds name of the current page, ie edit.php, post.php, etc.

You can also check the $_GET request to narrow your location down further, for example:

function ds_shortcodes_enqueue() {

$shortcodes_pages = array(
    "shortcodes_plugin",
    "add_shortcode",
    "edit_shortcode"
);
if ( isset($_GET['page']) ) {
    global $pagenow;
if(in_array($pagenow,$shortcodes_pages)){


    // enqueue all our scripts
    wp_enqueue_style( 'ds-shortcodes-style', plugins_url( '/admin/css/shortcodes-style.css', __FILE__ ) );

    wp_enqueue_script( 'ds-shortcodes-script', plugins_url( '/admin/js/shortcodes-scripts.js', __FILE__ ) );

    }
    }
}
add_action( 'admin_enqueue_scripts', 'ds_shortcodes_enqueue' );




function ds_videos_enqueue() {

$videos_pages = array(
  "videos_plugin",
  "add_video",
  "edit_video",
  "edit_video_category",
  "video_categories",
  "edit_video_level",
  "video_levels",
  "video_shortcode"
);
if ( isset($_GET['page']) ) {
    global $pagenow;
if(in_array($pagenow,$videos_pages)){
    wp_enqueue_style( 'ds-videos-style', plugins_url( '/admin/css/videos-style.css', __FILE__ ) );

    wp_enqueue_script( 'ds-videos-script', plugins_url( '/admin/js/videos-scripts.js', __FILE__ ) );
    }
}
}
add_action( 'admin_enqueue_scripts', 'ds_videos_enqueue' );

It seems in_array() returns always true.

<?php 

$videos_pages = array(
  'videos_plugin',
  'add_video',
  'edit_video',
  'edit_video_category',
  'video_categories',
  'edit_video_level',
  'video_levels',
  'video_shortcode'
);
$current_page = isset($_GET['page']);
if(in_array($current_page,$videos_pages,true)){
    echo 'I am debug point';
}else{
    echo 'I am debug point 2';
}

exit;
?>

Hi. Thank you for your fast reply. I have tried this and it doesn't enqueue any file anymore. — user4419473, Feb 20 '19 at 10:52
I just noticed that the files are being loaded on other plugins pages in admin also. The in_array() returns always true. — user4419473, Feb 20 '19 at 11:08

score 0 · Answer 2 · answered Feb 20 '19 at 11:03

I have also tried this but the in_array doesn't seem to work.

function ds_shortcodes_enqueue() {

    $shortcodes_pages = array(
      "shortcodes_plugin",
      "add_shortcode",
      "edit_shortcode"
    );

    if(in_array("shortcodes_plugin", $shortcodes_pages)){

    // enqueue all our scripts
    wp_enqueue_style( 'ds-shortcodes-style', plugins_url( '/admin/css/shortcodes-style.css', __FILE__ ) );

   wp_enqueue_script( 'ds-shortcodes-script', plugins_url( '/admin/js/shortcodes-scripts.js', __FILE__ ) );

}
add_action( 'admin_enqueue_scripts', 'ds_shortcodes_enqueue' );

It should enqueue the 2 files only on the page with the slug "shortcodes_plugin". It loads the files everywhere.

score 0 · Accepted Answer · answered Feb 20 '19 at 11:11

admin_enqueue_scripts passes a page hook to the callback function. So, you can do something like this,

function ds_shortcodes_enqueue($hook) {
    if($hook != 'page_where_you_want_scripts') {
        return;
    }
    wp_enqueue_style( 'ds-shortcodes-style', plugins_url( '/admin/css/shortcodes-style.css', __FILE__ ) );
    wp_enqueue_script( 'ds-shortcodes-script', plugins_url( '/admin/js/shortcodes-scripts.js', __FILE__ ) );
}
add_action( 'admin_enqueue_scripts', 'ds_shortcodes_enqueue' );

Reference

Hi. I have to show it on multiple pages. I use in_array() to search through array but it returns always true. — user4419473, Feb 20 '19 at 11:15

Wordpress plugin development - Load the enqueued files only where we need them

3 Answers3