WordPress, jQuery UI CSS Files?
I’m trying to create a WordPress plugin, and I would like to have jQuery UI Tabs in one of my settings pages. I already have the scripting code set:
wp_enqueue_script('jquery'); // Enque jQuery wp_enqueue_script('jquery-ui-core'); // Enque jQuery UI Core wp_enqueue_script('jquery-ui-tabs'); // Enque jQuery UI Tabs . and I have created the HTML and JavaScript too. Until here all are fine. The question is: The WordPress platform comes with some scripts already pre-installed like the one I have enqueue above. My script runs fine with the tabs, but it is not styled! So what I’m trying to ask, does the WordPress platform come with jQuery UI Theme pre-installed? . and if so, how do I enqueue the style into my plugin?
6 Answers 6
Sounds more like you have an issue with finding an available styling within WordPress for the jquery-ui theme.
To answer your question. No, WordPress has no useful styles available within the platform itself. The only available css is in \wp-includes\jquery-ui-dialog.css, and that alone isn’t very useful.
I also had the same issue, and I found two options. Either store it in a CSS folder and load it from there, or load it via URL (Google APIs). For JQuery UI I decided to rely on Google’s CDA and added a way to utilize the ‘Theme Roller’. Storing that amount of css code seems un-nessecary to begin with, and its too bad WordPress doesn’t provide any styling support like they do with the jquery-ui scripts.
However, WP does offer scripts, which will keep the CSS up to date with $wp_scripts->registered[‘jquery-ui-core’]->ver . You can either access it with wp_scripts(); OR global $wp_scripts; .
$wp_scripts = wp_scripts(); wp_enqueue_style('plugin_name-admin-ui-css', 'http://ajax.googleapis.com/ajax/libs/jqueryui/' . $wp_scripts->registered['jquery-ui-core']->ver . '/themes/smoothness/jquery-ui.css', false, PLUGIN_VERSION, false); $wp_scripts = wp_scripts(); wp_enqueue_style('plugin_name-admin-ui-css', 'http://ajax.googleapis.com/ajax/libs/jqueryui/' . $wp_scripts->registered['jquery-ui-core']->ver . '/themes/' . $pluginOptions['jquery_ui_theme'] . '/jquery-ui.css', false, PLUGIN_VERSION, false); And an example of locally storing it
wp_enqueue_style('plugin_name-admin-ui-css', plugins_url() . '/plugin-folder-name/includes/css/jquery-ui-theme-name.css', false, PLUGIN_VERSION, false); WordPress, jQuery UI CSS Files?
Sounds more like you have an issue with finding an available styling within WordPress for the jquery-ui theme.
To answer your question. No, WordPress has no useful styles available within the platform itself. The only available css is in \wp-includes\jquery-ui-dialog.css, and that alone isn’t very useful.
I also had the same issue, and I found two options. Either store it in a CSS folder and load it from there, or load it via URL (Google APIs). For JQuery UI I decided to rely on Google’s CDA and added a way to utilize the ‘Theme Roller’. Storing that amount of css code seems un-nessecary to begin with, and its too bad WordPress doesn’t provide any styling support like they do with the jquery-ui scripts.
However, WP does offer scripts, which will keep the CSS up to date with $wp_scripts->registered[‘jquery-ui-core’]->ver . You can either access it with wp_scripts(); OR global $wp_scripts; .
$wp_scripts = wp_scripts(); wp_enqueue_style('plugin_name-admin-ui-css', 'http://ajax.googleapis.com/ajax/libs/jqueryui/' . $wp_scripts->registered['jquery-ui-core']->ver . '/themes/smoothness/jquery-ui.css', false, PLUGIN_VERSION, false); $wp_scripts = wp_scripts(); wp_enqueue_style('plugin_name-admin-ui-css', 'http://ajax.googleapis.com/ajax/libs/jqueryui/' . $wp_scripts->registered['jquery-ui-core']->ver . '/themes/' . $pluginOptions['jquery_ui_theme'] . '/jquery-ui.css', false, PLUGIN_VERSION, false); And an example of locally storing it
wp_enqueue_style('plugin_name-admin-ui-css', plugins_url() . '/plugin-folder-name/includes/css/jquery-ui-theme-name.css', false, PLUGIN_VERSION, false); Solution 2
I don’t think a UI theme comes pre-installed. You need to add the script to the header.
I think you’re looking for this function. It allows you to add a script to your header. Just put the theme’s css somewhere in your plugin folder and include that.
Solution 3
An update for the changes that has happened with WordPress ever since. Recent WordPress packages come with the CSS in the box.
You can find then in wp-includes\css and enqueue using wp_enqueue_style() .
I think for OP’s use case wp_enqueue_style( ‘wp-jquery-ui-dialog’ ); is all that was needed.
Hope this helps someone in the future.
Solution 4
To add some more details to EkoJr’s answer, as of Jquery UI v1.11.4 if you add the whole JQuery UI CSS stylesheet, it might break the default WordPress Theme styling.
So, you could only add the CSS classes corresponding to the slider component. Here are the classes I used (note : these are built for the ui-darkness theme) :
.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default < border: 1px solid #666666; /* this image is from the ui-darkness theme, use the one you'd like */ background: #555555 url("img/jquery-ui/ui-bg_glass_20_555555_1x400.png") 50% 50% repeat-x; font-weight: bold; color: #eeeeee; >.ui-slider-horizontal .ui-slider-handle < top: -.3em; margin-left: -.6em; >.ui-slider .ui-slider-handle < position: absolute; z-index: 2; width: 1.2em; height: 1.2em; cursor: default; -ms-touch-action: none; touch-action: none; >.ui-corner-all, .ui-corner-bottom, .ui-corner-right, .ui-corner-br < border-bottom-right-radius: 6px; >.ui-corner-all, .ui-corner-bottom, .ui-corner-left, .ui-corner-bl < border-bottom-left-radius: 6px; >.ui-corner-all, .ui-corner-top, .ui-corner-right, .ui-corner-tr < border-top-right-radius: 6px; >.ui-corner-all, .ui-corner-top, .ui-corner-left, .ui-corner-tl < border-top-left-radius: 6px; >.ui-corner-all, .ui-corner-bottom, .ui-corner-right, .ui-corner-br < border-bottom-right-radius: 6px; >.ui-corner-all, .ui-corner-bottom, .ui-corner-left, .ui-corner-bl < border-bottom-left-radius: 6px; >.ui-corner-all, .ui-corner-top, .ui-corner-right, .ui-corner-tr < border-top-right-radius: 6px; >.ui-corner-all, .ui-corner-top, .ui-corner-left, .ui-corner-tl < border-top-left-radius: 6px; >.ui-widget-content < border: 1px solid #666666; /* this image is from the ui-darkness theme, use the one you'd like */ background: #000000 url("img/jquery-ui/ui-bg_inset-soft_25_000000_1x100.png") 50% bottom repeat-x; color: #ffffff; >.ui-widget < font-family: Segoe UI,Arial,sans-serif; font-size: 1.1em; >.ui-slider-horizontal < height: .8em; >.ui-slider Also, please note that you can prefix those classes with your container ID. For exemple, if your slider has the ID ‘slider’, use :
#slider .ui-state-default, #slider .ui-widget-content .ui-state-default, #slider .ui-widget-header .ui-state-default < border: 1px solid #666666; /* this image is from the ui-darkness theme, use the one you'd like */ background: #555555 url("img/jquery-ui/ui-bg_glass_20_555555_1x400.png") 50% 50% repeat-x; font-weight: bold; color: #eeeeee; >. ETC How do I use jQuery UI using WordPress?
I am trying to get the jQuery UI Dialog to work with WordPress. I saw this post(Using jQuery UI dialog in WordPress) and I attempted the solution but it is not working for me. In case it matters, I am using a child theme based on the twentyeleven theme. I put this directly in front of the wp_head() function in php:
function frontporch_enqueue_scripts() < if (!is_admin() ) < wp_enqueue_script( 'jquery' ); wp_register_script( 'google-jquery-ui', 'http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.12/jquery-ui.min.js', array( 'jquery' ) ); wp_register_script( 'jquery-template', get_bloginfo('template_directory').'/js/jquery.template.js',array('jquery'),version_cache(), true); wp_register_style( 'jquery-style', 'http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/themes/smoothness/jquery-ui.css', true); wp_enqueue_style( 'jquery-style' ); wp_enqueue_script( 'google-jquery-ui' ); wp_enqueue_script( 'jquery-template' ); >> add_action( 'init', 'frontporch_enqueue_scripts' ); I noticed that the twentyeleven theme or the child theme doesn’t actually have that third script(template.js), but I don’t think that is causing the problem. Then I added this at the bottom of the HEAD tag:
The page where this is occurring is here if that will help you diagnose the problem. Thanks for any help!