wp-ui-0

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]

 

Comments are closed. Please use Support forum for questions.