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'));
}
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'));
}
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.