WordPress, jQuery UI CSS Files?

Asked 13/1, 2012 at 11:13 Answered 11/11, 2017 at 5:34

Solved jquery jquery-ui wordpress jquery-ui-css-framework

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?

Drusy answered 13/1, 2012 at 11:13 Comment(0)

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;.

Static-theme

$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
);

OR Dynamic-theme

$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
);

Carnation answered 3/8, 2012 at 4:50 Comment(3)

+1 for suggesting CDA instead of cluttering up plugin with common stylesheets – Zoogeography 19/11, 2012 at 16:25

Auto updating:

global $wp_scripts; wp_enqueue_style("jquery-ui-css", "http://ajax.googleapis.com/ajax/libs/jqueryui/{$wp_scripts->registered['jquery-‌ui-core']->ver}/themes/ui-lightness/jquery-ui.min.css");

the version is same as in WP (currently 1.10.3). – Vitellus 3/12, 2013 at 13:38

Actually, I only needed the dialog css. Use wp_enqueue_style("wp-jquery-ui-dialog"); – Galbreath 10/3, 2015 at 17:17

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.

Saltire answered 11/11, 2017 at 5:34 Comment(0)

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.

Hieronymus answered 13/1, 2012 at 11:20 Comment(3)

Can you also comment on is there a problem if multiple plugins starts to include separate jQuery UI themes? Sigh this half-hearted measure from WordPress team has made plugin developers to bundle own themes for jQuery UI, which is a mess and cross-plugin compatibility sucks. WP Team should: Embrace one single theme, and call it "WP jQuery UI theme", thats it, everyone should use it on their plugins. (Especially on admin!) – Vitellus 31/1, 2012 at 20:4

I'm pretty positive that Wordpress doesn't look at CSS conflicts. It's very common to "overwrite" your own stylesheet using another style so trying to search conflicts would be rather odd. Nonetheless I agree with you. Wordpress SHOULD improve this... Someone else could possibly help you with this. Try asking a new question. Good luck man! – Hieronymus 6/2, 2012 at 8:1

@Ciantic, I know from experience that there can be a lot of issues with conflicting script/style includes between themes and plugins. One of the big ones I've seen is jQuery getting included as a direct link added to the header as opposed to the proper wp_enqueue_script('jquery') method. There are some preventative measures you can take, but it's difficult to avoid. Unfortunately, even if you do it right, people will blame you for breaking their site if they add your plugin after already having a theme/plugin that does it wrong. – Sackman 30/7, 2012 at 19:20

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 {
    position: relative;
    text-align: left;
}

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

Kelvin answered 31/5, 2016 at 18:37 Comment(0)

If you use the wp_enqueue_style() and wp_enqueue_script() calls correctly, and assuming other author's are using them correctly as well, then WordPress will take care of conflicts.

However if a plugin or theme author prints the styles or scripts directly to the head of the page using wp_head or admin_head actions then there's not much you can do to avoid conflict.

Refs:
- http://codex.wordpress.org/Function_Reference/wp_enqueue_style
- http://codex.wordpress.org/Function_Reference/wp_enqueue_script

Couturier answered 30/7, 2012 at 19:14 Comment(2)

-1 for not answering OP's question. It wasn't how to add a generic style. – Zoogeography 19/11, 2012 at 16:24

not very nice to our new members, hmm? the comment itself would have sufficed. – Humperdinck 11/12, 2013 at 20:40

I just face this issue and found the post then I found a way is that inserting class "subsubsub" to ul tag. The list will be not bad. The code will be:

<div id="tabs">
<ul class="subsubsub"><li><a href="#tab1"></a></li>
<div id="tab1"></div>
</div>

Hope it can help someone.

Olimpia answered 20/7, 2016 at 9:7 Comment(0)

Hot tags

Godot Unity Godot Help Programming Godot 4.X GUI GDScript 3D 2D Physics CSharp Godot 3.X VR XR Projects C++

Recommended topics

Hot tags