0

I am using this code to make menu for my plugin. This works well.

My question is: what is the difference between including some php page and enqueue some scripts/styles in foo_admin_enqueue_scripts callback versus including them in add_menu_page/add_submenu_page callbacks?

function foo_admin_menu(){

    $menu = add_menu_page('Player manager', 'Foo Audio Player', FOO_CAPABILITY, 'foo_settings', 'foo_settings_page', 'dashicons-playlist-audio');

    $submenu = add_submenu_page('foo_settings', __('Foo Audio Player', FOO_TEXTDOMAIN), __('Settings', FOO_TEXTDOMAIN), FOO_CAPABILITY, 'foo_settings', 'foo_settings_page');   
    $submenu2 = add_submenu_page('foo_settings', __('Foo Audio Player', FOO_TEXTDOMAIN), __('Player manager', FOO_TEXTDOMAIN), FOO_CAPABILITY, 'foo_player_manager', 'foo_player_manager_page');    

    add_action( 'load-' . $menu, 'foo_admin_enqueue_scripts' );
    add_action( 'load-' . $submenu, 'foo_admin_enqueue_scripts' );
    add_action( 'load-' . $submenu2, 'foo_admin_enqueue_scripts' );

}

function foo_settings_page(){

    //1. include php page and script here?

    include("settings.php");

    wp_enqueue_script('enqueue something here')

}

function foo_player_manager_page(){

    ...

}

function foo_admin_enqueue_scripts() {

    //2. or include php page and script here?

    wp_enqueue_script('jquery');
    wp_enqueue_media();

    wp_enqueue_style('foo', plugins_url('/css/admin.css', __FILE__));   
    wp_enqueue_script('foo', plugins_url('/js/admin.js', __FILE__), array('jquery'));

}
1

The main difference is the location where the style (link) or script tag be in the source, or whether the resource is loaded in head or the footer.

  • With a add_menu_page()/add_submenu_page() callback like your foo_settings_page(), the style/script file would be loaded in the body (before the closing body tag), because the head has already been rendered by the time that the callback (foo_settings_page()) is called:

    <body>
        ...
        the content of your plugin page (added through foo_settings_page())
        ...
        ...
        <!-- The style/script file would be loaded here, in the footer. -->
    </body>
    
  • With your foo_admin_enqueue_scripts() which is a load-<page hook> callback, the style/script file would be loaded in the head — but for a script, it could be in the footer; check the fifth parameter for wp_enqueue_script():

    <head>
        ...
        <!-- The style/script file would be loaded here, unless if the *script* is set
        to be loaded in the footer. -->
        ...
    </head>
    

And I know there are certain cases where you need to load a style/script file right after a specific element is rendered on the page, but in most cases, style files should be loaded in head and script files in the footer — although in these modern days, scripts may be put in the head.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.