I have the following pieces of code that I use to include styles and java-scripts on a settings page within the WordPress admin area. I have a class with a singleton that I use to initiate my admin pages. I stripped everything except the needed pieces of code to make it more readable.
The problem that I’m having is that by using the set-up below is that the style-sheets on the settings page are placed at the bottom of the page instead of in the head of the page. I can get it in the header by using other action hooks, but that would defeat the purpose. As far as I know the set-up I used is the same setup as is described with the wp_enqueue_style command.
There is a small hint with the command “wp_enqueue_style() can now be called mid-page (in the HTML body). This will load styles in the footer.”. If that is true that would mean that the ‘admin_print_scripts-*’ hook is called somewhere mid-page instead of at the start en doing so places the css in the footer.
Any thoughts on that. an I doing something wrong ?
Thanks for your time.
This is how the singleton class is called within the functions.php file
theme::instance( );
This is part of the class that I used to create the admin pages
class theme {
static public function instance( )
{
is_null( self::$instance ) AND self::$instance = new self;
return self::$instance;
}
public function __construct()
{
add_action( 'admin_menu', array( $this, 'initMenu' ), 10, 0 );
add_action( 'admin_init', array( $this, 'registerAssets' ), 10, 0 );
}
public function registerAssets( )
{
// Styles
wp_register_style( 'cen', 'style.css', array( ), '1.0' );
wp_register_style( 'cen-settings', 'settings.css', array( 'cen' ), '1.0' );
// Scripts
wp_register_script( 'cen', 'settings.js', array( 'jquery' ), '1.0', true );
}
public function initMenu( )
{
// Index page
$index =add_menu_page( 'Cen', 'Cen', 'manage_options', 'cen-index', function (){ require_once( get_template_directory( ) . '/pages/index.php' ); }, get_template_directory_uri() . '/images/icons/logo_16.png', "110.00" );
// Settings page
$settings =add_submenu_page( 'cen-index', 'Cen - Settings', 'cen' ), 'Settings', 'manage_options', 'cen-settings', function (){ require_once( get_template_directory( ) . '/pages/settings.php' ); } );
// Add action for assets on the settings page
add_action( 'admin_print_scripts-' . $settings, array( $this, 'initSettingsPage' ));
}
public function initSettingsPage( )
{
// Styles used
wp_enqueue_style( 'cen' );
wp_enqueue_style( 'cen-settings' );
// Scripts used
wp_enqueue_script( 'jquery-ui-tabs' );
wp_enqueue_script( 'cen' );
}
}
The action hook
admin_print_scripts
you’re using is used to add inline script so it’s strongly recommended to useadmin_enqueue_scripts
to enqueue scripts/styles in the admin.Try it. Hope it works!