You are Viewing : Home → CSS3 → WP UI – WordPress Tabs, Accordions, spoilers plugin

WP UI – WordPress Tabs, Accordions, spoilers plugin

By kavin |

WP UI for WordPress is a plugin that lets you add smart, beautiful and responsive interface widgets, such as Tabs, Accordions, spoilers, Dialogs into your wordpress posts. This plugin is built on top of the jQuery UI and comes bundled with rich documentation, extended browser support and detailed skins and themes.

Demo Download Support

Overview

WP UI gives you the easier way for the Articles that stand out. Most of the WP UI’s features are implemented with wordpress shortcodes, which means that learning curve is smooth and there is no compromise between appearance and performance. It can significantly reduce the length of your articles, making it easier to read and digest.

WP UI comes with the following components.

Component Shortcode
Tabs [wptabs] Wraps the tabs
  • [wptabtitle]Name of the tab
  • [wptabcontent]Contents of the tab
Accordion [wptabs type="accordion"] Wraps the Accordion
  • [wptabtitle]Title of the accordion
  • [wptabcontent]Contents of the Accordion panel
Collapsibles [wpspoilers]
Dialogs [wpdialog]

Please note : All WP UI shortcodes except when they are used to get and display posts are enclosing shortcodes, that means every shortcode opened should be closed. For example:

	[wptabs] // Opening shortcode	
	[/wptabs] // closing shortcode

 

Alternative shortcodes are also available.

  • [tabname] instead of [wptabtitle]
  • [tabcont] instead of [wptabcontent]
  • [tabs] instead of [wptabs]
  • [slider] instead of [wpspoiler]
  • [dialog] instead of [wpdialog]

When using alternative shortcodes, make sure that they do not conflict with shortcodes from another plugin.

 

Features

Style

  • 14 unique attractive CSS3 styles.
  • Ability all the jQuery UI themes
  • Custom theme manager that handles the custom styles downloaded from jQuery UI themeroller

Content

  • Include your posts, pages either single or multiple with a single shortcode.
  • Smooth learning curve with the ability to handle most of the complex Web content
  • Support for Nested tabs and AJAX loading inside the panels.

Help and support

  • Documentation available right in the wordpress editor page.
  • Support forums available right here

 

Usage of tabs, accordions, spoilers and dialogs

As mentioned earlier, all WP UI shortcodes are enclosing shortcodes, customizable with arguments [Codex : Shortcodes]. Please take a note of the below recommendations.

  • Shortcodes work best when they are entered through the HTML mode of the wordpress editor.
  • Different Shortcodes need to be in separate lines, but avoid the empty lines in between them. For example [wptabtitle] and [wptabcontent] shortcodes inside wptabs.

WP UI Components and their usage

The first one below lists all the shortcodes, arguments and the possible values. Second one below holds some sample shortcode structures.

Shortcodes, Arguments and values



Tabs and accordion


Tabs and accordion

[wptabtitle]
Arguments Values
load URL to the page your want to load through AJAX.
post ID of the post you want to load into the tab
page ID or name of the page you want to load into the tab.
page ID or name of the page you want to load into the tab.
cat ID or name of the category to load posts from.
tag Name or ID of the Tag to load posts from.
number Number of posts to load from the category or tag, if given.
before_post This appears before the post
after_post This appears after the post

[wptabcontent]
Arguments Values
none yet wptabcontent shortcode handles the tab’s contents should follow [wptabtitle] shortcode, except when the latter is used with post related arguments, post, page, cat, tag.
[wptabs]
Arguments Values
type Tabs or accordion. Choose type=”accordion”.
style Any of the accepted stylename values, given just below the table.
[wptabs style="wpui-achu"]
mode Define mode=”vertical” for vertically oriented tabs.
effect Effect to be used with the tabs. Accepted values are “fade” or “slide”.
[wptabs effect="fade"]
style Any of the accepted stylename values, given just below the table.
[wptabs style="wpui-achu"]
style Any of the accepted stylename values, given just below the table.
[wptabs style="wpui-achu"]
rotate Tabs auto rotation. It’s value need to be in microseconds eg:4000 or 4s ( 4 seconds ).
[wptabs rotate="6000"] is same as
[wptabs rotate="6s"]
Position Position of the tabs. position="bottom" moves the tabs to the bottom


Tab posts



[wptabposts] Tabs with multiple posts.
Arguments Value
All arguments This shortcode is basically the [wptabs] shortcode, so all the options apply.


Spoilers



[wpspoiler] Spoilers (single) | Collapsible (multiple)
Arguments values
name Name/Title of the spoiler.
style Any of the accepted stylename values, given just below.
[wptabs style="wpui-achu"]
fade Fade(animate opacity) on open/close.
[wpspoiler fade="true"]
slide Slide on open/close.
[wpspoiler fade="true"]
speed Animation speed in milliseconds. Greater the value, slower the animation.
closebtn Inserts a close button at end of the spoiler, with value as the label.
[wpspoiler closebtn="Click to close me"]
showText Text or HTML show on the closed spoiler i.e when content is hidden.
[wpspoiler showText="Click to show"]
hideText Text or HTML show on the open spoiler i.e when content is visible.
[wpspoiler hideText="Click to hide"]
open When this is set to true, Spoiler is open ( the content is visible ) at page load.
post ID of the post. This is loaded into the spoiler. When a post is specified, the post title is used as the name Argument.
[wpspoiler post="1171"]
before_post This appears before the post
after_post This appears after the post


Dialogs



[wpdialog] Dialogs
Arguments Values
title Title of the dialog.[wpdialog title="Information regarding Unicorns"]
width Width of the dialog, without the suffixing px value.
[wpdialog width="600"]
show Open animation.
[wpdialog show="drop"]
hide Animation when dialog is closed.
[wpdialog hide="explode"] Click here for the values.
modal [wpdialog modal="true"] makes an black transparent overlay appear.
auto_open When set to false, dialog is not opened at page load. Instead a button is placed that can be clicked at any time to open the dialog.
openlabel Can only be used with the above option, auto_open. Defines the label of the button.
position Position of the dialog.
[wpdialog position="bottom"]. Accepted values top, bottom, left, right
post ID of the post that is to be loaded into the dialog.
[wpdialog post="1175"]
openlabel Can only be used with the above option, auto_open. Defines the label of the button.
before_post This appears before the post
after_post This appears after the post



Sample shortcode structures


Tabs


Below is the basic example on tab's structure. As we can see, wptabtitle is used to define the tab's name, wptabcontent holds the content and both are repeated as necessary. This is finally wrapped within wptabs shortcode.

[wptabs]
  [wptabtitle] Tab 1[/wptabtitle]
    [wptabcontent] This is the content of Tab1.[/wptabcontent] 
  [wptabtitle] Tab 2 [/wptabtitle]
    [wptabcontent] This is the content of Tab2[/wptabcontent]
[/wptabs]


Accordion



So, accordions use the same shortcode [wptabs]. The required argument for an accordion is type="accordion", as mentioned earlier. Some tab specific arguments - rotate, effect, position have no effect on the accordions. 

[wptabs type="accordion"]
  [wptabtitle] Tab 1[/wptabtitle]
    [wptabcontent] This is the content of Tab1.[/wptabcontent] 
  [wptabtitle] Tab 2 [/wptabtitle]
    [wptabcontent] This is the content of Tab2[/wptabcontent]
[/wptabs]


Dialog



Dialogs are initiated with the shortcode [wpdialog]. Refer to the previous tabs for the list of arguments and values.

[wpdialog title="Confirm this action" show="drop" hide="explode" ] Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. [/wpdialog]


Collapsibles



Collapsibles aka sliders aka spoilers hide the content, that can be shown when user wants to click upon. It is implemented with [wpspoilers] shortcode. These when used in a row, can provide functionality parallel to accordions, notable difference being that multiple panels can be open at a time.

[wpspoiler name="Spoilers" showText="click to show" hideText="" ] Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. [/wpspoiler]


List of styles

List of styles that can be used with the widgets are below

WP UI custom styles

  1. wpui-light
  2. wpui-red
  3. wpui-blue
  4. wpui-green
  5. wpui-dark
  6. wpui-quark
  7. wpui-cyaat9
  8. wpui-android
  9. wpui-safle
  10. wpui-alma
  11. wpui-macish
  12. wpui-achu
  13. wpui-redmond
  14. wpui-sevin

jQuery UI themes

  1. ui-lightness
  2. ui-darkness
  3. smoothness
  4. start
  5. redmond
  6. sunny
  7. overcast
  8. le-frog
  9. flick
  10. pepper-grinder
  11. eggplant
  12. dark-hive
  13. cupertino
  14. south-street
  15. blitzer
  16. humanity
  17. hot-sneaks
  18. excite-bike
  19. vader
  20. dot-luv
  21. mint-choc
  22. black-tie
  23. trontastic
  24. swanky-purse
  25. base
  26. black-tie

Plus, Custom themes downloaded from jQuery UI themeroller.

You can use the styles with any of the included wp-ui widgets, for ex.

Using a custom style, these are prefixed with wpui-

[wptabs style="wpui-dark"]

Using a jQuery UI theme is basically the same. For example,

[wpspoiler style="pepper-grinder"]

Some examples

Example 1

Now something with lot of content.


Writing


Children Reading... Image by scbailey

All children, except one, grow up. They soon know that they will grow up, and the way Wendy knew was this. One day when she was two years old she was playing in a garden, and she plucked another flower and ran with it to her mother. I suppose she must have looked rather delightful, for Mrs. Darling put her hand to her heart and cried, "Oh, why can't you remain like this for ever!" This was all that passed between them on the subject, but henceforth Wendy knew that she must grow up. You always know after you are two. Two is the beginning of the end. Mrs. Darling first heard of Peter when she was tidying up her children's minds. It is the nightly custom of every good mother after her children are asleep to rummage in their minds and put things straight for next morning, repacking into their proper places the many articles that have wandered during the day. If you could keep awake (but of course you can't) you would see your own mother doing this, and you would find it very interesting to watch her. It is quite like tidying up drawers. You would see her on her knees, I expect, lingering humorously over some of your contents, wondering where on earth you had picked this thing up, making discoveries sweet and not so sweet, pressing this to her cheek as if it were as nice as a kitten, and hurriedly stowing that out of sight

Quotes

Some block quote tests:

Here's a one line quote.

This part isn't quoted. Here's a much longer quote:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In dapibus. In pretium pede. Donec molestie facilisis ante. Ut a turpis ut ipsum pellentesque tincidunt. Morbi blandit sapien in mauris. Nulla lectus lorem, varius aliquet, auctor vitae, bibendum et, nisl. Fusce pulvinar, risus non euismod varius, ante tortor facilisis lorem, non condimentum diam nisl vel lectus. Nullam vulputate, urna rutrum vulputate molestie, sapien dolor adipiscing nisi, eu malesuada ipsum lectus quis est. Nulla facilisi. Mauris a diam in eros pretium elementum. Vivamus lacinia nisl non orci. Duis ut dolor. Sed sollicitudin cursus libero. Proin et lorem. Quisque odio. Ut gravida, pede sed convallis facilisis, magna dolor egestas dolor, non pulvinar metus magna in velit. Morbi vitae sem sit amet arcu vehicula gravida. Morbi placerat, est id pulvinar sollicitudin, ante augue vestibulum turpis, eu ultrices pede metus sit amet justo. Suspendisse metus. Mauris convallis mattis risus. Nullam et ipsum eu magna hendrerit pellentesque. Ut malesuada turpis nec orci. Donec at urna imperdiet libero tincidunt lacinia. Phasellus mollis leo pharetra velit. Quisque tortor. Nam pharetra est vel felis. Maecenas tincidunt, purus ac ultrices vehicula, ante magna ultrices orci, ac malesuada lectus purus sit amet odio. Vivamus id libero. Vivamus enim nisi, egestas aliquam, tincidunt malesuada, semper at, turpis. Vestibulum risus dolor, placerat quis, adipiscing sed, scelerisque a, enim. Vestibulum posuere. Mauris felis. Vivamus ornare. Maecenas mi. Mauris quis nunc. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse potenti. In at lorem. Aliquam sed ligula eu erat ultrices congue. Aenean interdum semper purus. Phasellus eget lorem.

And some trailing text.

Tables

Table Layout Test

Title Views
About Test User 1 More
260 1 More
Archives 1 More
235 1 More

Align

Left-align, no caption

Left-aligned image with no caption, and text before and after. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed odio nibh, tincidunt adipiscing, pretium nec, tincidunt id, enim. Fusce scelerisque nunc vitae nisl. Quisque quis urna in velit dictum pellentesque. Vivamus a quam. Curabitur eu tortor id turpis tristique adipiscing. Morbi blandit. Maecenas vel est. Nunc aliquam, orci at accumsan commodo, libero nibh euismod augue, a ullamcorper velit dui et purus. Aenean volutpat, ipsum ac imperdiet fermentum, dui dui suscipit arcu, vitae dictum purus diam ac ligula.

Right-align, no caption

Right-aligned image with no caption, and text before and after. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed odio nibh, tincidunt adipiscing, pretium nec, tincidunt id, enim. Fusce scelerisque nunc vitae nisl. Quisque quis urna in velit dictum pellentesque. Vivamus a quam. Curabitur eu tortor id turpis tristique adipiscing. Morbi blandit. Maecenas vel est. Nunc aliquam, orci at accumsan commodo, libero nibh euismod augue, a ullamcorper velit dui et purus. Aenean volutpat, ipsum ac imperdiet fermentum, dui dui suscipit arcu, vitae dictum purus diam ac ligula.

you see how the content behaves inside the tabs? If you have something looking wrong, you can bundle additional CSS through the plugin's option page.

Example 2 : Media


Vimeo



wordpress tv



Youtube


For embedding Videos, you may need to enclose the videos within [embed width="460px"][/embed] shortcodes, If the video exceeds the tab's width, please pass the width argument to the embed shortcode.

    Demo

    Above examples does not do any justice to this plugin's capabilities. Check out all the examples with the code involved below.

    Demo : Components | CSS3 styles

     

    Download

    Download WP UI for WordPress
    By kavin | Latest

    Changelog

    All versions

    Each version of WP UI brings you additional features. Most of these are customizable through the options page. Due to this fact, it might be necessary to re-save the options after each update.

    View the WP UI changelog

    Documentation

    You can find the documentation on WP UI at projects site.

    Thanks to Soren Dayton for his suggestions on the posts feature that then became available from version 0.7.

    Help and support

    Most of the issues can be corrected by verifying the shortcode syntax.

    Do enter different shortcodes in separate lines, but avoid the empty lines in between. If you want to enter the shortcodes in the same line, give at least two spaces before the next shortcode.

    Get help and support

     

     

    Cheerio,

    kavin

     

    ← Previously :
    Next : →
    • Nelly

      Neat work, nicely done styles. Trying it now.

    • Ray G

      I just installed the plugin but when I activate it I get: The plugin does not have a valid header.

      PS I’m using WP 3.2.1 and a child of the Thematic theme.

      • http://kav.in kavin

        Sorry for the troubles. Errors have been fixed, Please update.

    • Jan

      Hi,
      I am failing to embed a video in the tabs. Please help.
      Here is what I input:
      [wptabtitle] Tab 2 [/wptabtitle]
      [wptabcontent]
      [embed width="520" height="456"]http://www.youtube.com/watch?v=FNRcTF_AXkA&feature=youtu.be[/embed]
      [/wptabcontent]
      And here is what I get:
      http://www.youtube.com/watch?v=FNRcTF_AXkA&feature=youtu.be

      • http://kav.in kavin

        Hello Jan, may i bother you for a screenshot or even better , the page with the result?

        Try to put the wptabcontent and embed shortcodes on the same line. For eg.


        ...
        [wptabtitle]Tab 2[/wptabtitle]
        [wptabcontent] [embed width="520" height="456"]http://www.youtube.com/watch?v=FNRcTF_AXkA[/embed] [/wptabcontent]
        ...

        Please try and let me know.

        • Jan

          Hi Kavin,
          Thanks for the reply. I used Viper’s Video Quicktags plugin and everything is ok now
          Thanks for your plugin!

          Jan

          • http://kav.in kavin

            Thanks Jan. You’re welcome. It’s your appreciation that matters. :)

    • Jan
      • http://kav.in kavin

        Wow! I didnt know you could do that on the facebook pages.. :D

        Thanks for the info.

        • Jan

          I am using my own child theme of twentyeleven for that.

    • Thomas

      Hi,

      thanks a lot for this great plugin.

      i just got stuck after enabling the plugin an succesfully adding tabs an existing page. when everything concerning the tabs was working, i figured, that i could´nt add any images while in visual editor.

      working with wp3.2.1 and these plugins (only plugins with jquery effects listed): promotions 3.3.1, shadowbox js 3.0.3.8

      when wp ui is disabled, i can add images with the visual editor again. any hints?

      kind regards!
      –
      Thomas

      • http://kav.in kavin

        Hello Thomas, I just tried and confirm this issue. I am working on this right now. Sorry for the troubles.

      • http://kav.in kavin

        Hi, Plugin has been updated. Everything should work now.

        • Thomas

          Hi Kavin,

          i´ve just updated the plugin on my site and everything is working again!

          i´ve got another question: how can i add my own update-safe style for tabs, accordions and slider?

          currently i´m having a lot of lines of css concerning this issue.

          Kind regards!

          • http://kav.in kavin

            Hiya, You can use the theme style sheet or plugins such as Stylepress and alike. I will add a visual style configurator in the next major version(likely 1.0). Thanks for the note.

    • greg

      Fantastic Plugin :-)
      One quick question. On your demo site and in my own site, the Sliders collapse with a very jerking movement.

      I much prefer the Sliders as users can open and collapse them at will and don’t need to scroll down a lot if if there is a lot of content in the “content” area like they would have to with an Accordion etc.

      However, the jerky movement detracts from the really cool smooth action of the Accordion.

      Is there a way to get that smooth flowing action in Sliders? Pleeeeeease :-)

      • http://kav.in kavin

        Thanks greg. :)

        I will definitely fix that. The problem seems to be related with the varying height of the enclosed content. Also the entire animation looks bit different in Chrome. Added to my To Do’s ;)

        And i am really not sure what you meant by this line,

        I much prefer the Sliders as users can open and collapse them at will and don’t need to scroll down a lot if if there is a lot of content in the “content” area like they would have to with an Accordion etc.

        Could you please explain?

        • Greg

          Hi Kavin, sorry for the late reply :-(

          What I meant above re preferring the Sliders is that you can click on the first “tab” and it opens for you to read the content etc.Lets say that there’s about 3 or so paragraphs of text.

          When you click on the tab again it closes and brings up the 2nd tab for you to click on and so on.

          With the Accordion type style, if you click on the first “tab” and you finish reading the content, you can’t close it again and might have to scroll down the page if there’s a lot of text to get to the 2nd “tab” to open it so that the 1st “tab” can close.

          Just seems to me that the Slider option is more user friendly and practical :-) But each to their own and its cool you offer so many options :-)

          • Kavin Gray

            Hi greg, IMHO I think spoilers( sliders) are more suitable for your needs. Accordions are made that way, so as to keep a single panel open at a time, in accordance with the real world accordion instrument.
            But if you turn on the “Collapsible accordion” under options page -> Effects, You can click the same acc panel to collapse it and then click the next one open. But that's purely your choice. :)

          • Greg

            Brilliant. Thanks for that :-)

    • Thomas

      Hi Kavin,

      i´ve been adding some content to my site and ran into a problem.

      when i try to enter a wptabtitle with special characters like a dot, slash or ampersand, the tab/content gets mixed up.

      is there any way to get rid of this like using special characters in bash?

      kind regards!

      • http://kav.in kavin

        Hi Thomas, this is due to the fact that The tab title’s text is converted to the ID of the respective tab’s panel(the one with content). For example if you name the tab as “My Awesome Tab” , that tab’s panel has the ID “#my-awesome-tab”. There are certain characters that are not valid in the ID attribute and this seems to vary upon the browsers.

        You can still use the HTML entities instead e.g. & for & , for now. This will be fixed soon . :)

        Thanks.

    • Paul

      Hi! I love the ease of use and cleanliness of this plugin.

      Would it be possible to have accordions all be closed, instead of always having one open? Like this: http://jqueryui.com/demos/accordion/#collapsible

      • http://kav.in kavin

        Hi, Thanks for the support.

        Collapsible accordions are a definite possibility, just not implemented yet. I will add this behavior and the option in upcoming revision. :)

        • Paul

          I just saw that you added this functionality. Thank you so much!

    • http://legendarysafari.com Susan

      OK, I can get the basic accordion to work, but I am unable to add any effects.

      Here is one page’s code, but the accordion refuses to rotate:

      [wptabs rotate="1000" type="accordion" style="wpui-quark"]
      [wptabtitle] Seven Day / Six Animal Plains Game Hunt[/wptabtitle]
      [wptabcontent]
      This Package includes the following:
      [/wptabcontent]
      [wptabtitle] Ten Day / Seven Animal Plains Game Hunt [/wptabtitle]
      [wptabcontent]
      This Package includes the following:
      [/wptabcontent]
      [/wptabs]

      Another thing… if I try to create simple tabs, I only get the tab – no content. Any ideas?

      • http://kav.in kavin

        Hi susan, Thank for the appreciation and the support.

        The rotate feature is only implemented with the tabs, not the accordions. Implementing that shouldn’t be too hard, but accordion with variably tall content can make the entire layout jumpy, right?
        As about only the tabs showing, Click any one of the tabs, content will show up. This happens rarely, in that tabs are sort of collapsed. This is related to the jQuery , happened on normal web pages i tested too. View in alternate browser, tabs will be fine.
        Pleating – it’s a neat idea. :)

        Any issues , please let me know.

    • http://legendarysafari.com Susan

      A nice addition would be a way to have a specific tab or accordion pleat “on top” – even if it is not the first tab.
      Thank you for this plug-in, it is very nice looking and simple to use!

    • http://www.potion.co.za Denis

      Hi Kavin. Great work on this plugin. However, I noticed that the styling is compromised when there are other plugins that use JQuery UI. In Firebug I saw that the tab titles picked up styling from Taylor Lovett’s Custom Contact Forms (http://wordpress.org/extend/plugins/custom-contact-forms/). In my case it was not a big problem – it worked OK – but it might cause some frustration.

      • http://kav.in kavin

        Hi Denis! I just verified the problem. It would’ve been better if jQuery-UI gave a little bit more freedom over styling and the same issue would occur with any other plugin using jQuery UI. i just have to re-invent the wheel, i guess. :)

        Thanks, much appreciated. :)

        Kavin.

    • Storm

      Hey Kavin,

      Great plugin! Quick question – can the custom styles be edited to fit the colors of the theme? For instance, would it be easy to edit “wpui-alma” and change the colors to better fit the current theme? I’m not very good with CSS, but I’m wondering if the colors could be edited in the syles.css or somewhere.

      Thanks

      • http://kav.in kavin

        Hey Storm, Thanks!

        You can override the CSS styles through the WP UI Options -> Advanced -> Custom CSS. CSS is IMHO one of the easiest languages to play with, so don’t let it hold you back :)

        Let’s try changing the panel appeareance in wpui-alma style.

        Input this into the the custom css textbox.

        .wpui-alma .ui-tabs-panel {
   /* Background color(fall back) and colors */
   background: #222 !important;
   color : #DADADA !important;
   text-shadow: 0 1px 0 #000;

   /* Some nice dark gradient */
    background: -moz-linear-gradient(top , #666,  #222) !important;
   background: -webkit-gradient(linear, left top, left bottom, from(#666), to(#222)) !important;
   background: -webkit-linear-gradient(top , #666, #222) !important;
   background: -o-linear-gradient(top , #666, #222) !important;
   border-color: #000 !important;
}

        Legend :
        !important Tell the browser to override the previous value.
        –xxx-linear-gradient… CSS3 background gradients, for all the major browsers. CSS3 gradient generators are available online, here, here, and more!.

        Hope this helps. I will try to include a style configurator in the next major version.

        • Storm

          Thanks, I guess it is easy if you know what you are changing lol.
          I tried changing the colors for macish and a couple of others, but only the text changed.
          Just trying to get it to blend with the theme.

          I’d like to use quark – #45a0a8 for the dark main color, #f0cd9e for the tabs and text(light color) and #of5f66 in place of the black border at the top of the tabs. Where would I put these colors? If you don’t mind showing me, it is to match colors from the site below I’m working on: http://www.wocaf.org

          Thanks

    • http://kav.in kavin

      The code below should do it, when input into the custom CSS box.

      .wpui-quark ul.ui-tabs-nav {
	background: #2B6368;
        background: -moz-linear-gradient(top , #2B6368, #0F5F66) !important; 
	background: -webkit-linear-gradient(top , #2B6368, #0F5F66) !important;
	background: -o-linear-gradient(top , #2B6368, #0F5F66) !important;

}

.wpui-quark ul.ui-tabs-nav li {
	background : #F0CD9E !important;
	
}

.wpui-quark ul.ui-tabs-nav li.ui-state-active {
	background: #45A0A8 !important;
}

.wpui-quark .ui-tabs-panel {
	background: #45A0A8 !important;
    background: -moz-linear-gradient(top , #45A0A8, #2B6368) !important;
    background: -webkit-linear-gradient(top , #0F5F66, #2B6368) !important;
    background: -o-linear-gradient(top , #0F5F66, #2B6368) !important;
	color : #FFF !important;
	text-shadow: 0 1px 0 #0F5F66 !important;
}

      It may require a bit of tweaking. !important before the semicolon can over ride all the styles.

      • Storm

        Thanks a lot for your help!!!
        I can tweak the rest now, appreciate your help.

    • http://www.pardes.it pardes

      Hi Kavin, thanks for your work. I use wp 3.2.1 & your plugin 0.5.2 but only wpspoiler works. Tabs don’t work. I tried to reinstall the plugin many times but no chances to have the result. I have this plugins now installed: Ad Squares Widget, Broken Link Checker, CW Show on Selected Pages, IGIT related post with thumb, TinyMCE Advanced, Video Sidebar Widgets, WP Photo Album plus. Can all this create incompatibilities?
      Ciao! Pardes

      • http://kav.in kavin

        Hello pardes. Not all plugins can cause incompatibilities. It might be a plugin, using the same framework( jQuery UI), therefore causing this problems. Can you try disabling-enabling the last three plugins from your list and let me know if anything improves? Thanks.

    • http://www.pardes.it pardes

      Hi Kevin, I tried but no success. The wpspoiler doesn’t collapse but create separated blocks (with css style !!!). Other suggestions? Thanks Pardes

      • http://kav.in kavin

        Hi pardes, Do you have the page online where i could look at it? Thanks.

    • http://twitter.com/thyraxx Thyraxx

      I’m using WP 3.1.3 on a Linux machine and all i see is the text, tried it a couple of times, reset, re-install, re-saved but still no success. Took off all the plugins that use JQuery but still nothing

      • http://kav.in kavin

        Hi Thyraxx, Are there any errors in the console?

        • http://twitter.com/thyraxx Thyraxx

          No errors

          • http://kav.in kavin

            Hi sir, strangely am not able to reproduce the bug on my local server. Sorry for the troubles, i will try it and keep you posted. Thanks. :)

          • http://twitter.com/thyraxx Thyraxx
          • http://kav.in kavin

            I am not able to access this page. Can you please verify? Thanks.

    • http://www.diningonthebelt.com.au Shannon

      Hi, I love the idea of using the jquery themeroller to create your own style – I wanted something that fitted better with my theme. However how do I load this into wordpress? I am a beginner in js. Thanks

      • Shannon

        Sorry – forgot to say only wanted the theme for my tabs plugin.. Thanks

        • http://kav.in kavin

          Hi Shannon, jQuery UI themes are loaded from Google’s CDN servers. It is not possible currently to use a custom theme with this plugin. And, With some modifications, it might be possible – but that would require creating/downloading your custom theme and manually uploading the theme folder to the plugin directory on your server.

          Thanks.

    • http://premiumwagers.com Greggy284

      Is it possible to display at load time with top accordion panel open and all others closed.  Is there an option or a parameter that can be set?

      • Anonymous

        Hi Greg, Just uncheck the “collapse” option on WP UI options page. It’s under “effects” tab.

        • http://premiumwagers.com Greggy284

          I just saw that 2 minutes ago.  Thanks for the response.

    • http://premiumwagers.com Greggy284

      Kavin,

      I am placing and advertisement inside a group of accordion tabs.  I have placed a “buy now” paypal button in one of them.  Everything is fine until I try to place this snippet of code inside the tags of the button -

      This code fixes a bug with my membership plugin and how paypal handles credit cards.  With this code inside the tabs the entire page won’t load.  As a test i separately placed this same button code with the above snippet in, at the bottom of the page (outside of the tabs) and everything works fine.  Is there a way around this or is this kind of tag not allowed in your plugin?

      Thanks for your help. 

      • Anonymous

        Hi greg, scripts should definitely work, and has nothing to do with the plugin. I will look at it, and let you know.

        • http://premiumwagers.com Greggy284

          Sure

          go to http://premiumwagers.com/test-page/

          log in as –  kavin

          PW – tester99 (same PW for page)

          you should be able to see the 2 paypal buttons, one inside your tabs one outside.  You should be able to edit the page.  You will notice the script isn’t in the one in your tab.  Once it goes in there the page will no longer load.  So I would open it in two separate browser tabs, so that you still have access to the code in case it won’t load.

          Let me know what you find

    • http://SiteSubscribe.com Jeff Kemp

      Gorgeous! I plan to use this on lots of sites… Thanks!

      • Anonymous

        You’re welcome, Jeff :)

    • Shannon

      Hi, I’m really enjoying your plugin and just needed a point in the right direction due to a couple of hiccups.  I’m having difficulty with your plugin when using tags and
      categories.  It seems when I have more than 1 post on the page, all my
      titles end up outside the tabs?  You can view the issue here:
      http://diningonthebelt.com.au/category/trading/lunch.  I also asked below about themes.  You mentioned you could design your own theme with themeroller but didn’t explain how to load this into your plugin?  Are you able to help there?  Thanks! 

    • http://www.facebook.com/MkeMintz Mike Mintz

      Hi Kav: love the plug in. Quick question: can I nest sliders under tabs? I noticed this seemed to break the ability to add multiple tabs. My code looks like this sample:
      [wptabs][wptabtitle]Business[/wptabtitle][wptabcontent][wpspoiler name="Fundamentals"]content[/wpspoiler][wpspoiler name="Intermediate"]content[/wpspoiler][wpspoiler name="Advanced"]content[/wpspoiler]

      [/wptabcontent][wptabtitle]Humanities[/wptabtitle][wptabcontent][wpspoiler name="Fundamentals"]content[/wpspoiler]

      [wpspoiler name="Intermediate"]content[/wpspoiler]

      [wpspoiler name="Advanced"]content[/wpspoiler]
      [/wptabcontent][/wptabs]
      It will show spoilers under the first tab, but then the subsequent tabs just show up as text under the last spoiler.

      Any suggestions?

      Thanks,

      Mike

      • Anonymous

        Hi Mike, Thanks!
        Yes you can. Just move each shortcode to its own line. like

        ......
        [wptabcontent] Content preceding the spoiler..
        [wpspoiler name="Intermediate"] The content inside the spoiler. Note the spoiler shortcodes are in separate line. [/wpspoiler]
        [wpspoiler name="Advanced"] This is another spoiler shortcode, on next line. [/wpspoiler]

        Content after the spoiler..
        [/wptabcontent]
        .......

        • http://www.facebook.com/MkeMintz Mike Mintz

          Hi Kavin,

          I can totally do that; my problem is getting multiple tabs on a page when I include spoilers in the tab content. Is this a bug? Is it fixed by adding some content before the beginning of the spoilers?

          Mike

          • Anonymous

            Hi Mike,

            Do you see the shortcode tags in the rendered page, specifically the closing ones?

            If possible, can you please send me the link to the page with above said bug?

            Thanks,
            Kavin.

          • http://www.facebook.com/MkeMintz Mike Mintz

            Hi Kavin,

            Here’s the link to the page http://touro.mymedialabs.com/tci-course-catalog

            This is what the current code and content on the page looks like:

            [wptabs] [wptabtitle]Science & Math[/wptabtitle][wptabcontent][wpspoiler name="BIO 101 Principles of Biology I"]An introductory course that presents the basic principles and processes of biological science.The first semester includes: the structure and function of the cell, cellular metabolism, cell reproduction, plant physiology, genetics and, molecular biology.The second semester includes: viral genetics, endocrinology, immunology, animal development and the circulatory, respiratory, digestive, excretory, reproductive and nervous systems.Laboratory exercises include: microscopy, cellular reproduction, enzyme activity, DNA analysis transformation, comparative studies of animal and plant cells, and vertebrate4 credits (each semester). Prerequisites: NoneInstructor: Dr. Jay PoupkoB.A. Yeshiva UniversityPh.D Albert Einstein College of Medicine (Biology)[/wpspoiler][wpspoiler name="BIO 246 Nutrition and Human Development"]This course offers a specialized review of the principles of sound nutrition and the effects of diet on personal well-being. Environmental, social, physical and psychological reasons underlying poor diet are examined.3 credits. Prerequisites: None.Instructor: Dr. Jay Poupko, B.A. Yeshiva UniversityPh.D Albert Einstein College of Medicine (Biology)[/wpspoiler][wpspoiler name="MAT 111 College Mathematics"]An introductory course in mathematical skills and techniques necessary for further collegiate study. This course addresses fundamental principles of algebraic calculations such as operations with signed numbers, exponents, negative exponents and operations with fractions, verbal problems and solution of equations, graphical methods, systems of linear equations.3 credits. Prerequisite: Placement by departmental examination. Instructor: Mrs. Elizabeth LifschitzB.A., Washington University, St. Louis MisouriM.A., University of Texas, San Antonio[/wpspoiler][wpspoiler name="MAT 261 Statistics for Social Science Majors"]Basic concepts in descriptive and inferential statistics including measurement scales, frequency distributions, measures of central tendency and distribution, correlation coefficients, linear regression, probability theory, binomial distribution, and parametric and non-parametric tests of significant differences.3 credits. Prerequisites: MAT 111 or placement exam.Instructor: Dr. Barbara ZinnB.A., University of South AfricaB.Sc. University of Cape TownM.Sc., Hebrew University of JerusalemPh.D., Hebrew University of Jerusalem[/wpspoiler][wpspoiler name="MCO 140 Computer Concepts"]This course is divided into two parts.One part involves the discussion of basic computer topics and terminology. Computer hardware and software are discussed.The second part of the course is comprised of hands-on instruction in Microsoft Office Applications.This course is not a required course or an approved elective for a Computer Science or MIS degree.3 credits. Prerequisites: NoneInstructor: Mr. Yitzchak Novick[/wpspoiler][wpspoiler name="MCO 148 Advanced Computer Business Applications"]This course discusses advanced features of Excel and introduces PowerPoint. An accounting application such as Peachtree or QuickBooks is introduced as well. The goal is to fully expose business students to PC applications that they can integrate into their studies and use on the job.This course is not a required course or approved elective for a Computer Science or MIS degree.3 credits. Prerequisites: MCO 140,EBA 101, EBF 101Instructor: TBD[/wpspoiler][/wptabcontent][wptabtitle]Business[/wptabtitle][wptabcontent]test[/wptabcontent][wptabtitle]Humanities[/wptabtitle][wptabcontent]test[/wptabcontent][wptabtitle]Psychology[/wptabtitle][wptabcontent]test[/wptabcontent][/wptabs]

          • http://www.facebook.com/MkeMintz Mike Mintz

            Note that on my actual code page each short tag is on its own line.

          • Anonymous

            Hello Mike, this is clearly an issue with wordpress post editor and shortcode parser. When you look at the page’s source through the browser, you can notice that there are lot of stray para <p> tags and tags, and div elements enclosed within p tags, which are done by WP default post editor .

            I would recommend creating the tabs and spoiler next from each other, then you can always move them back inside the tabs. And all this need to be done on the HTML mode, switching to the visual mode can mess up the code.

            Please let me know further.

          • http://www.facebook.com/MkeMintz Mike Mintz

            Hi Kav,

            Got rid of some extraneous Div tags and that worked! Will keep you posted and let you know if there are any other issues.

            Quick question: I want to embed an instant messenger window and an email form to an accordian page. Any suggestions on what I should use? Plugins? What will work with your plugin?

            Thanks,

            Mike

          • Anonymous

            Hi Mike, glad it worked. :)

            About the IM window and contact plugins – Contact form 7 works likes a charm. IM module, never thought about it and would have to try it though. :) Plz Tell me about what kind, one that’s like Live Chat or traditional protocol ones?

          • http://www.facebook.com/MkeMintz Mike Mintz

            What’s the difference btw Live Chat and traditional. I’m thinking it’s a window that will allow users to IM with the client on a private IM channel like AIM. Right now I’ve got a Chat Roll window in there (allows a mini chat room on the page), but I’m not thrilled with it. The clients’ goal is to be able to answer questions instantly for potential students rather than holding a chatroom type discussion. Thoughts?

          • Anonymous

            Traditional – Ones provided by Yahoo etc.

            Others are mostly like the chatrooms. I will do a little research and will let you know. :)

          • http://www.facebook.com/MkeMintz Mike Mintz

            Hi Kavin,

            I got the tabs and spoilers to work great – thanks for all your help. 

            Now I’m building a contact page using accordian tabs. I got Zoho IM client to render great, but am having trouble with Contact Form 7 within an accordian tab. It won’t show the send button (this does show up on pages without the accordian tabs).

            Here’s the code:

            [wptabs type="accordion"][wptabtitle]Let’s Chat[/wptabtitle][wptabcontent][/wptabcontent][wptabtitle]Email Us[/wptabtitle][wptabcontent][contact-form 2 "TCI Email Form"][/wptabcontent][wptabtitle]Tables[/wptabtitle][wptabcontent] Contents of the Tables tab [/wptabcontent][wptabtitle]Align[/wptabtitle][wptabcontent] Contents of the Align tab [/wptabcontent][/wptabs]

            Any suggestions?

            Thanks,

            Mike

          • Anonymous

            Hai Mike, I can confirm there is an issue with the contact form’s submit button. It was working in earlier version( based on which i recommended), but fixing one breaks another. I will fix this ASAP.

          • http://www.facebook.com/MkeMintz Mike Mintz

            Hi Kavin,

            Looking forward to the fix.

            Thanks,

            Mike

          • Anonymous

            Hey Mike, Sorry for keeping you on wait. I am almost near to including/managing multiple jQuery UI custom themes, thats why it’s slightly off schedule. Will release ASAP. Thanks.

    • http://www.gspreschool.net Joie Hadi Nata Tan

      Is the forum available. it seems that no verification is sent upon account creation and I cant login as well.

      • Anonymous

        Yes it is. You will recieve the mail shortly. Thanks for the patience.

        • Joie Hadi Nata Tan

          I have received email regarding password reset but when i login (in the pop up box) i got an permission denied

          • Anonymous

            It looks like you’ve been registered twice using the same email. I am deleting the one with account with the user name “joietan”. Please try logging again.
            If it still doesn’t work, I apologize for the inconvenience, could you please repeat the sign up process? Thanks for understanding. :)

    • Joie Hadi Nata Tan

      I cant seem to get the tabbed displayed correctly. My site is on development (local copy)
      I try to set red but it appears as  gray

      [wptabs color="red"]
      [wptabtitle]Our Offer[/wptabtitle]
      [wptabcontent]Preschool Children are the best.
      There are free classes[/wptabcontent]
      [wptabtitle]Testimonials[/wptabtitle]
      [wptabcontent]Ms Linda said it was ok[/wptabcontent]
      [/wptabs]
      the help menu has error, did i messed up the installation ?
      Notice: Undefined index: HTTPS in C:wampwwwgspreschoolwp-contentpluginswp-uiadmindocwpui-buttons.php on line 150 Call Stack #TimeMemoryFunctionLocation 10.0229383768{main}( )..wpui-buttons.php:0 20.0229383768get_plgn_url( )..wpui-buttons.php:183 http://www.gspreschool.net/wp-content/plugins/wp-ui/admin/doc/wpui_quicktags_button_help.png” width=”400″ height=”250″ alt=”WPUI – HTML editor buttons” />Image 1.0 WP UI – HTML mode Editor buttons and the steps

      • Anonymous

        The shortcode wptabs doesnot have the argument color, since v0.1. It should be any of the styles mentioned above, so it should be


        [wptabs style="wpui-red"]

        About the plugin Notice error – It seems like some files are missing.Reinstall the plugin through wordpress admin or re upload through FTP.

    • http://www.datachieve.com Tom Finley

      Great job with this plugin! There’s definitely a conflict with Easy Fancybox, though. Eventually I’d like to use WP UI on all our sites, so I’m highly interested in seeing this come out of alpha/beta, whatever.

      • Anonymous

        Thanks Tom. I will definitely try my best with this plugin. :)

        Please post in the forums about the verified conflicts, if possible. This will help me in improving this plugin.

      • Anonymous

        Hello Tom, i could not confirm the bug you mentioned, i installed the plugin and actually everything seem to work. Can you please add some detail?

    • Donia

      I’m experiencing problems with thickbox images (such as nextgen gallery ones) when I open one of them the tabs stop working, I have to reload the page to go on reading from tab to tab!

      • Anonymous

        Hi Donia, sorry about the issues. May i ask you for a little help, by posting this here, so i can keep track and promptly fix the issues? Thanks very much, will fix this ASAP.

    • Jörg

      Hi. Is it possible to use accordion but open more than one at the same time?
      Or as an alternative use wpspoiler but open the first one when the page is loaded?
      Thanks for your help.

      • Anonymous

        Hi, it is not possible with accordion. But not yet with wpspoiler, yes, i will add an option in the next update that’s due a day or two.

      • Kavin Gray

        Hi Jörg, update to 0.5.5 and now give the argument open="true" to the wpspoiler shortcode. That will be open at page load.

      • Jörg

        Hello Kavin.
        Many thanks for that… works like a charme! :-D

      • Jörg

        Hi. I think I found a little bug with the new feature: The “Text for show hidden content” and “Text for Hide shown content” are transposed…
        It would be also very nice if the settings would accept an image-link instead of only a text….

      • Jörg

        Me again… another effect is, that the “Text for Hide shown content” is permanently shown directly before the header-text…
        Thanks for your help.

        • Kavin Gray

          Hi Jorg, i will fix this in the upcoming update ASAP. :) I’ve got lot of new features rolling in the next version and its done more than 3/4th now. Sorry for the issue.

          • Jörg

            Many thanks. I solved this by insert  .ui-icon { display: none; } in my css… maybe this is a possible place to insert a little arrow-icon (instead of the text)?
            BTW: It’s great how fast you react and support, that’s not expectable for a free PlugIn. Thanks a lot for that and your great PlugIn!
            Awaiting the next version…

          • Kavin Gray

            You’re welcome. Following should do it.

            .open-true span.ui-icon {
            background: url("http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/smoothness/images/ui-icons_222222_256x240.png") no-repeat scroll -64px -16px transparent;
            display: inline-block;
            height: 16px !important;
            padding: 2px;
            text-indent: -99999em;
            vertical-align: middle;
            width: 16px;
            }

          • Jörg

            Just to log it maybe for other users, I inserted now the following CSS wich brings me different arrows (open/closed spoiler) and shows them at the right of the headline:
            span.toggle_text {
              display: none;
            }
            span.ui-icon-triangle-1-e {
              background: url(“http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/smoothness/images/ui-icons_222222_256x240.png”) no-repeat scroll -32px -16px transparent;
              display: inline-block;
              height: 16px !important;
              padding: 2px;
              text-indent: -99999em;
              vertical-align: middle;
              width: 16px;
              position: absolute;
              margin-left: 656px;
            }
            span.ui-icon-triangle-1-s {
              background: url(“http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/smoothness/images/ui-icons_222222_256x240.png”) no-repeat scroll -64px -16px transparent; 
            }

    • Jason Sminchak

      Hi, I love this plugin because it helps me to customize my website without having to write all of my own html.  I have two issues I need help with. 

      First issue I have is that the text in the content area goes beyond the width of the accordion table.  I have to manually hit “enter” and start a new line to keep it within the table box.  Is there code to wrap the text?

      Second issue I have is the height of the content area.  My content only takes up about 3 to 4 lines of space, and there is a ton of unused and unneeded white space below.  How can I fix that?

      • Anonymous

        Hi Jason, Thanks.
        About the first issue, what theme are you using? And are you using <pre> tags or tables? A link to the above problem would be great.
        And the Second issue, accordion takes the height of the tallest content panel and sets all panels to that height. You can turn that off by unchecking Options page -> Effects tab -> Accordion auto height

        • Jason Sminchak

          Not sure how I did it but I fixed the first issue with the text going outside of the content area.

          Also, thank you for pointing out the solution to the 2nd issue.  I missed that somehow! 

          Great tool!  Thanks again!

    • Bgrierson

      Hi Kavin M

      Love your plugin. Can I change the styles with custon CSS? How would I do that please.

      tya muchly much.

      • Anonymous

        Hi Bgrierson, Enter your custom css in the textbox found in “WP UI options -> Style tab -> Advanced -> Custom CSS”. Tools like Firebug( for firefox ) or Chrome Inspector ( right click anywhere -> inspect element) will be useful for this purpose. Please post in Forums for further help.

    • http://www.facebook.com/shrekdul Arry Harmawan

      Hi. .. I found u’r plugin are truly awsome and useful. ..
      I wanna change the “Click Here to Hide” and “Click Here to Show” into “+” and “-” sign. I’ve change the get_wpui_default_options( ) on wpUI-options.php. and change the js file but nothin changed. .. Could u help me how to change those text please.?

      • Anonymous

        There is no need to edit the php file. Go to options -> Text tab -> Txt for hide show content and show content. :)

    • http://www.facebook.com/profile.php?id=100000519112206 João Gomes

      Hey,I’m
      very happy with the plugin, but since the last updatei’m having some
      errors in the pages where i use the tabs code like this one: http://saudeh2o.com/formacoes/reabneuromotora_modulobIs
      says: Warning: array_key_exists() [function.array-key-exists]: The
      second argument should be either an array or an object in
      /home2/saudehoc/public_html/wp-content/plugins/wp-ui/wp-ui.php on line 385the same to line 392

      • Kavin Gray

        Hi João Gomes, the error has been fixed. Please update.

        • http://www.facebook.com/profile.php?id=100000519112206 João Gomes

          Hey i still have an error. But this time it says it is in the line 382

          The errors on lines 385 and 392 have gone but there is this new one

          • Kavin Gray

            Did you re-save the options? Sorry for the troubles.

          • http://www.facebook.com/profile.php?id=100000519112206 João Gomes

            Yes. For re-save you mean update the plugin, go to options page and save the options again right?

          • Kavin Gray

            Yes. Please try it and let me know.

          • http://www.facebook.com/profile.php?id=100000519112206 João Gomes

            Done that and still the error on line 382 like Jerry :(

            http://saudeh2o.com/formacoes/reabneuromotora_modulob/

          • Kavin Gray

            Sorry m8, I think the wordpress updater still keeps sending the old version. I corrected the problem, there is not even any array_key_exists references anymore, they were removed and commented out.

            Can you re-install the plugin please, if possible? My sincere apologies. :(

          • http://www.facebook.com/profile.php?id=100000519112206 João Gomes

            Re-install worked. Thanks a lot!

    • Jerryzarley

      The new version isn’t working correctly. Here is what my home page now looks like after updating. http://jerryzarley.com

      How can I get the old version back

      • Kavin Gray

        Sorry for the troubles, Jerry . Error has been fixed. Please update to 0.5.6. The error was a small glitch in the options which is now totally fixed. :)

        • Jerryzarley

          Thanks Kavin. But now I am having crazy spacing issues that weren’t there before. I tried removing the hard returns but that just made the matter worse by showing the code (e.g. [/wpcontent]) on the page.

          • Kavin Gray

            Hai Jerry, i am extremely sorry for the troubles. I think the update is not complete (line 382 error on your page), can you please try it again? Sorry again.

          • Jerryzarley

            No problem. You are working on them and you do this at no cost, which I get, because I run my own newsletters at no cost to the recipients. So again, no problem at all.

            I just deleted the plugin and reinstalled it. I get the line 382 array error when I try to uncheck the next/previous buttons from the options. And, I am still having the spacing issues where there is too much white space, which wasn’t there in the previous version.

          • Kavin Gray

            Thanks very much, Jerry. :)
            That too much white space is being caused by empty paragraph tags, which are being added by the wordpress This space issue was not there in the previous versions, because WP UI auto-removed the rendered empty para tags while initializing the widgets. But that was causing an issue with contact form 7, so i had to disable it.

            Solution : Just remove the empty spaces between shortcodes, in HTML mode . And make sure the individual shortcodes are in separate lines.

          • Jerryzarley

            That worked great, thanks Kavin. But, what about removing the previous/next buttons in the options? The last time I tried it, I got the 385 array error.

          • Kavin Gray

            Hi Jerry, great! Is it the same array_key_exists error? That will not happen, since i removed all lines relating to that error : source . Please try it and let me know.

          • Jerryzarley

            That work great, Kavin. Thanks again, and thank you for such an awesome plugin.

    • http://twitter.com/joiehadinata Joie Hadi Nata

      Any idea how to put an Icon beside each of the tab title?

      • Kavin Gray

        Right now it’s not easy enough, Cos’ the tab names are stripped of the extra characters and also used to generate the HTML ID attribute of the individual tab panels. I will add an option to use image :)

    • ann

      Hi, I installed version 0.5.6 and it worked great, except that the css classes appeared in places where I didn’t use the shortcode. I noticed it on a post when you click on “Replies” to see the comments. Viewing the post as a single page did not have this problem; it seems related to viewing comments. Sorry if that’s confusing; I don’t have the page set up because it was causing problems…but maybe you could check it out yourself? Great job otherwise! I would love to be able to use it without those issues.

      • Kavin Gray

        Hi Ann, can you explain a bit in detail at forums please? It would be great if you can add information about the theme and other plugins. Faster i can locate the bug, faster i can fix it. Thanks for the support! :)

    • Lauren C.

      Hi Kavin – great plugin, but none of the styles look right to me. Many of them show totally wrong colors, others just don’t look right. I can view them on this site and in the Settings just fine, but they don’t work on my actual site.

      http://findsanctuary.com/offerings/teacher-training/

      What do you think?

      • Kavin Gray

        Hi Lauren,the main stylesheet is not loading. Is the options “load all styles” (under Options page-> style -> load all styles) checked? Even if it is checked, Please try re saving the options once and let me know.

        • Lauren C.

          I checked it and everything works now. Thank you, this is a great plugin!

    • coitus

      First off, love the plug-in. Very well made and plays nicely with other plug-ins where others uhm…. don’t.

      How would I modify the plug-in so the previous/next buttons don’t appear in the tabs?

      Also, I tried using accordion style tabs and the theme I used it on created an issue where the content became scrollable within a smaller window on the page rather than expanding the page size in  height. I’m not sure if it’s my theme or your plug-in that causes that, maybe you could have a look and let me know where to look for a solution to the problem.

      It’s the bottom accordion tab on this page: http://www.golearncalifornia.com/pt/explore/

      You may notice the plug-in and the page are using different fonts. The theme I’m using has the ability to change fonts globally through it’s theme options (when they fix it, grrrr.). Is there a way I could easily modify the plug-in to use whatever font the theme has been set to, including their custom options?

      • Kavin Gray

        Thanks. :)

        1) Disable the buttons in Options page -> General tab.
        2) Check the accordion auto height in Options page -> Effects tab.

        That should do it.

        • coitus

          You’re awesome dude! Any idea of how to link it to my site’s default font?

          • Kavin Gray

            You’re welcome :)

            Use the custom CSS panel in advanced tab :) . Thanks, i will look into it.

    • http://www.facebook.com/jinmaning Eugene F. Maning

      Hi Sir,

      Great plugin! But I guess I’m in trouble. I developed my own template and I can’t seem to fix some issue. Maybe it’s in the CSS. Argg.. But anyway, can you please take a look at this > http://www.pacificspadavao.com/services/ . Did you notice the error? Other styles doesn’t give me the same results as above too. Please help. Thanks a lot! :-)

      • Kavin Gray

        Hi Eugene, nice page! About the error, i am not exactly sure what you are referring to. If its that dark gray tab background, it is because of stylez conflict with WordPress-post-tabs plugin (You can verify this with firebug, active element has the background – #5E5E5E). :)

        • http://www.facebook.com/jinmaning Eugene F. Maning

          Yes, thank you. I guess that is the error. Haha. I’m going crazy trying to fix it.

          Also, how can we include this in our custom templates? I mean like is possible?

        • http://www.facebook.com/jinmaning Eugene F. Maning

          Yes, thank you. I guess that is the error. Haha. I’m going crazy trying to fix it.

          Also, how can we include this in our custom templates? I mean like is possible?

    • http://twitter.com/arcticflea André Mansi

      Hi Kavin

      As per previous posters I have to say “top job” on the plugin – I’m simply in love with it, and cant get enough. Which leads me to my question (if only I were just here to say thank you!)

      I’d like to embed the tab functionality into custom templates which make use of custom fields and custom post types. 
      Is this possible? Above it mentions manual usage, but I can’t find details.

      Is there some documentation on doing this, or am I going to have to utitlise custom field embedding into the UI in post editing (which I’m doing at present, but want to hide shortcodes from editors).

      Again, thank you for this brilliant plugin.

      Flea

      • Kavin Gray

        Hi Flea, sounds like a great idea. Would you mind to drop me a mail, so we can discuss this in detail? Thanks. :)

    • Jörg

      Hello Kavin.
      Again a feature request for your great PlugIn:
      1. I want to use Spoiler wie more Info as Headline. It works with HTML-code inside, also an image, but it’s not so easy. Maybe you can simpöify it to use HTML-Code as headline.
      In fact I want to see something like a “teaser” and open the detailed Infos via Click.
      2. I’d like to place a second button to close the spoiler-content at the end of the opened spoiler. When the opened spoiler has much content it would be very nice to close it right there, wenn I finished reading the content.

      • Kavin Gray

        Hi Jörg,
        1. Actually you can use html code for the “name” argument.
        [wpspoiler name="Teaser"]....
        That’s all, only thing you need to take care is the quotes ( inside quotes need to be single if argument value is enclosed within double and vice versa ).
        2) Yes, in the next update.

    • senthilbalan manickam

      nice work dude….

    • Jerryzarley

      Hey Kavin. There is an update problem. Take a look at my website. http://jerryzarley.com

      Thanks

      • Kavin Gray

        Hai Jerry, you just need to resave the options :)

        • Jerryzarley

          I don’t know why that worked, but it did.

          Thanks, Kavin.

    • Joerg

      Hi Kavin.
      Wow, the new post/page-feature is awesome. I used your earlier version for something similar but done with an own function… if I only knew about your plans a few days earlier. ;)
      But I got a problem after updating… the option to disable the built-in styles is gone? Or am I blind?

      • Kavin Gray

        Hi Joerg, Thanks for the input. Yes the options to disable the built in styles were removed. This was done to ensure the compatibility with the jqui themes and custom themes introduced in 0.5.6.

        Please let me know any ideas about this plugin at the forums, Joerg. One of the users – Mr.Soren Dayton suggested me this idea, i tried and implemented it. It would be awesome if users can share their ideas or criticism on the Forums. If they do so, i could share my progress with them then and now, and as a whole – A better plugin. :)

    • http://reidwalley.com Reid Walley

      Can’t use the break tag inside the [wptabcontent] [/wptabcontent] shortcodes.

      • Kavin Gray

        Thanks for reporting, will be fixed ASAP. :)

    • http://www.facebook.com/shrekdul Arry Harmawan

      Can i make the height of one item in the accordion same as it’s content not from the most heigth it content have.?

    • http://www.facebook.com/profile.php?id=626285490 James Tran

      Kavin, 

      Upgraded my WP to lastest version 3.2.1 and TinyMCE was disabled and i was not able to “visually” create new posts, only via HTML. The buttons and editor box simply didn’t appear. I was only able to click on the tab to switch to HTML editor.

      Disabling the plugin allowed me to resume work normally.

      Please investigate this urgently

      • Kavin Gray

        Hai James, please try this, Go to options page and try re saving the options. If it still does not work, What wordpress version were you previously on?

        • Anonymous

          I believe i was on 3.2.0 earlier – resaving the options unfortunately didn’t help out in this regard.

          • Kavin Gray

            Hi James, sorry for the delay. What browser do you use? If you use firefox or be chrome, are there any errors reported in console? ( Right click -> Inspect Element -> Console )

    • http://twitter.com/SiteSubscribe SiteSubscribe.com

      I
      love this plugin!But I’m having problems with it working
      consistently.I have 2 WordPress pages using the tabs code. Each
      has several tabs (8-12), with lots of html and other shortcodes used as
      content for each tab.When updating the page sometimes all of the
      tabs and tab content disappear. I thought maybe I needed to be more
      careful of  the code layout, so I made sure to remove all extra blank
      lines between tab shortcodes. It seemed to work, then it didn’t.Then
      I tried breaking off the tabs after about 4 tabs, and that worked some
      times, but now it is not working.

      I tried disabling most of my other plugins with no affect.Here
      is a sample page:http://sitesubscribe.com/addons/I'll try to
      leave it intact for a day or so for you to look at it.You’ll
      notice that some of the tab content is displaying, and some of the tab
      shortcodes are printing out like “[*/wptabscontent]
      [*wptabstitle]WordPress Training & Consulting[*/wptabstitle]
      [*wptabscontent]” (* added so can display shortcodes here)Thanks
      for any help you can offer.~Jeff

    • http://twitter.com/SiteSubscribe SiteSubscribe.com

      I love this plugin! But I’m having problems with it working consistently.

      I have 2 WordPress pages using the tabs code. Each has several tabs (8-12), with lots of html and other shortcodes used as content for each tab.

      When updating the page sometimes all of the tabs and tab content disappear.

      I thought maybe I needed to be more careful of  the code layout, so I made sure to remove all extra blank lines between tab shortcodes. It seemed to work, then it didn’t.

      Then I tried breaking off the tabs after about 4 tabs, and that worked some times, but now it is not working.

      I tried disabling most of my other plugins with no affect.

      Here is a sample page:
      http://sitesubscribe.com/wp-ui-test/

      You’ll notice that some of the tab content is displaying, and some of the tab
      shortcodes are printing out like

      “[*/wptabscontent]
      [*wptabstitle]WordPress Training & Consulting[*/wptabstitle]
      [*wptabscontent]” (* added so can display shortcodes here)

      Here’s another page with tabs that seem to work most of the time, but not always:
      http://sitesubscribe.com/features/

      Thanks for any help you can offer.
      ~Jeff

      • Kavin Gray

        Hi Jeff!
        The shortcode for the tab name is [wptabtitle], whereas in the page wp-ui-test, it is [wptabstitle] ( Note the S in the middle).

        And another, The WordPress post editor. It can really mess up your content, particularly shortcodes. If you are using complex html, I suggest using HTML editor to create the page first, then copy the source to the wordpress editor -> HTML. Even Switching back and forth between editor tabs can invalidate your content while saving.

        • http://twitter.com/SiteSubscribe SiteSubscribe.com

          Thanks, fixing my mis-spelling on the shortcode did the trick.

          BTW I avoid using code within the visual editor.

          Thanks for the quick reply.
          ~Jeff

          • Kavin Gray

            You’re welcome Jeff, glad it worked. It is quite common for busy persons to make mistakes :)

            And Yep, +1 for the HTML editor :)

    • Dave

      I just wanna say “Thank you very much”. WP UI is so cool ^^

      • Kavin Gray

        Thanks & you’re welcome, Dave. :)

    • Pingback: WordPress Tabs Eklentisi » Türkiye için Wordpress

    • http://reidwalley.com Reid Walley

      Kavin, thanks for the quick response to my problem of styling (p, br, etc) getting stripped out. It all looks like it’s working now:) Thanks, again.

      • Kavin Gray

        You’re welcome. :)

    • Josep31416

      An error at the last upgrade: duplicate de shadows in tags

      • Josep31416

        I have found the problem in the following tag:

        .ui-tabs{/* -moz-box-shadow :0 3px 6px rgba( 0,0,0,0.3);-webkit-box-shadow :0 3px 6px rgba( 0,0,0,0.3);-o-box-shadow :0 3px 6px rgba( 0,0,0,0.3);box-shadow :0 3px 6px rgba( 0,0,0,0.3);*/}

        This tag is not in the previous version of wpui-all.css

        • Kavin Gray

          Hi Joseph, input the following into the custom css ( options page -> Advanced tab )

          .ui-tabs {
          -moz-box-shadow : none !important;
          -webkit-box-shadow : none !important;
          -o-box-shadow : none !important;
          box-shadow : none !important;
          }

          This was the move towards better shadows, as the previous shadows didn’t fit well with the dark themes. The above code will disable it altogether. Will be fixed in the next minor version. :)

          • Josep

            Thanks! Now it works fine. Regards.

    • Pingback: Плагин WP UI – Tabs, Accordions, Sliders для WordPress. | KVV

    • http://twitter.com/llogat llogat

      Hi there. Strange behavior: in the last upgrade, the check box “WP Makes use of cookies UI to remember the state of the selected tabs. Click here to disable the behavior” does not work correctly. I’ve unchecked the box, but it continues showing the same tab.

      • Kavin Gray

        Hi there, this issue has been fixed and was related to new option – Collapsible tabs. If you have this issue, then you might need to re-install again. Sorry for the troubles.

        • http://twitter.com/llogat llogat

          Do not worry. I’ve reinstalled it and now it works fine. Thanks!

          • http://twitter.com/llogat llogat

            Hi there… Again a strange behavior at the latest update. When you display the page, open the second tab directament, not the first. I reinstall the plugin and I cleaned the cookies, but no results. How I can fix this? Thank you.

          • Kavin Gray

            Sorry about the issues Llogat. This has been fixed now, please try again. I forgot to sync the trunk version on the last update, so release version – 0.7.3 was fixed, while trunk (development) version inherited it.

            Thanks for understanding.

          • http://twitter.com/llogat llogat

            Thank you! Now it works perfectly. Good job!

          • Kavin Gray

            Thanks m8. Have a great day. :)

    • Omri Levin

      Hi Kavin, great plugin !
      when used with Hebrew tabs seem to break.
      any ideas ?

      • Kavin Gray

        Hi Omri, Thanks. :)

        The ID attribute of the panels are generated from the tab names, that might be the problem here. I am looking on ways to improve multiple language support. Please drop me a mail or post in the forums, i’ll be glad to help. :)

    • Greggy284

      Kavin,

      After your last upgrade this file is trying to load, but can’t be found

      wp-content/plugins/wp-ui/css/images/pattern-gray.png

      • Kavin Gray

        Thanks for reporting Greg. :) Will be fixed in upcoming update.

        • Greggy284

          Another question.  Does this plugin need to load when my home page loads?  I don’t use your plug in until a pricing page.  Is there a way to alter this.  The plugin and it’s parts are slower to load than most everything else on my site.  Thanks for your time

          • Kavin Gray

            Not by default, it would require some editing. Also I don’t see any reason for slow loading you are experiencing, it might be due to conflicts or similar plugins. And if i may know, what parts does load slowly?

          • Greggy284

            jQuery Easing v1.3wp-ui.js

          • Kavin Gray

            I will add an option to disable the easing script and compress the wp-ui.js further in the upcoming update. :)

    • http://www.ravenousravendesign.com Heather Wood

      Hi Kavin!

      I installed W3C Total cache the other day and it totally disabled my WP UI Plugin. I am not sure why. I tried deactivating and reactivating WP UI to see if it helped and it didn’t. I deactivated W3C total cache and WP UI worked just fine. 

      off subject a bit: In the past, I have gotten WP UI updates and my tabs appeared funny, but after a deactivate and reactivate of the WP UI plugin, it worked just fine.

      I thought W3C was suppose to work without interrupting other plugins. This issue is kinda over my head to solve myself. 

      • Kavin Gray

        Hi Heather, I am working on this issue currently. The problem particularly seems to be related to the minifying option in W3TC. I hope to fix this ASAP and roll it on the next update. :)

        Sorry about the troubles.

        • http://www.ravenousravendesign.com Heather Wood

          No Troubles at all. I wish I could help. I’m very fortunate you made this plugin. I will just do without W3 until the problem is fixed. Thanks for the Quick Response!

          • Kavin Gray

            Thanks Heather. :)

            It looks like error when using with W3TC is due to that jQuery becomes unavailable, most of the times. Apparently this problem is not inherent to WP UI, it could occur on any of the jQuery powered plugin.

            W3TC is a great plugin, unfortunately one single feature – minify breaks the compatibility with WP UI. As author Fredrick Townes recommends, you can uncheck all the additional optimization settings under Minification -> JS minification on W3TC options page.

            But unfortunately, it worked out only with disabling JS minification altogether.

            Reference :
            http://wordpress.org/support/topic/plugin-w3-total-cache-jquery-conflicts-when-added-to-minify#post-1835762

      • Kavin Gray

        Hi Heather, I’ve made some changes to improve compatibility with W3TC. So, can you check on this and let me know please?  Thanks! :)

    • http://www.totaltab.com Nick Reuter

      Is there a way to remove the “Next” and “Prev” buttons?

      • Kavin Gray

        You can disable those on “Options page -> General Tab”.

    • http://www.facebook.com/johnlouie04 John Louie Biñas

      Hi Kavin i’d like to change the hover color of the style “Excite Bike” coz its not fitted to my website themes… http://www.ssit.ph/. I used the collapsible style to fit into my custom menu that i created.. but the problem now is the color…can you teach how to edit the css of this style…

      • Kavin Gray

        Hi John, the jQuery UI themes ( here Excite Bike) are loaded from the Google CDN .There are two options – First – Select the excite bike as default and input some custom css into Options page -> Advanced -> Custom CSS. For.eg.

        .ui-state-hover {
        background : #E04C88 !important; // example color used here is Pink any html/hex/rgba color.
        color : #FFF !important; // With white text.
        }

        Second one – Go to theme gallery and follow this guide.

        If you need more help, please feel free to post in the forums. :)

        • http://www.facebook.com/johnlouie04 John Louie Biñas

          tnx for the info.. 

          so if i change the active color of the excite bike.. i’ll just type
          .ui-state-active {background : etc…….} 

          • Kavin Gray

            Yep :)

          • http://www.facebook.com/johnlouie04 John Louie Biñas

            ..how about to change the opacity of the color background..
            pardon me for too many question :)

          • Kavin Gray

            No Probs.. You can either change the opacity of element with

            .ui-state-active {
            opacity : 0.8; /* From 0 to 1 , changes opacity of entire element. */
            background : rgba( 255, 255, 255, 0.5 ); /* 50% transparent white BG. */
            }

          • http://www.facebook.com/johnlouie04 John Louie Biñas

            one more thing.. so i change the hover and the active background color and i use the opacity.. but the problem is the style of “excite bike” cannot be seen..how to show up the style “the inclined striped”?… 

    • http://www.facebook.com/johnlouie04 John Louie Biñas

      Sir.. i have a problem about accordion the other type of accordion are not functioning..

      [wptabs type="accordion"]
      [wptabtitle]Home[/wptabtitle]
      [wptabcontent]this is a home page[/wptabcontent]
      [/wptabs]

      not functioning to my site…

      • Kavin Gray

        You need at least two accordion panels ( two wptabtitle/wptabcontent) to make it work. :)

        • http://www.facebook.com/johnlouie04 John Louie Biñas

          still not working.. i try the code of the example of this http://kav.in/projects/blog/wp-ui-tabs-accordion-sliders-demo/ vertical accordion..
          [wptabs type="accordion"]
          [wptabtitle]Writing[/wptabtitle]
          [wptabcontent] Contents of the writing tab [/wptabcontent]
          [wptabtitle]Quotes[/wptabtitle]
          [wptabcontent] Contents of the Quotes tab [/wptabcontent]
          [wptabtitle]Tables[/wptabtitle]
          [wptabcontent] Contents of the Tables tab [/wptabcontent]
          [wptabtitle]Align[/wptabtitle]
          [wptabcontent] Contents of the Align tab [/wptabcontent]
          [/wptabs]no changes in my site..

          • Kavin Gray

            Please post in the forums with test page link and the problem, i will get back to you ASAP. :)

          • http://www.facebook.com/johnlouie04 John Louie Biñas

            i already post to the forum about the accordion.. hope to fix it..

    • http://twitter.com/llogat llogat

      Thank you! Now it works perfectly. Good job!

    • Sleet

      Where can I find info on using this plugin on templates?  Thanks.

      • Kavin Gray

        Take a look Here.

        Here is the sample HTML structure for use in templates Pastebin. Hope that helps.

    • Pingback: Wp UI | ProfTm | Ve Biraz Teknoloji...

    • Sleet

      When I click a tab my page jumps to the top.  Wondering if there’s a setting that prevents that.

      Thanks, great plugin.

      • Kavin Gray

        Link please :)

        • Sleet

          http://wyofootball.com/history/past-teams/spartans-2009/

          If you scroll down to see all the roster, then click another tab, the page jumps up to the top.  It doesn’t seem to do that here:

          http://wyofootball.com/history/past-teams/spartans-2001/

          (Also, is there a way to establish which tab opens first?)

          Great job with this plugin and impressive support.

          • Kavin Gray

            That’s strange. Is there anything other specific on the Spartans 2k9 page? I am looking at the source right now, and cant quite figure out.

            Try unchecking the “linking and history” in Options page -> Advanced Tab and let me know please. :)

          • Sleet

            Unchecking linking and history didn’t seem to have an impact.

            I noticed that I had commenting enabled for the 2001 page and commenting disabled for the 2009 page (the one that jumped).  When I enabled commenting on 2009, the jumping stopped. 

          • Sleet

            Is there another way around this “jumping” issue besides enabling commenting (assuming that’s the cause)?

          • Kavin Gray

            I checked it with the default twenty eleven theme at my devel site, but unfortunately i was not able to reproduce this error. Can you send me the list of plugins you use, over mail? I suspect that this might be something related to comments or something, it needs to be fixed. :)

            Thanks for the patience.

    • Rom

      Is it normal that the biggest tab is the standard size for all other tabs?

      Like this, visible on this (temporary) page :

      http://ocl.tagadart.com/

      Thanks for any input! Cheers!

      • Kavin Gray

        Hi, Do you mean the accordion height? You can toggle that on the Options page -> Effects Tabs -> Accordion AutoHeight. If this is not what you were asking for, please let me know. :)

        • Rom

          Yep, thanks!

        • Martin

          Many thanks for this hint!

    • Ecoratz

      Got stuck – I am trying to add tab names to my menu. I am using the code below which creates the menu fine, only it has 1,2,3 e.t.c in the tabs? [wptabposts cat="test" style="wpui-tabs-vertical"]. I see  the [wptabtitle] / [tabname]  but that seems to apply to
      [wptabs][/wptabs] menu. Alternatively how do I draw the ‘cat=”test”‘ into the latter? Thanks.

      • Kavin Gray

        Hi, Do the tabs open on click? Also you got the vertical mode wrong – it is mode=”vertical”.

        • Ecoratz

          Hello, Yes the tabs open on click. I changed to mode=”vertical”. Thanks

        • Ecoratz

          Hello again, Sorry I still can not get the post titles to appear in the tabs of the menu. I am using this code which in your demo has titles in the tabs?
          [wptabposts style="jacob" cat="5" number="3" mode="vertical"]

          • Ecoratz

            The demo I am refering to is here below examples:
            http://kav.in/projects/blog/wp-ui-display-posts-wordpress/#more-822

            I can get the titles to appear in tabs by using your code structure below, but I don’t want to have to manuly put in the titles, rather have them dynamicly appear when referencing post categories as in my post above. What am I getting wrong?

            [wptabs]
            [wptabtitle] Tab 1[/wptabtitle]
            [wptabcontent] This is the content of Tab1.[/wptabcontent]
            [wptabtitle] Tab 2 [/wptabtitle]
            [wptabcontent] This is the content of Tab2[/wptabcontent]
            [/wptabs]
            Thanks

          • Ecoratz

            I found the answer in your demo page, I am crap at reading instructions …
            “tab_names
            Names of the tabs(labels) in exact order, separated by commas.
            [wptabposts tab_names="Math,Science,Definitions,Classes" cat="136" number="4"]“I was hoping it would be done dynamicaly for ease of use.Thanks

          • Kavin Gray

            Hi, Yes you can name the tabs with comma separated values. The default option now is getting the whole title and other one is to number the tabs. Unfortunately there is no straight forward way to do the naming dynamically. I can implement something like that limits upto given number of words in the title, but that might lead to unexpected results.

          • Ecoratz

            O.K. thanks. Now the element tags in the cat posts are being ignored/overiden by the plugin – does not show in the source or have an efect? Thanks

      • Ecoratz

        Hello, Yes the tabs open on click. I changed to mode=”vertical”. Thanks

    • Rom

      Is there a way to make an external link directly to an element in the accordion?

      Im looking around without success… as this is a tweaked jQuery version.

    • http://rainerflame.com rainer

      Im interested installing this plugin but afraid don’t get any help since I’m not hardcore coder. But seeing your latest comment really helpful, thx for this awesome plugin

      • Kavin Gray

        You’re welcome. Please feel free to ask questions at Forums :)

    • http://www.facebook.com/profile.php?id=100002915522199 Zainal Kl
    • http://www.facebook.com/profile.php?id=100002915522199 Zainal Kl

    • Pingback: Wp UI | PislikAdam

    • Henrik

      Hi Kavin. I get this annoying message no matter what I try. I am a beginner, can you help me?

      Warning: file_get_contents() [function.file-get-contents]: URL file-access is disabled in the server configuration in /data/25/2/146/107/2635433/user/2891760/htdocs/wordpress1/wp-content/plugins/wp-ui/admin/wpUI-options.php on line 631Warning: file_get_contents(http://034b80f.netsolhost.com/wordpress1/wp-content/plugins/wp-ui/admin/doc/wpui-buttons.php) [function.file-get-contents]: failed to open stream: no suitable wrapper could be found in /data/25/2/146/107/2635433/user/2891760/htdocs/wordpress1/wp-content/plugins/wp-ui/admin/wpUI-options.php on line 631

      • Kavin Gray

        Looks like the web host has blocked some of file related functions on your server. Please ask them if they can enable the file url wrappers( adding allow_url_fopen to php.ini). It is required for some of functions – including Ajax options. Please let me know.

    • Mcestone

      Hello, is it possible to add meta content from custom write panels within the write/edit page to the tabs??

      ID, ‘key’, true); ?>

      • Mcestone

        Nevermind! Just found an example using HTML rather than shortcode

    • Pingback: Wordpress UI eklentisi | ProfTm | Ve Biraz Teknoloji...

    • http://thefieldset.com DavidH

      Kavin, thanks for all the care you’ve obviously put into this. The Accordion functionality is working great for me but I wanted to give you a heads-up that above under “Sample shortcode structures,” in the Accordion tab the type declaration (type=”accordion”) is mistakenly put in the wptabtitle shortcode instead of the wptabs shortcode.

      • Kavin Gray

        Thanks David, this has been corrected. :)

    • Pingback: Välilehdet WP-sivuille – loistava plugin WP UI nyt käytössäni | www.tiirikainen.fi

    • Pingback: Tabs and more on WordPress – with a new WP UI plugin | www.tiirikainen.fi

    • Anonymous

      Just want to say thanks.

      Thanks!

    • Tim

      hi – is it possible to lose the ‘pre’ and ‘next buttons of the bottom of a wptabs??

    • Mindy

      Is there a way to have more than 5 tabs using this plugin? I tried adding the 6th one and it doesnt work.

      When I add the 6th tab and content, it will show all the content on the page……

      Please help…..

      Thanks

    • board director

      Hello Kavin,

      you haven’t replied yet to my e-mail? Could you please do so?

    • Madhuri

      how can i add shortcode in .php pages becuase i want to use php page some content display into accordions 1st  tab and another content into second tab

      • Kavin Gray

        Hi, You can use HTML instead of shortcodes, reference is in the following paste – http://pastebin.com/Axxs0TzK .

        Hope that helps.

    • Madhuri

      please replay 

    • mostro

      if you have it already installed DO NOT UPDATE… I did it and it broke… uninstalling… a shame, nice plugin…

      • Kavin Gray

        Hi Mostro, what was the issue? Did you find it?

    • mostro

      If you have a cache plugin, deactivate first, then uninstall tabs plugin, then install new one, reactivate cache. Do it in the regular way and it will broke with some plugins. Awesome plugin if you take care of this. M.

    • http://www.facebook.com/dhlusicka Darko Hd Hlusicka

      Thanks, great plugin!

      • Kavin Gray

        Thanks. :)

    • Brutus_mc

      Hi. Really like the plugin. However, I’m using a theme from nattywp, and for some reason there is a fairly big gap (about 8-10 pixels) between the tabs themselves and the content box. In other words, the bottom of the tab is not flush with the top of the content box. This problem goes away when I switch over to the twenty-ten theme. Do know if there is something I can do manually to fix this. The nattywp theme I’m trying to use is CAP.

      Thank you.

      • Kavin Gray

        Hi there, The issue you mentioned above happens with some themes, due to the fact that tabs are really HTML list-items so general styles defined in the themes might clash with the tab’s appearance. This can be corrected with appropriate CSS in the plugin options page. Please post in forums or contact me with a link.

    • Elise

      hey, just updated and now I can’t get the style to change. I’m trying to do [wptabs style="wpui-quark"] but it looks like this: http://urbanifisheries.com/expert/

      Is there some thing I need to change in the shortcodes since the update? thanks!!

      • Kavin Gray

        Hi, that might be because you haven’t selected the styles to load, apart from the default one. To do that please go to Options page -> Styles tab -> Check the load multiple styles, and Click button "select the styles" you want to load with the dialog box” . :)

    • Rinaldo

      Warning: in_array() [function.in-array]: Wrong datatype for second argument in /home/irinaafr/public_html/wp-content/plugins/wp-ui/wp-ui.php on line 294
      I am getting above error message in a multisite subdomain installation, but the plugin apears to work, except the custom theme. I downloaded and uploaded/installed the custom theme and I certainly used the correct shortcode.

      • Kavin Gray

        This glitch can be fixed by resetting the options.

        If for some reason you dont want to reset, you can copy the bookmarklet from this paste, Go to the WP UI options page, Paste the snippet in the Browser Address bar, press enter.

        Now the error should disappear. :)

    • Hector Asencio

      Many thanks for that awesome plugin, it works perfectly for me!

      • Kavin Gray

        Thanks, Hector. :)

      • Kavin Gray

        Thanks, Hector. :)

    • http://www.facebook.com/denis.forigo Denis Forigo

      Hi, Im getting this error:Uncaught TypeError: Object # has no method ‘wpuiPager’jQuery.fn.tabsThemeSwitcherwp-ui.js:57c.extend.readyjquery-1.4.2.min.js:26Ljquery-1.4.2.min.js:33

      • Kavin Gray

        Hi Denis, looks like there is a duplicate version of jQuery being loaded. Please check the page source. Post at the forums if you need more help.

    • chris

      Hi. I am trying to add ALT tags to my Tabs. Is there a way I can do this? 

      [wptabs]  [wptabtitle]Popular[/wptabtitle]    [wptabcontent]       [popularposts]     [/wptabcontent]  [wptabtitle]Recent[/wptabtitle]    [wptabcontent] [recentposts] [/wptabcontent]  [wptabtitle]Comments[/wptabtitle]    [wptabcontent] [recent_comments] [/wptabcontent][/wptabs]

      • Kavin Gray

        Hi Chris, try adding an empty img tag with alt, within wptabtitle shortcode.

    • Carla

      Hello!
      Is it possible to put an accordion into a tab shortcode?
      Thanks!!

      • Kavin Gray

        It is possible to implement accordions within a tab, but the inner structure need to be in HTML. Please use the following paste for reference.

        http://pastebin.com/Axxs0TzK

    • http://twitter.com/llogat llogat

      Hello, I actualitzado to the latest version, but the tabs disappear and can only display text in a column.

      • Kavin Gray

        Please try saving the options.

    • Crinrict

      Just wanted to say thank you.  I’m a very happy camper right now.

      This plug-in solved 4 of the things I wasn’t quite happy with and tried out several Plugin. With this, I finally found exactly what I was looking for.

      The longer I use it, the more ways I find to use it.

    • Curtis

      Somehow the accordion tabs stopped working on a site I built (golearnclifornia.com). Seemed to be a simple fix though. I just updated the plug-in, resaved the settings and cleared the cache. Viola, back and operational.

      Thanks for the great plug-in, please don’t break it again.

      • Kavin Gray

        The very first instruction/request in upgrade notice was to save the options. This was very much necessary to fix an age old bug with the check boxes. Glad that you fixed it, Have a great day. :)

    • Kbadarinadh

      plzz help me.. im using this plugin but i need a solution for my request.

      inside wp-spoiler i have inserted a table its working fine but it consuming more space i need it to be fitted in the spoiler with out any space around the table .. http://www.sharewithus.in

      • Kavin Gray

        Hi Badri, The link you provided seems to be under maintenance. Please proceed to the forums or the contact page with some more detail, I’ll be glad to assist you. :)

    • Dannyb

      Hey, I was using your plugin with no problems, but I recently switch themes and now it doesn’t seem to work.  I’m still a bit of a novice, but usually pretty good about figuring these things out.  Any thoughts?  Here is the site.  
      http://www.hvaced.org/web-links/

      • Kavin Gray

        Hi Danny, By checking your page source I found multiple jQuery & jQuery UI copies loaded, which could be the cause of issue. I’ll be glad to assist you in the forums.

    • Jonhard

      Hi Kavin, this is a nice plugin. I definitely can use this in my work.

      But have ever considering making it possible to have verical tabs. I have been searching for such a plugin, but without any luck.

      Regards
      jonhard
      Faroe Islands

      • Kavin Gray

        Hi Jonhard,

        Vertical tabs are available already in the current version – Usage example -


        [wptabs mode="vertical"].... Rest as it is

    • 0161-Jon

      Hello,
      great plug in! Is it possible to have the accordions so more than one, or even all, can be open at once? I have it currently set so all are closed at page launch, can’t see an option for allowing all to be open though? Sorry if this has been covered before I could not find it.

      Cheers

      Jon

      • Kavin Gray

        Hi Jon, Default accordion behaviour is that only one panel to be open at a time. But,  you can achieve something similar with wpspoiler shortcode.
        [wpspoiler name="Spoiler's title "]content[/wpspoiler]
        .. Multiple codes as necessary ..

    • Ryan Hipp

      Is there a way to extend the width of the tab box/frame  to go across the page?

      Ryan

    • Tonylancaster

      Hi – I installed the plugin . I  am awed by the interface, astonished by the power, and amazed at the choice. However I am appalled at the documentation, not only does it send you here and redirect you there to find it – but there is none when you get there. I just want to know how to use this lovely thing! Where are the properly, logically presented instructions?

    • Brandon

      Great plugin! Two quick questions. 1: is there a way to have the accordion open up instead of just down? 2: Is there a way for the accordion to open over the content below rather then pushing it down?

      Thanks!

      • Kavin Gray

        The accordion’s effect depend on where it is located. Near the bottom, it looks(!) like sliding from bottom, else the default. Accordions basically uses the sliding effect from jQuery – As you might know items are stacked from Top to bottom.

        Apologies for the late reply, Disqus notifications are lagging.

    • Palo

      super plugin,

      Palo

      • http://kav.in kavin

        Thank you!

    • Frdivinagracia

      Can this be added on a sidebar widget? Or page and posts only?

      • Kavin Gray

         You can use it in posts, templates( with html ) and sidebars(with given widgets).

    • Lazy-days

      Hi Great Plugin

      But for the non coders, how do you style the text placed in the widget? (paragraphs, bold, indent – rich text etc.)

      Thanks Ray

    • Pingback: Wp UI « Pislikadam

    • Pingback: wp-coder.net » Roundup Guide to Advanced WordPress Menu Plugins

    • http://www.facebook.com/TsiartasSS Marios Tsiartas

      Hello,

      I find your plugin great!

      What i need is within tabs, insert an accordion or spoiler. I found out that i cannot use an accordion in tabs as they have the same closing statement so that would be impossible.

      So i did put a spoiler.

      The problem is that when i insert an image in the spoiler, the spoiler ends and the image is hanging outside the spoiler box.

      How can i solve this?

      • Kavin Gray

        Hello Marios, Apologies for the late reply, The comment notification systems seems to be lacking. I’ve just replied to your thread in Forums, please feel free to ask further.

    • Pingback: Wp UI | WP Yazı Eklentileri | Wordpress Merkezi

    • Pingback: Wp UI | TiklaYukle

    • Pingback: Roundup Guide to Advanced WordPress Menu Plugins | Top website Designing Company in India

    • fomskyjobo

      where do i place the is_single() so the tab only appears on the single page
       

      • kavin

         @fomskyjobo Options page -> Advanced -> Conditional loading. :)

    • making

      hey tehre! you’ve made an great plugin! thank’s!! But
      i’f got the problem, that the buttons (next and back) in each tab are at the end of the longest Text in my vertical tablist… 
      i need 28 tabs, and the longest text is as long as that i need to scroll 2 seconds to reach the buttons… but other tabs are’nt that long… 
      is it possible to fix these buttons exactely at the end of the last sentence in each tab?
      How can i solve this?
      thanks for your help!

      • kavin

        @making Vertical tabs donot come with auto Height, as it is set on page load. I’ll see if i can include this feature in the next update. :)

    • Alvise Nicoletti

      When I create tabs using your example, and load the page, always the LAST tab is opened.

      But in your example the FIRST tab opens. Why ???

    • Alvise Nicoletti

      Hi, how do I set the tab I want to be opened on page-load ???

    • Jelle

      Hi,

      I fugured it out myself, it worked, but not correctly.

      My sidebar went down when I inserted the code. My code:

      `   

             

          
         
          Tab 1
         
         
                All the contents of 1 tab goes here….
         
       
           
            Tab 2
           
                  Contents of the 2 tab
           

            Tab 3
           
                  Contents of the 3 tab
           

            Tab 3
           
                  Contents of the 3 tab
           

      Tab 3
           
                  Contents of the 3 tab
           

      Tab 3
           
                  Contents of the 3 tab
           

      Tab 3
           
                  Contents of the 3 tab
           

      Tab 3
           
                  Contents of the 3 tab
           

      Tab 3
           
                  Contents of the 3 tab
           

      Tab 3
           
                  Contents of the 3 tab
           

       

             
             
         
      `

      A question: I want to set an height. I inserted 15 tabs and they’re not the full height of the accordion height. There’s a lot of empty space. Another question: can I remove the space on the top and on the bottom? There are little spaced between the first tab and the top. On the bottom there’s a black line, and after that there is an empty tab space again.

      Thanks!

      ps. I posted this message on the wordpress forum as well!

    • Ivan Kenneth Wang

      Is there a demo on how to do nested tabs? Thank you.

    • salman afzal

      Hi, I want all tab not to visible only visible when we click on it or mouseover on it after that again they should hide.

    • EkoArmunanto

      I’m using the latest WordPress (3.3.2), this plugin is NOT working at ALL, all of them (TAB, DIALOG, ACCORDION, etc). Do I need to install jquery library before I can use this? I followed all the instruction exactly, nothing happened except the plain text. The plugin menu within TinyMCE visual-mode button bar (not HTML-mode) is not even showed up

    • Maronoff

      Any idea when your forums will be back up? I am not able to have the plugin work at all. I was hoping to post the site details to see if anyone can spot a css conflict or something.

      I have a test page at http://www.intlwindow.com/industry-professionals-test/
      password is testpage. I have a test set of tabs and accordians at the top of the page. If any on help me figure why it does not work at all I would appreciate it.

    • Paul Ramer

      Kavin,

      The forums and documentation are inaccessible. Any time frame when they might be back up?

      pauldotramer @ gmaildotcom

    • http://kartikhariharan.com/ Kartik

      Hi Kavin,

      Firstly, Thanks for this great plugin!

      Just have one question- How do I get all the accordions in my page to load in expanded state?

    • Guest

      Great but your links are broken!!

    • SirPajMcGyver

      hi i cant get this plugin to work. for the documentation all  503.

    • Michael

      How do i remove the buttons that say next and prev?

    • http://menonsafari.co.za/ Webmaster

      Hi, There sems to be no responses to support requests or activity from the author for the past two months. The support and documentation site is down with ”
      Service Unavailable
      Server currently undergoing maintenance. Webmaster: please contact support.”. Is this plugin dead ?

    • Craig

      All of my accordian tab content areas are inheriting the vertical length of the content in the top tab. See: http://dev.quattrostudios.com/shawpet/veterinarians/

      Shouldn’t the content areas all size to their own content?

      • Craig

         Nevermind…found “accordion auto height” setting.

    • http://www.balivillascomplex.com/ Balivillascomplex

      hemmmmm
      Service Unavailable
      Server currently undergoing maintenance. Webmaster: please contact support.

    • Jrp

      Hi, the documentation site is still down… hopefully this isn’t turning into an orphan plugin!

      Since I can’t get to the docs, wondering if anyone knows for the spoiler shortcode if there’s a modifier that will make the “Click to open” text visible without making the user rollover the title.  ”Less sophisticated” users just look at the page as a list of titles and don’t think to roll over them to see if there’s more content…

    • jprusins

      The support site is still down… I hope this plugin hasn’t been orphaned!  Since I can’t get to the documentation, does anyone know if there’s a parameter that can be set with the spoiler to have the “Click to open” text always visible, instead of requiring a rollover to reveal it?  Thanks!

    • http://twitter.com/paulietheboss Paul Devine

      Yes I was hoping to get a hold of Kavin to ask a question, but the support is dead and he’s not posting on that twitter account anymore :(   I just want to know how to make a text link in my first tab link to the last tab using jquery. I can link it to the last tab’s anchor name, and it works the first time, but it appends the anchor onto the url. That means if the user goes to the first tab and clicks the link again it no longer works :/

      Surely there must be a way to have a text link that activates the same jquery as clicking the tab itself, tricking the page into thinking the tab was clicked? :/

    • Justabloke7676

      site links are down.  are you still supporting this plugin? Would love to read the docs for it.

    • JYC

      How can I put the tab titles (buttons) below the tab content? Thanks!

    • Thomas

      Hi all,

      I want to change the showtext and hideText, but its not working .. here is my code:

      [wpspoiler name = "Spoilers" showtext = "click to open" hideText = "test"]

      I try to change the source code in the text file 4. php but its also its not working …how can I do to change the text?
       

    • Chill986

      I have a couple of questions…
      #1 dialog is not working on auto_open=”false”
      #2 I’d like to change the height of both the tabs and the spoilers – and reduce the margin/padding around the content of both.  I haven’t been able to find the CSS statements that effects this.

      Otherwise, LOVE this plugin.  Thanks for any help you can give me!

      • Kavin Gray

         Margin padding can be applied to .ui-tabs-panel .wp-tab-content css class to desire what you want.

        About the WP Dialog, May need a test page.Is the button for dialog appearing?

        • Chill986

          Hey Kavin, I don’t see my reply here, did you get it?

    • Chill986

      Hey Kavin, I have updated the plugin to the 0.8.4  that you released over night, however, I the wp-dialog is still not working.  Help?  I would really prefer to use your widget for my pop-up windows, but I need to get something going today.  Meeting with client tomorrow.

    • Whitbyseaanglers

      Hi Guys, this plugin conflicts with my theme. I am wondering if there is a fix. Here is what my theme author says

      “Yes, it seems that these plugins (that require jQuery) conflict with the
      theme, this is usually due to a plugin adding the jquery include-link
      to the header and while doing that, interfering with the jquery code the
      theme has of its own.

      Can you please try to contact the author of the plugins and ask him/her whether there is a solution for this?
      ”

    • http://www.facebook.com/profile.php?id=1024795144 Cindy Hoffman Hill

      I am wondering if I have the same problem as Whitbyseaanglers…. Really need wpdialog working today :(

    • Sznajder Simon

      Hi there
      Can i add images to the accordion title or tabs just next to the text title…???
      Thanks

    • FrodeHok

      WP UI Widget; 
      Version 0.8.5 
      Hi Kavin. When installing the  WP UI, I also got a widget possibility, but I can´t find any documentation or support for this. How do you drop any widgets (aka; categories, archive etc.) into the 
      WP UI Widget and get them “tabbed”?

      • Kavin Gray

        Drag and drop’s not supported, still working on that. For now can display categories/tags using WP UI Posts widget, or manual content with WP UI widget.

        • FrodeHok

          Ok, you still got a week to finish before I open the brand new Norwegian Literature Site http://digglitt.no/ , I´cheering for you to make it ;-) Keep up the good work!

          2012/9/7 Disqus

    • Dan

      Hi .. i am using the geo places theme .. and i can´t make it works !!

    • Dogwasher

      Hi …I am using the geoplaces theme and i can´t make this plugin works !! help !!

    • Jmklass

      I have this plugin and want to upgrade to WordPress 3.4.2.  Are there any know conflicts?

    • Susan

      I am having an issue with tabs being “stuck” on one tab.  You can click on the other tabs but it doesn’t change the content.

    • Jadefuchs

      hello, i need some help!

      is it possible to have more than 9 panels in the widget?
      or the widgets can be strung together without spacing?

      how do I change the spacing between the arrow and title?

      thanks
      jadafoxx

    • kyuu

      Hello there,

      first of all, thanks for this plugin, it ROCKS!!!!

      But I have a question:

      is it possible to define an accordion, that is opened on pageload ??

      as I can see, it always opens the first one, and if another is opened, the previous opened is closed. how can I define, which one is opened at pageload ?

    • Offbeat

      Hiya,

      I’m having problems using a background image for the header of accordions/collapsibles.

      I tried editing the style sheet for the plugin I’m currently using, and do the following:

      background-image:url(‘imagename.gif’);

      However nothing shows up.  When I try editing colors and anything like that I have no problem.  I’m just unable to use a background image.  Any ideas?

    • http://profile.yahoo.com/NW3QKUYEQ774QANVF3CCYC6Q6M spirit

      How can I make this responsive. I am using vertical tabs and this is not responsive. But on the demo site I see that it’s responsive. Any suggestions?

    • miagig

      I got the warning below during activate your plugin, wordpres 3.4.2

      Warning:
      require_once(xxx/wp-content/plugins/wp-ui/admin/wpUI-options.php):
      failed to open stream: No such file or directory in xxx/wp-content/plugins/wp-ui/wp-ui.php on line 150

    • http://mintik.com/ mintik

      Çok yararlı  bir eklenti. Ama biraz geç  buldum. Teşekkürler.

    • Dave

      Can anyone provide some links to sites that use tab boxes created with the WP UI plugin?  I’m really interested in seeing live examples!  Thanks!

    • Felix

      This looks really cool. Is there a way to force the content to be within a given height and add a scrollbar? 

    • Chaya

      How do i make it that i’m able to use additional tabs and other code function in the [wptabcontent] tabs?

    • Gabriel

      Hi, i love the Plug-in, now could you please help me with how to put images on my tabs?

    • Ken

      There seems to be a problem with the admin tabs under WP 3.5. Are you still supporting this plugin? The contact form on your site is broken.

    • http://www.facebook.com/profile.php?id=1024795144 Cindy Hoffman Hill

      I know I saw this problem somewhere, but can’t seem to find it. I am trying to nest spoilers inside tabs and it may be a conflict with the theme, but sometimes the spoilers start as open (showing “click to show”), and sometimes they start as closed as they should. http://74.220.207.119/~trulycus/countertops-2/ (look under silestone tab)

      If the tab the spoilers are in is the first to open, they behave properly. If not, they don’t.

      Thanks for your assistance.

    • twicealive

      There is a conflict between WP UI and JS Script optimizers

      - JS & CSS Script Optimizer

      - Minify

      - Better Minify

    • Michael

      The plugin is really cool but unfortunate it’s interfering with the other elements of the site and renders them unusable (example: ajax testimonials on my second site or nivo slider on my first site). I struggled a lot to try to make it work but it’s unfortunately impossible, since you have to choose between this plugin and other vital plugins or functionalities that you have installed in order to make something work.

    • tvr1230

      Hi,

      If anyone could help it would be great. I just tried adding the shortcodes to a WordPress site, and when published the page shows the tab title in bold and the content in text. It is not showing a tabbed view as it should be.

      I need help ASAP

      Thanks

    • Liliria ocha

      how to add table on accordion?

    • Dom

      Thank you!

    • Maran

      wp-ui plugin is not working in my website..my tab contents displays one by on their is no functionality happens…any 1 help me..i stuck with this problem..

    • June

      hi ,first of all .. thanks for the nice plugin… but how to remove the prev and next wording in the tab ? thanks

    • hunnsdon

      I notice from WordPress.org that this plug-in hasn’t been updated for some time, any plans to update?

      Thanks

      Ray

      • Kavin Gray

        Yes. This week.

    • billy

      I have really been struggling with this plugin. It’s so finicky and un-refined.
      It complains if I have certain punctuation in the title part of an accordion. I had to change my content to try and fit in, not ideal.

    • ucicelos

      Hi I am trying to insert wordpress pages into the tab, but everytime I do try that, the page with the tabs wont load. Any idea about what I might be doing wrong??

      the code looks like:

      [wptabs style="ui-lightness" mode="vertical" background="false"] [wptabtitle post="88"]ma[/wptabtitle] [wptabtitle post="730"]sm[/wptabtitle] [/wptabs]