This plugin hasnt been tested with the latest 3 major releases of WordPress. It may no longer be maintained or supported and may have compatibility issues when used with more recent versions of WordPress.

WP UI – Tabs, Accordions, Sliders

Description

WordPress is a great platform suitable for almost every case of websites out there, ranging from a personal blog to a complex CMS. This plugin started out as a snippet when i needed a way to shorten my posts and make them look more presentable. WP UI plugin for WordPress, right from its first release, is all about user experience and presentation. It takes care of all the not-needed background stuff and makes it ultimately easy to implement wp ui widgets – Tabs, accordions, spoilers, dialogs. Real power of this plugin lies in the handy functions and shortcodes that deal with posts and feeds.

Please watch GitHub repository for quick updates. If you have an issue, Try the version on Git first.

Base

WP UI for WordPress is powered by jQuery User Interface library – jQuery UI. It acts as a bridge between jQuery UI and WordPress, simplifies and manages the code structure for easy usage.

Styles

WP UI comes with 15 stunning CSS3 styles alongside the ability to use all the jQuery UI themes. Moreover you can use more than one jQuery UI theme in the page and with jQuery UI custom themes. Want your own CSS3 theme? No problem, just upload the stylesheet, scan, select it. It’s that easy.

Ease of usage

There is a dedicated menus and dialogs within the WordPress editor that allows both entering content manually or inserting posts – Easy. Options page comes with contextual help and is intuitive.

Shortcodes & Functions

Most common functionality in WP UI is achieved through shortcodes, that comes with wide variety of arguments. For example – [wptabs style="wpui-blue"]... style argument accepts around 24 values, not including any custom themes you might want to try. Want only a mini loop or display related/popular/recent/random posts? Well, the shortcodes and functions are at your disposal.

Posts and Feeds

Including posts and feeds have never been more easier. With a single post shortcode – [wptabposts], get and display posts as neatly arranged tabs or accordions, Automatically. This shortcode’s counterpart that deals with feeds – wpuifeeds. And you can use the post argument ( [wpspoiler post="3028"] ) universally with most shortcodes to get a single post.

Documentation

WP UI comes with rich documentation bundled in the options page and right within the editor. While they work great for a quick reference on shortcodes or arguments, there is a dedicated documentation site, built and updated every day.

Shortcodes should be entered into the wordpress post editor’s HTML mode. WP Visual mode editor can insert additional paragraph <p> tags before and after the shortcodes, thereby rendering those invalid.

My Accordions seems to be broken, with para tags in between?

View the shortcodes in HTML editor, and remove the blank spaces/linebreaks between lines. Sometimes it might help to put the entire shortcode in a single line, but leaving a couple of spaces between each shortcode.

How do i insert or choose posts easily?

Editor menu allows you to insert content manually and choose the posts. You can choose from a list of posts.

How do i differentiate between a styling and javascript conflict?

Not working at all? Something other broken? It’s mostly a javascript conflict. But when there is a CSS conflict – things work, but just not looking as expected.

Why does the tabs/accordions behave strangely sometimes?

This can be related to lot of white space between the shortcodes, which are converted by wordpress into empty space enclosed within <p> tags. Remove the unwanted space between the shortcodes.

Where can i get help on this plugin?

Documentation is available right within the wordpress admin. It is present in the

Post editor – look for the menu button in Visual mode and “?” icon in the HTML mode. This opens a document with common usage of the plugin shortcodes and their arguments.

Contextual Help – Available on the options page on the top right corner, below the username. Click each tab and information related to that tab will appear.