WordPress, jQuery UI CSS Files? WordPress, jQuery UI CSS Files? wordpress wordpress

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

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


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.


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