You are Viewing : HomeCSS3WP UI – WordPress Tabs, Accordions, spoilers plugin

WP UI – WordPress Tabs, Accordions, spoilers plugin

wp-superman

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.

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

 

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

      • JDlintz

        I know this is an ancient comment, but I seem to be having the same issue in the 0.8.7 update. In my case, I can’t use Question Marks, Exclamation Points or Ampersands. Using HTML entities doesn’t seem to work either…still complains about the ampersands.

        • Kavin Gray

          I’ve already fixed this issue in the GitHub version – https://github.com/kavingray/WP-UI/archive/master.zip

        • JDlintz

          Nice fix, but now I’ve lost all my break tags in the tab content.

        • JDlintz

          Special characters working well again, but now my break tags are being ignored in accordion content. Creates some serious run-on sentences : )

  • 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]

  • JR

    Hi. I just updated the plugin to the latest version. The tabs stopped working. How can it be fixed?

  • tangobango

    FYI: Some places in the explanations you are using [wpspoilers] when you mean [wpspoiler]. (Great plugin, BTW)

    • Kavin Gray

      Whoa, Thanks mate. :)

  • Phoebe

    Having a play with the WPUI custom styles but some of them aren’t being recognised. Do I have to download something in additional to get them?

  • Sagbee C

    cant we use Tab Inside Tabs, Tab inside accordian tab ? :(

  • Sagbee C

    I wanted to use this, but its not working…

    [wptabs]

    [wptabtitle] Tab 1[/wptabtitle]

    [wptabcontent] This is the content of Tab1.

    [wptabs]
    [wptabtitle] Inside Tab 1 [/wptabtitle]
    [wptabcontent] This is the content of Tab3[/wptabcontent]
    [wptabtitle] Inside Tab 2 [/wptabtitle]
    [wptabcontent] This is the content of Tab3[/wptabcontent]
    [/wptabs]

    [/wptabcontent]

    [wptabtitle] Tab 2 [/wptabtitle]

    [wptabcontent] This is the content of Tab2[/wptabcontent]

    [wptabtitle] Tab 3 [/wptabtitle]

    [wptabcontent] This is the content of Tab3[/wptabcontent]

    [/wptabs]

  • Sagbee C

    kevin, you missed my posts!! my questions :(

    • Kavin Gray

      No mate, I was stuck without net for the past two days. Sorry about that. IN case of the nested tabs/accordions, you have to use HTML to implement the nested( inner ) one. Check out this pastebin reference. This is indeed a limitation thrown in by WP shortcode implementation.

      • Sagbee C

        Awesome!! I got the details. Your Cool man :D

        Beside I have one more question.

        In Tabs, I want to use youtube embedd videos. But 3 in a rows.

        So thought will change their size.

        eg: [embed]http://www.youtube.com/embed/0NLDPnPX0MU?rel=0 width=”150″ height=”113″[/embed]

        But its not working either!! Do i have to use some div code again ?

  • Phillip

    How do I implement an accordion within a tab??

  • Steve Raven

    Hi,

    I love the look of this plugin, but it’s frozen the rest of my site. I’m running WP 3.5.2 and using a ‘portfolio’ type theme – ‘MyFolio’, where posts animate into new positions to give the impression that the site is just one page. Is it likely to be a jquery conflict?

    • Kavin Gray

      Hi Steve, Next update comes with a special mode – Compatibility mode that allows you to use WP UI minimizing conflicts from other themes and plugins. Please stay tuned.

  • efromdc

    How can I change the tab colors and the background colors as displayed in the attached image?

    • Kavin Gray

      1) To remove the section set the min-width for tabs.

      .wp-tabs ul.ui-tabs-nav li a { min-width : 150px; /* adjust accordingly */ }

      2) Changing colors and spaces require changing backgrounds and margins.

      .wp-tabs ul.ui-tabs-nav li {
      background : white;
      margin-right : 0px !important;
      }

      These go into Options -> Styles tab -> Custom CSS.

  • efromdc

    Sorry, I asked the question wrong / wasnt clear.
    1. I want the focus tab and the focus area to have white backgrounds
    2. I want the section behind the tabs to be while also

    See photo for EXACTLY what Im looking for (and again, my fault! :)

    • efromdc

      The grey are surrounding / outsde of the tabs to be white so that the tabs bend into tthe page a bit more in other words

    • efromdc

      Hello?

    • Kavin Gray

      Hi mate, You mean White text in grey background? Or do you also want the other tabs to be white background? Or do you want to change the link color ( from blue ) ?

      • efromdc

        I need a tab theme so that when you click on a tab:
        1. black text
        2. white tab
        3. the stuf fhat is displayed in the tab have white background

        The default theme looks like this. The tab that is clicked has grey tab and grey backround area

        • efromdc

          I want the the tab clicked (focus tab) to be white tab and the area in which you put your data, the body area, have a white background:

        • Kavin Gray

          Try style wpui-narrow. Or add this to custom css.

          .wp-tabs ul.ui-tabs-nav li.ui-state-active,
          .wp-tabs div.ui-tabs-panel {
          background : white !important;
          }

          That should do it. You can customize it to your preference by learning some css, Then you can create your own themes/skins from scratch. :)

  • William

    Hello Kavin. Great Plug in. THank you. But checking or unchecking autoheight in the option/effects is not having any effect. Content areas seem to default to the height of the tab that is the highest (which has the most content) so if a tab has less content, there is a large unfilled area below the content.

    I am using WordPress 3.6

    I went into edit code and found this:

    ‘autoheight’ => ‘off’,

    Which I changed to this:

    ‘autoheight’ => ‘on’,

    and when that did not work this:

    ‘autoheight’ => ‘true’,

    But still no effect.

  • Melissa Dickerson

    Great plugin! I’m wondering if it is possible to have an accordion, but disable the auto-collapse. For example, initially all items are collapsed, and clicking on an item title expands it, but clicking on another item title expands this second item, but also leaves the first item expanded (no auto-collapse of the first item)…and so on. Basically, I would like to allow a user to expand all items at the same time…the only way to collapse would be to click on the title again. Is there a setting I’m missing that would allow this? Or is there a modification to the code I could make to achieve this?

    Thanks!

  • shubhamj596

    hey m getting a prob in my site dude to wp ui
    i uses wp spoilor
    and sometimes it doesnot shows spoilor
    like this
    even when site is fully opened it doesnt shows sometimes

    plz fix that

    thank you

    my site is rld-games.net

  • Tyler Arboretum

    Kavin, my organization’s website is having issues with all of the collapsibles. They worked yesterday, and now today they show no content whatsoever. Can you please advise? The problem occurs on all pages with collapsibles, which I have not edited in weeks. The domain is http://www.tylerarboretum.org. You can go to http://www.tylerarboretum.org/education-2/school-programs/elementary-grades-1-5 to see an example of the issue.

    Thank you,
    Laura McPhail, Communications Specialist
    lmcphail@tylerarboretum.org

    • Kavin Gray

      Dear Tyler, Try the version on GitHub, where is the issue is fixed – https://github.com/kavingray/wp-ui/zipball/master .

      • Tyler Arboretum

        Kavin,

        Thank you for the quick response and fix. Unfortunately, I’m not a web developer, so I was hoping for a bit more instruction on what to do with the extracted files from the .zip you sent. Am I updating the plugin with these files?

        Thank you again,
        Laura

        • Kavin Gray

          Yes, you need to replace the plugin files with the contents of the zip file. Please remember to backup the current one first.

      • Joss

        thanks that worked for me on WP 3.7

  • Lavena

    Hi how do you hide the “next” and “prev” button and it’s not working for me now.

  • Tatiana Bunaeva

    Hi there,

    I’ve just updated a plugin and got a problem with the styling. Before I updated the plugin the tabs’ names were lined up horizontally, and right now they are lined up vertically. Please, help. Thanks!
    [wptabs style="wpui-macish" mode="horizontal"]

    • Kavin Gray

      Thats due to missing styles. Please make sure you have selected wpui-macish as default style or as one of the multiple styles ( via Options -> Styles -> Load multiple styles -> Select multiple styles).

      Please try clearing the cache too, for that might be a reason.

      • Tatiana Bunaeva

        right, thanks a lot. I’ve selected wpui-macish as a default style and it works in Chrome. But in Safari the tables are messed up again.
        Any solution, please?

  • Thammas

    Hello,

    Great Pluggin!!!!!!!! Got a question. Is there a way to specify which
    tab is displayed. For example. I have Tab 1, Tab 2, Tab 3, Tab 4. The
    default is Tab 1 is displayed first… How can I make Tab 2 display
    first.

  • Patricia Reszetylo

    First off, thank you so very much for a lovely, lovely plugin.

    Second, as you can see in the images, I’m having an issue with an s2member code snip. (I will be talking with them too). I’m trying to protect content based on ccaps, and when I insert the code, it breaks, as in the 2nd pic.

    Any thoughts?
    Thanks, Patricia

    • Patricia Reszetylo

      Sorry, my reference to the pix is backwards. The first pic is at the bottom, second is at the top…

  • AJ

    I’ve set up an 3-tabbed accordion for a client. He wants all the tabs “closed” when someone visits the page. Is there any way to do this? Right now, the first tab on the vertical accordion is open and the other are closed. When someone clicks on another tab, the top tab closes.

    Also, how do I add a custom color to the background of tabs?

    Here is a link to the page: http://www.jaymichael.co/jays-public-relations/

  • veer

    how can be add subtabs under tab

  • veer

    i want to add subtabs under particular tab is it possible by this plugin??

  • dsg257

    I have upgraded to version 0.8.8 but my customisation does not work the way it did in previous version I have a number of custom css files which worked fine . I updated on my localhost and made changes to the files to get them working again which they did but when I copied them and all changes to the production site it sometimes loads but mostly just basic the three pics is how it should look I have 3 tabs inside a spoiler

    [wpspoiler style="wpui-arch" name="Royal Arch"] [wptabs][wptabtitle]Mark Master [/wptabtitle] [wptabcontent]
    the webpage is “www.pgracglasgow.co.uk/degrees

    this plugin is brilliant and has taught me css to do what I want it to do
    thanks for any help or sugestions

  • Carles

    Hi Kavin.
    I’m trying to change the “margin” space around the plugin, because I inserted it inside a table on a page and it gets too much space between cells. I’m using sevin style. Sorry for the annoyance but I’m an absolute beginner to WordPress and to CSS.
    Thank you in advance for any orientation.

  • http://QuickProMobileApps.com Steve Wright

    I am using the spoiler feature from the plugin and it looks and works great on Firefox & Chrome. But it looks like hell on IE. here is a link to the page: http://quickpromobileapps.com
    On Firefox & Chrome the spoiler has a nice shaded gray button area but on IE it has now color at all and you can’t read the text very well.
    Any suggestion on how I can make this work on IE?

  • Jay

    Hi Kavin, thanks for this plugin. I just want to know if it’s possible to have an accordion within tabs?

  • Patrick

    Hi,

    W3 Validator has highlighted the following error which is repeated several time:
    Line 421, Column 233: an attribute specification must start with a name or name token
    …pg” class=”attachment-100×100 wp-post-image” alt=”abdominal pain” 0=”" />

    It’s adding an attribute called “0″ after the alt tag. I checked other areas and it seems to be pulled in by the accordion widget.

    The other error is:
    Error Line 424, Column 10: ID “dlbox” already defined

    An “id” is a unique identifier. Each time this attribute is used in a document it must have a different value.

    In this case it’s saying that rather than using a div id several times on the page it should be a class.

    The url is emergencymedicinecases.com

    Can you please let me now how to correct these issues?

    Thanks,

    Patrick

  • Emily powell

    Am Emily Powell from Canada I never believed in spell casters until my life fell apart when my lover of 4 years decided to call it quit. I was so devastated that i had an accident that left me bedridden. After 7 months of emotional pain and languish, a friend of mine introduced me to a certain spell caster, this was after I have been scammed by various fake spell caster. I was introduced to DR ONIHA ( A Spell Caster). In less than 12 hrs i saw wonders, my Lover came back to me and my life got back just like a completed puzzle… am so happy.. Dr ONIHA have all kinds of spells from pregnancy to love,from employment to visa lottery winning. He has spell to stop divorce,spell to make someone look attractive and others. here’s his contact for serious minded people only, it might be of help….onihaspiritualtemple@yahoo.com. wow Dr.ONIHA…thanks am so grateful as you saved my life…

  • Emiliano Babarah

    Oh my God, I’m so glad to tell everyone the real thing that happen to me…My name is EMILIANO BABARAH. If i refuse to share this testimony it means i am selfish to my self and to people i love so much whom might have similar problems, March 16th about something 7:23pm after taken our dinner my husband got crazy started calling a lady name Melisa I love you, i was so mad and started crying like a baby…then my husband left home for the idiot called Melisa, and never return back home then i believed when he uthen nderstand his self he will surly come back to apology, but instead he left me So i complained to my friend she told me she was having such problems in her marriage until she was introduce to DR ORIOMON who specializes in bringing back broken homes and broken marriages DR ORIOMON cast a spell for me in May 4th surprisingly my husband came home May 6th apologizing that i should forgive him that it will never happen again, i was so glad and gave the thanks to DR ORIOMON who save my marriage, if you are having similar problem you can contact him and His email address is (oriomonspiritualtemple@yahoo.com) you can still save your marriage if u really love your husband.

    Thanks EMILIANO BABARAH_USA

  • Greg

    Hi Kavin,

    I purchased Accordion Plus for WP and I activated successfully. I created two accordions but I can’t preview any… I am using “Formation Pro” theme.
    I followed the instructions and I don’t know what I missed.

    Greg

  • jetsrule234

    I would like to be able to link a tab title to an external page. How would I go about doing this? Your help is greatly appreciated.

  • Roscoe Bonsweenie

    Kavin, is there a way to have a “click to hide” at the bottom of the expanded content? Seems like it would be much easier than having to scroll back to the top.

    Thanks

  • Cilica

    Just wondering if the plugin author is still active with this plugin, as there are issues that are probably easily fixed with the new version 4.01 of wp – so if you are not here, no real point using the plugin. If you are great. Its a good enough plugin to pay for . . . though you offer no support on the one plugin you are selling. So please let us know if you are still active or not. thx

    My challenge is the plugin works but not by using the UI tab on the page or post, No button appears – its non-existent for a couple wp updates ago. I just have the old short codes and use them.