wp_enqueue_style places css in footer instead of the header

Question

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

Answer 1

The action hook admin_print_scripts you're using is used to add inline script so it's strongly recommended to use admin_enqueue_scripts to enqueue scripts/styles in the admin. Try it. Hope it works!