
Using jQuery UI CSS in admin screen
I work on new plugin and I need jQuery UI in admin screen. Well, it’s a common situation. Besides the javascript, I also need jQuery UI stylesheet. How to include proper CSS into your WordPress? It’s not that hard.
First, we need to include jQuery and jQuery UI. As an example, we will also use jQuery UI Tabs. Normally we may use Google APIs, but while we are in WordPress environment, we should use jQuery provided. So, let’s write some class:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
<?php namespace Phylax\MyPlugin; class Plugin { function __construct() { add_action( 'admin_enqueue_scripts', [ $this, 'admin_enqueue_scripts' ] ); } function admin_enqueue_scripts() { wp_enqueue_script( 'plugin-main', plugin_dir_url( __FILE__ ) . 'assets/js/plugin.js', [ 'jquery-ui-tabs', 'jquery-ui-core', 'jquery', ] ); } } if ( is_admin() ) { $phylax_plugin = new Plugin(); } |
So, what we’ve got here? This code will include jQuery, jQuery UI, jQuery UI Tabs (because those are our dependencies) and plugin.js – our main javascript file located in /assets/js folder.
Of course, it isn’t very good example. While developing plugin, we are using some admin sub pages, so let’s add one:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 |
<?php namespace Phylax\MyPlugin; class Plugin { function __construct() { add_action( 'admin_menu', [ $this, 'admin_menu' ], 999 ); add_action( 'admin_enqueue_scripts', [ $this, 'admin_enqueue_scripts' ] ); } function admin_enqueue_scripts() { wp_enqueue_script( 'taag-main', plugin_dir_url( $this->main_file ) . 'assets/js/taag.js', [ 'jquery-ui-tabs', 'jquery-ui-core', 'jquery', ] ); } function admin_menu() { add_submenu_page( 'edit.php', __( 'Plugin title', 'textdomain' ), __( 'Plugin', 'textdomain' ), 'manage_options', 'pluginslug', [ $this, 'menu_view' ] ); } function menu_view() { ?> <div class="wrap"> <h1><?php _e( 'Plugin title', 'textdomain' ); ?></h1> <p><?php _e( 'Some description here', 'textdomain' ); ?></p> </div> <?php } } if ( is_admin() ) { $phylax_plugin_taag = new Plugin( __FILE__ ); } |
This code adds “Plugin” sub menu in “Posts” menu.
Is that good enough? Unfortunately not. Why? Because this code adds our javascript on every and each admin screen. It’s unnecessary wasting of our users time. We should include this code only on our admin screen. So, let’s add some code:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 |
<?php namespace Phylax\MyPlugin; class Plugin { public $sub_page = ''; function __construct() { add_action( 'admin_menu', [ $this, 'admin_menu' ], 999 ); } function admin_enqueue_scripts() { wp_enqueue_script( 'taag-main', plugin_dir_url( $this->main_file ) . 'assets/js/taag.js', [ 'jquery-ui-tabs', 'jquery-ui-core', 'jquery', ] ); } function admin_menu() { $this->sub_page = add_submenu_page( 'edit.php', __( 'Plugin title', 'textdomain' ), __( 'Plugin', 'textdomain' ), 'manage_options', 'pluginslug', [ $this, 'menu_view' ] ); add_action( 'load-' . $this->sub_page, [ $this, 'load_plugin' ] ); } function load_plugin() { add_action( 'admin_enqueue_scripts', [ $this, 'admin_enqueue_scripts' ] ); } function menu_view() { ?> <div class="wrap"> <h1><?php _e( 'Plugin title', 'textdomain' ); ?></h1> <p><?php _e( 'Some description here', 'textdomain' ); ?></p> </div> <?php } } if ( is_admin() ) { $phylax_plugin_taag = new Plugin( __FILE__ ); } |
Does it work? Yes, it is. This is exactly what we need. So… where is the CSS? Well pointed. We’ve got javascript on our screen, so let’s add CSS. We will need out jQuery version (because CSS styles may differ from version to version) and theme name. We will add this code in admin_enqueue_scripts method:
1 2 3 4 5 6 7 8 9 10 11 |
function admin_enqueue_scripts() { global $wp_scripts; $jquery_version = $wp_scripts->registered['jquery-ui-core']->ver; $theme_name = 'smoothness'; wp_enqueue_style( 'googleapi-jquery-ui', 'https://ajax.googleapis.com/ajax/libs/jqueryui/' . $jquery_version . '/themes/' . $theme_name . '/jquery-ui.css' ); wp_enqueue_script( 'taag-main', plugin_dir_url( $this->main_file ) . 'assets/js/taag.js', [ 'jquery-ui-tabs', 'jquery-ui-core', 'jquery', ] ); } |
This code make sure that we use proper jQuery version and, of course, you may change your default theme. Refer to jQuery UI documentation for more theme names. You also have to add simple html to use tabs. Final PHP code should look like this:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 |
<?php namespace Phylax\MyPlugin; class Plugin { public $sub_page = ''; function __construct() { add_action( 'admin_menu', [ $this, 'admin_menu' ], 999 ); } function admin_enqueue_scripts() { global $wp_scripts; wp_enqueue_style( 'googleapi-jquery-ui', 'https://ajax.googleapis.com/ajax/libs/jqueryui/' . $wp_scripts->registered['jquery-ui-core']->ver . '/themes/smoothness/jquery-ui.css' ); wp_enqueue_script( 'taag-main', plugin_dir_url( $this->main_file ) . 'assets/js/taag.js', [ 'jquery-ui-tabs', 'jquery-ui-core', 'jquery', ] ); } function admin_menu() { $this->sub_page = add_submenu_page( 'edit.php', __( 'Plugin title', 'textdomain' ), __( 'Plugin', 'textdomain' ), 'manage_options', 'pluginslug', [ $this, 'menu_view' ] ); add_action( 'load-' . $this->sub_page, [ $this, 'load_plugin' ] ); } function load_plugin() { add_action( 'admin_enqueue_scripts', [ $this, 'admin_enqueue_scripts' ] ); } function menu_view() { ?> <div class="wrap"> <h1><?php _e( 'Plugin title', 'textdomain' ); ?></h1> <p><?php _e( 'Some description here', 'textdomain' ); ?></p> <div id="plugin-tabs"> <ul> <li><a href="#tab1"><?php _e( 'First item', 'textdomain' ); ?></a></li> <li><a href="#tab2"><?php _e( 'First item', 'textdomain' ); ?></a></li> <li><a href="#tab3"><?php _e( 'First item', 'textdomain' ); ?></a></li> </ul> <div id="tab1"> <p>Lorem ipsum</p> </div> <div id="tab2"> <p>Lorem ipsum</p> </div> <div id="tab3"> <p>Lorem ipsum</p> </div> </div><!-- #plugin-tabs --> </div> <?php } } if ( is_admin() ) { $phylax_plugin_taag = new Plugin( __FILE__ ); } |
And your plugin.js file should look like this:
1 2 3 |
jQuery( document ).ready( function( $ ) { $('#plugin-tabs').tabs(); } ); |

