WP UI Plugin – Tabs, Accordions, Sliders

Now available on the Commons, the WP UI Plugin provides five powerful display tools to use in pages and posts: (1) tabs; (2) accordions; (3) spoilers (or show/hide “collapsibles”); (4) dialogs (or popup windows); and (5) feeds. For a quick idea of what you can do with this plugin, check out the WP UI demo page.

Other plugins and themes on the Commons let you do this kind of stuff, but what is unique about WP UI is the way it integrates content from your site. You can select certain posts and pages and display them in an accordion or as a tabbed collection. Or you can select post categories or tags, and content can be dynamically added.

You can also animate the display automatically. This functionality has a bunch of configurable options: slide interval, slide style (slide or fade), vertical, horizontal, etc.).

Using the Interface

WP UI uses short codes to work its magic, and the interface tries to make this easier. Don’t be put off by the confusing options for tabs and accordions. “Add a Tab Set” and “Wrap a Tab Set” are designed to automatically generate short codes for your tab or accordion. Here’s how they work:

  • “Wrap a Tab Set” creates the wrapper that you’ll need, and lets you configure many options for your container. You should click on this one first and set up the outer layer.
  • “Add a Tab Set” is used to provide content to your tab or accordion container. Position your cursor in the middle of the wrapper, where the content goes, and click on “Add a Tab Set”. You’ll need to provide a tab name and then select whether to manually enter text or select content from a post or page. You’ll need to repeat this operation for each tab you want to display.
  • If you want to select categories or tags from your post as content, you will only need to use “Wrap a Tab Set.” Set up your container’s options, and then click on “or Display Posts.” A drop down will appear with the following options: categories, tags, popular, recent, and random. Pick one of these, and select the number of items you want in your collection (default is 5).

You can always enter the short codes manually if the interface confuses you.

The interface for spoilers and dialogs is a much simpler, one step process as these tools display just one content object. Again, you can enter text or select content from your site.

“Feeds” is also very straightforward – simply enter a feed URL and select the number of items you want to display, and the feeds will be displayed in a tabbed container.

Don’t overlook the most useful item on the drop down men – Documentation. Here you can find code examples that you can mimic. I found it more useful than the WP UI Quick Start, but check that page out as well.

Settings

The plugin has many settings, and you can explore. You can control the way tabs look and behave, select skins for your containers, and determine how content from your posts and pages is displayed.

WP UI is a great plugin to aggregate content on your site, and add stylistic flair. Check it out!

Creative Commons License

css.php
Need help with the Commons? Visit our
help page
Send us a message
Skip to toolbar