WordPress, jQuery UI CSS Files?

Question

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?

Answer 1

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

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

Answer 3

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

Answer 4

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.

Answer 5

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

Answer 6

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.