WordPress: Enqueuing Scripts and Styles from a Created Admin Menu Page

While the description of day job does not strictly include programming, I have, of late, been part of a team that has been working on writing a solution for some custom overrides of the “My Sites” page as part of a multisite installation of WordPress.

Because of some factors not worth going into here, these overrides needed to be in place to allow users to select their sites and do some small administrative tasks based on those sites for which they were owner. And, for the most part, these overrides were simply doing a couple of additional things and then mimicking the same “My Sites” default functionality.

However, as part of a project to add in some new options for this page, we needed to use some JavaScript and we wanted to style a few elements. This, as it turns out, is not simple, nor is is easy to figure out.

Plugin-Based Enqueuing Scripts and Styles

For those wanting to create a page based on code in a WordPress plugin, the process is somewhat straightforward. The WordPress API provides the wp_enqueue_script and wp_enqueue_style functions for enqueuing things based on the current theme. As part of some code to add_menu_page (or add_management_page or some other admin menu section), you can enqueue whatever you want as part of a named page, hooking into their loading.

When it comes to pages like “My Sites,” those that are classified as ‘admin’ by WordPress, the functions change to admin_enqueue_scripts. However, this function comes with a major issue: it enqueues for all admin pages. Using it — outside of filtering for a single page, as the Codex helpfully covers — means loading for every other page and this far from ideal for a solution for a single page.

Creating Pages and the Load- Hook

When creating a page using the API, WordPress returns the name of the created page from whatever level it was created. For example, for add_menu_page, this is a combined supplied page and something like “toplevel_page” as a prefix depending on the context. For whatever is returned, this is the exact name as understood from WordPress.

This result is amazingly helpful as there also exists a load-(page) hook that will run whenever a certain page is loaded. To do some action when that page is loaded, you can use this hook.

Code Solution

Through combining the returning page name, the load-(page) hook, admin_enqueue, and the script and style enqueueing, these can be used as part of a single solution for enqueueing only for a specific, created ‘admin’-level page like in the above context of the “My Sites” override.

add_action('admin_menu', 'add_manage_sites_menu');
function add_manage_sites_menu(){
// Save the reference to the new menu page
$adminPage = add_menu_page(
'New My Sites',
'New My Sites',
// Load the JS conditionally using the new menu page name
add_action( 'load-' . $adminPage, 'load_admin_js' );
// This function is only called when our plugin's page loads!
function load_admin_js(){
// Unfortunately we can't just enqueue our scripts here – it's too early.
// So register against the proper action hook to do it
add_action( 'admin_enqueue_scripts', 'enqueue_admin_js' );
function enqueue_admin_js(){
// Enqueue our script
wp_enqueue_script( 'some-js', PLUGIN_URL . 'js/some.js', array( 'jquery') );
// Enqueue our CSS
wp_enqueue_style( 'some-css', PLUGIN_URL . 'css/some.css' );