Last Updated: February 25, 2016

Enqueue scripts / styles on a Wordpress option page

My basic class for creating an option page:

class WPHooks
{
 const OPTION_PAGE_SLUG = 'rti_booker_sites';

 public function registerHooks()
 {
 add_action('admin_menu', array(&$this, 'adminMenu'));
 }

 public function adminMenu()
 {
 if (current_user_can('manage_options')) {
 add_options_page('Booker Site Manager', 'Booker Sites', 'manage_options',
 self::OPTION_PAGE_SLUG, array(&$this, 'renderOptionsPage'));
 }
 }

 public function renderOptionsPage()
 {
 require "OptionPage.php";
 }

}

If scripts are needed on the page and it just uses wp_enqueue_scripts to add it then it will put it in the page footer - this is not so bad for scripts but very undesirable for stylesheets.

Instead the proper way to enqueue scripts is to make use of the admin_enqueue_scripts action. But to ensure scripts are only included for our particular page and not polluting other pages in the admin, use this:

private $optionPageHookSuffix;

public function adminMenu() 
{
 $this->optionPageHookSuffix = add_options_page('Booker Site Manager', 'Booker Sites', 'manage_options',
 self::OPTION_PAGE_SLUG, array(&$this, 'renderOptionsPage'));
 add_action('admin_enqueue_scripts', array(&$this, 'enqueueScripts'));
}

public function enqueueScripts($hookSuffix)
{
 if ($hookSuffix == $this->optionPageHookSuffix) {
 wp_enqueue_script('bootstrap-js', '//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js', ['jquery']);
 wp_enqueue_script('jquery-validation', \Roots\Sage\Assets\asset_path('scripts/jquery-validate.js'), ['jquery']);
 wp_enqueue_style('bootstrap', '//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css');
 wp_enqueue_style('admin-css', \Roots\Sage\Assets\asset_path('styles/admin-style.css'));
 }
}

#wordpress

#nico_g