How to add styles to a submenu page?

Question

How to add styles to a submenu page?

Vitor Rodrigues

2021年9月4日 12:45

I'm relatively new to WordPress and, I am creating this plugin, where I need a submenu page. I have successfully created the main page and have added CSS to it without any problems. However, I came to need a submenu page recently. I used add_submenu_page to create that page, and it worked just fine. As far as I know, I can add as much content to that page as I want, and it won't be a problem, too. The trouble started when I tried to add styles to that page. I thought I just had to add classes and IDs to the elements and, then, write their respective style codes in the CSS file used on the main menu page. I enqueue the stylesheet using the following code:

function load_entry_scripts($hook)
{
    if ($hook != 'toplevel_page_edit-dict-entry') {
        return;
    }

    wp_enqueue_style('my-plugin', plugins_url('styles/styles.css', __FILE__));
    wp_enqueue_script('my-plugin', plugins_url('js/entry-edit-plugin.js', __FILE__), array(), '1.0.0', true);
}
add_action('admin_enqueue_scripts', 'load_entry_scripts');

And, again, this code works for the main page. Finally, what do I need to do, so I can add styles to the submenu page?

PS.: I've also tried some alternatives, like creating a stylesheet specifically for the submenu page, but it hasn't worked either.

Topic add-menu-page add-submenu-page wp-enqueue-style plugin-development plugins Wordpress

Category Web

Antti Koskinen · Accepted Answer · 2021年9月4日 12:45

One option is to examine the $hook and see, if it matches the parent or any of the child menu page slugs.

function load_entry_scripts($hook)
{
    $hook_parts = explode('_page_', $hook);
    $menu_slug = array_pop($hook_parts);
    
    if ( ! in_array( $menu_slug, array('my-parent-page-slug', 'my-child-page-slug') ) ) {
        return;
    }

  // add styles && scripts
}

How to add styles to a submenu page?

About