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'));
}
}
Written by Nicolas Galler
Related protips
Have a fresh tip? Share with Coderwall community!
Post
Post a tip
Best
#Wordpress
Authors
Sponsored by #native_company# — Learn More
#native_title#
#native_desc#