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.
Tabs and accordion
Variety of content
Writing
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
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
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
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]
Pingback: WP UI for WordPress – Tabs, Accordions and more! | Capability
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.
Hai Elizabeth , This will be fixed within 2 hours. Thank you.
Hi Elizabeth, The issue is now fixed. If you are not see auto-update notification, please update through “WordPress Admin – > Plugins”. Thanks.
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.
Thanks, I fixed already the problem !
Regards
Please post further questions at Main site or at the forums . It helps me handle your support quickly. Thanks.
Regards,
Kavin
Why when i activate the plugin the drop down menu stopped to work
Hello Igor, can you supply some more detail on the problem? Are you using any plugin for the menu?
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.
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
Hey,
i solved forcing style in css style of my theme
Hi lucaweb, glad that you fixed the troubles.
Sorry for the late reply. This page was supposed to be just a demo page, main site is here.
hi Kevin,
another little problem, in the “tab content” the tag don’t work! is there some solution?
txs
luca
the tag …
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
anddon’t work in tab content, i solved splitting my content in different div …sorry, but i have some problem with this comment area
… 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
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
Would be better if i can choose which spiler i want to expand by default.. =) thanks
Hi victor, my name is Kavin
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!
P.S : 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.
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.
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.
Pingback: menu | WebHosting
Pingback: Wp UI | PislikAdam
Pingback: Wp UI | WP Yazı Eklentileri | Wordpress Merkezi