WP UI components demo

WP UI is a wordpress plugin that lets you add interactive widgets to your wordpress posts, such as tabs, accordion, sliders, collapsibles.

Take a look at the working examples of the components of wpui plugin.

Try the Styleswitcher, that allows you to see all the widgets in different styles.

Main plugin here.

Please post support questions at Forums. This site is purely meant for demonstration, documentation and reference purposes. Thanks!

Tabs and accordion

Variety of content

Writing

Image by Dr.Bala

The child

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.

Photograph by Aceticacid

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.

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

Code

Code Involved

[wptabs]
  [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]


And here is the exact same thing in accordion

Writing

Image by Dr.Bala

The child

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.

Photograph by Aceticacid

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.

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

Code

Code Involved

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

Media – Videos

Vimeo

wordpress tv

Youtube

Code

Code Involved

[wptabs]
  [wptabtitle]Vimeo[/wptabtitle]
    [wptabcontent][embed]http://vimeo.com/25475500[/embed] [/wptabcontent]
  [wptabtitle]wordpress tv[/wptabtitle]
    [wptabcontent][embed]http://wordpress.tv/2011/07/04/introducing-wordpress-3-2-gershwin/[/embed][/wptabcontent]
  [wptabtitle]Youtube[/wptabtitle]
    [wptabcontent][embed width="520px"]http://www.youtube.com/watch?v=VuNIsY6JdUw[/embed][/wptabcontent]
[/wptabs]

Note the argument width applied to the youtube embed code. If video width exceeds the tab’s, this can fix it.

Auto Rotate


Tab 1


Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc faucibus malesuada aliquam. Donec in nulla sed orci posuere consectetur nec ac orci. Curabitur et eros nisi. Proin tincidunt lacus a erat hendrerit at facilisis nisi euismod. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Morbi vulputate, massa eget tristique sodales, tellus dui eleifend risus, ac suscipit elit eros nec risus. Suspendisse blandit, odio non mattis vestibulum, dui quam ultricies lorem, ut cursus tellus dolor ut tortor. Etiam id enim arcu. Aliquam viverra bibendum sapien, vestibulum elementum nulla consequat quis. Praesent at leo nec enim ultricies porta.


Tab 2


Etiam id metus nulla. Nullam posuere interdum eros nec convallis. Integer nibh metus, auctor nec bibendum quis, sagittis nec purus. Proin tristique magna non ipsum ultricies lacinia rutrum est porta.

Sed ornare condimentum arcu, ac adipiscing erat posuere nec. Integer ligula ligula, iaculis at rutrum sed, hendrerit sed odio. Pellentesque ac massa ac elit volutpat molestie non a quam. Curabitur iaculis ornare nibh, ac sollicitudin sapien placerat id. Fusce sem arcu, mollis ac egestas at, venenatis posuere nulla. Fusce tempus sagittis enim, sit amet aliquet nulla placerat a.

Nam lacus nisi, adipiscing in laoreet at, porttitor et velit. Nunc et nulla eros. Donec quis felis quis leo molestie scelerisque. Nullam laoreet justo eget nisi molestie eget aliquet sem lobortis.


Tab 3


Nulla facilisi. Aliquam in metus cursus ante luctus semper. Nullam iaculis massa justo. Morbi rhoncus libero nec arcu blandit ac porttitor ipsum iaculis. Fusce tristique, enim sit amet ultricies porttitor, velit nisl tempor lorem, non blandit mauris lectus faucibus mi. Phasellus cursus mauris eu elit feugiat vel scelerisque risus pellentesque. Phasellus posuere tortor non nisi ornare at facilisis metus suscipit.

Donec massa magna, condimentum a dapibus non, egestas ut nunc. Sed faucibus, augue in posuere dapibus, elit lorem vulputate velit, nec molestie dui purus vel lectus. Ut nec mi et leo imperdiet volutpat. Donec vestibulum, urna vitae blandit feugiat, mauris purus hendrerit diam, sit amet gravida nulla sem vitae ante. Morbi pellentesque leo et quam mattis sagittis sed et tellus. Mauris at orci tellus.

Code

Code Involved

[wptabs rotate="6000"]
  [wptabtitle]Tab 1[/wptabtitle]
    [wptabcontent]All the content of Tab 1[/wptabcontent]
  [wptabtitle]Tab 2[/wptabtitle]
    [wptabcontent]All the content of Tab 2[/wptabcontent]
  [wptabtitle]Tab 3[/wptabtitle]
    [wptabcontent]All the content of Tab 3[/wptabcontent]
[/wptabs]

Rotate argument to the wptabs shortcode enables auto rotation at the given interval. Value can be in microseconds eg: 10000 – 10 seconds, 6000 – 6 seconds. Another supported format is : 10s – 10 seconds, 6s – 6 Seconds, value in seconds appended with lowercase s.

Tabs Loaded with AJAX

Images by and © of my pal aceticacid aka Balu

Code Involved for AJAX load

[wptabs]
  [wptabtitle load="http://kav.in/demo/ex1.html"]AJAX[/wptabtitle]
  [wptabtitle load="http://kav.in/demo/ex2.html"]Loaded[/wptabtitle]
  [wptabtitle load="http://kav.in/demo/ex3.html"]Tabs[/wptabtitle]
[/wptabs]

Please note the intently omitted wptabcontent shortcode.

Sliders/Spoilers

Fancy slider

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur euismod, elit non tempor ornare, libero mauris placerat orci, sit amet euismod diam neque vitae elit. Duis porttitor cursus velit, semper rutrum nibh faucibus at. Pellentesque porttitor sodales ultrices. Suspendisse eros felis, mattis ut mollis nec, auctor ac leo. Donec a nisi leo, sed rhoncus est.

And the code involved.

[wpspoiler name="Fancy Slider"]

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur euismod, elit non tempor ornare.... [/wpspoiler]

Some collapsibles

Collapsible 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus pharetra bibendum luctus. Mauris ut sollicitudin urna. Nullam laoreet ultricies dapibus. Nullam ac sem quis augue convallis adipiscing. Etiam ultricies adipiscing nunc, at condimentum purus mollis ac. Quisque non risus at ante lobortis sodales. Nullam tempor ante a neque sagittis tempor nec non elit. Phasellus metus libero, euismod eu feugiat eu, auctor at neque. In eu ligula ipsum.

Collapsible 2

Duis rhoncus varius ipsum a convallis. Maecenas molestie laoreet nisi, eget posuere metus adipiscing nec. Quisque egestas nisl non est mattis vitae faucibus sem semper. Nulla sit amet pretium sapien. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce mattis vehicula iaculis. Nunc eu diam odio, sed sollicitudin enim. Donec vitae metus odio. Maecenas aliquet mi quis turpis hendrerit adipiscing.

Collapsible 3

Curabitur faucibus magna at leo commodo sed cursus dui posuere. Praesent ornare, leo et aliquet tempus, orci orci luctus leo, a rhoncus erat enim ac leo. Suspendisse id vestibulum nulla. Donec sed erat semper nunc euismod fermentum. Nulla rhoncus turpis quis sapien ultricies a scelerisque libero porta. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec tincidunt, purus id consequat placerat, urna mi lobortis nunc, sed elementum mauris libero nec metus.

Code for the above


Example code for the above collapsibles, which are simply sliders one after another.

[wpspoiler name="Collapsible 1"]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur euismod,
elit non tempor ornare....
[/wpspoiler]

[wpspoiler name="Collapsible 2"]Duis rhoncus varius ipsum a convallis. Maecenas molestie laoreet nisi, eget
posuere metus adipiscing nec. Quisque....
[/wpspoiler]

[wpspoiler name="Collapsible 3"]Curabitur faucibus magna at leo commodo sed cursus dui posuere.Praesent ornare,
leo et aliquet tempus, orci orci luctus leo. Quisque....
[/wpspoiler]

 

33 thoughts on “WP UI components demo

  1. Pingback: WP UI for WordPress – Tabs, Accordions and more! | Capability

  2. When your tabs-accordion plug-in is active, I cannot place any images on the page or post. If I deactivate it I can then place images either from the media gallery or the Nextgen gallery. I then reactivate your plug-in and the images and tabs-accordions all work. I have the latest WordPress working on a test site on my local server. All plug-ins and WordPress were installed yesterday.

      • Hi Elizabeth, The issue is now fixed. If you are not see auto-update notification, please update through “WordPress Admin – > Plugins”. Thanks.

  3. I have a problem with my plugin :this is my code:
    [wptabs color="gray" effect="fade" ] [wptabtitle load=""]tab1[/wptabtitle] [wptabcontent]content1[/wptabcontent] [wptabtitle load=""]tab2[/wptabtitle] [wptabcontent]content2[/wptabcontent] [/wptabs] and at the website
    all the contents for all tabs are displayed. Why? I allready deactivate all my other extension to prevent conflicts.

    Thanks a lot for help!

    • Hello there,
      Its look like you are trying to load some AJAX content, but you left the load="" parameter empty. So the tabs possibly misfired.

      Also there is no argument named color and ‘gray’, please refer the main thread for the arguments.

    • Hello Igor, can you supply some more detail on the problem? Are you using any plugin for the menu?

  4. Hi Kavin!

    First I would really like to thank you for your incredible work. Even having problems so far using it, I am absolutely impressed with all the options available on the plugin settings page. Clean, tidy and the tabs insertion code is really well structured. So far it is the best plugin I have seen.

    Now back to my problem. I have presently installed WordPress 3.2.1 with a premium theme. I have installed your plugin and made sure it is the latest version available. Started setting the plugin and choose the style for UI Tabs (I would like to have the tabs used). Saved all the settings and assured that it is properly configured. Inserted the following code using one of your examples on the demo page (just for testing):
    [wptabs rotate="6000"]
    [wptabtitle]Tab 1[/wptabtitle]
    [wptabcontent]All the content of Tab 1[/wptabcontent]
    [wptabtitle]Tab 2[/wptabtitle]
    [wptabcontent]All the content of Tab 2[/wptabcontent]
    [wptabtitle]Tab 3[/wptabtitle]
    [wptabcontent]All the content of Tab 3[/wptabcontent]
    [/wptabs]

    However all I can see i 6 lines of text instead of the tabs itself:

    Tab 1
    All the content of Tab 1
    Tab 2
    All the content of Tab 2
    Tab 3
    All the content of Tab 3

    I have tried to disable the loading of jquery from google, however this does not help and all I can see in all my efforts is the text i posted higher. Can you please give a hand or at least point me to a direction?
    in case you want to see the results, my website is:
    http://rawfoodisme.com/top-recepti/wordpress-post-tabs/

    Thanks in advance and I hope to see this tabs working

    • Hello Milen, Thanks so much, and sorry for your troubles.

      Likely the problem here is due to trouble loading jQuery or conflict with another plugin. Current jQuery version is 1.6.1, while jQuery 1.2.6 is being loaded at your site. WP UI requires atleast 1.5.1.

      Try disabling/enabling these plugins one after another – ajaxComments and Tabbers tab widgets, this might help troubleshoot the incompatibilities.

      Please let me know after try these, i’ll be glad to help.

  5. Hi Kevin,

    first congratulation for your plugin, i tested some others tab plugins in this month and i think this is the usefull and nice… i just have some trubble:

    1) in my first tab content i have some “div” with style, and some tag
    but it don’t seems to work good,

    2) i can’t see in the right way the “tab button” when i’m on

    i think for both trubbles there is some conflict with the tabs style, have u any suggestion please?

    thank’s for your help

  6. hi Kevin,
    another little problem, in the “tab content” the tag don’t work! is there some solution?

    txs
    luca

  7. ok, also here in the comment area it can’t display, i speaking about the taq for to insert line breaks!!

    • Hi lucas, Enclose the code within <code></code> tags. The shortcode for the tab content is [wptabcontent] (i.e. wp tab content).

    • There are no tags needed for line breaks. Line breaks can be put up with <br />, if you need one. It can also achieved by closing a paragraph tag – </p>, provided that you are opening paragraph tag before the text. After than you can enclose them within [wptabcontent] shortcodes.

      • hi kavin,

        the problem was exactly this, the and don’t work in tab content, i solved splitting my content in different div …

        • sorry, but i have some problem with this comment area :P … what i means my problem was exactly with the code for line break that u show me (br and p, both), it don’t work .. so i decide to split the contents in different div

  8. Hi Lucas,
    I found your plugin are very helpful, but unfortunately i need to make all the spoiler expanded by default when the page is loaded, can u help me with this ?
    Thank You

      • Hi victor, my name is Kavin :P

        Yes Victor, That can be done, thought not on the current version ( 0.5.2 ). I will definitely try to implement that on the next version. :) Thanks for the support!

  9. Hi Kavin,
    I’m working with your plugin – great job by the way – and the Boldy Template fo WordPress last version. I’m getting 2 very annoying issues which apparently I can’t solve:

    1. the Boldy style.css class for “ul” and “li” tags overrides yours and I get ugly results; if I comment them in style.css tabs are perfectly rendering, but then I loose those classes for the rest of the website;

    2. it seems like the effects are not working, and I can’t figure out why, Boldy works with Jquery too and the tabs rotation is working, I’m getting confused… I’m not an expert in Javascript, so I don’t know where to start here.

    Any hints?
    Thansk for your time and for your great plugin!

    • Hi Enrico, thanks. :)

      The conflict with the other plugins/themes using jQuery UI, is one of the most annoying issues. I am thinking about whether to move the custom styles to another tabs implementation, offcourse with all the features.

      Sorry for the late reply. I handle the comments on the Support or main site instantly, this site is only meant to be a demo. :)

  10. Firstly – Best Plugin ever!! 5 Stars
    Secondly – The plugin scrambles my sidebar and moves all sidebar content to the bottom of my page. (word press 3.2.1 – using Custom Community theme template)
    Thirdly – I signed up on the main & support pages and it won’t let me login. Permission denied. The initial signup was fine – but still can’t login. I need not receive an activation email.

    • Hi Reuben, sorry for the late reply, this page was intended to serve as only a demo. Can you please try logging in the forums again? There was a problem two days ago, that is now completely solved. I apologize for the inconvenience.

  11. Pingback: menu | WebHosting

  12. Pingback: Wp UI | PislikAdam

  13. Pingback: Wp UI | WP Yazı Eklentileri | Wordpress Merkezi