這個外掛並未在最新的 3 個 WordPress 主要版本上進行測試。開發者可能不再對這個外掛進行維護或提供技術支援,並可能會與更新版本的 WordPress 產生使用上的相容性問題。

WP UI – Tabs, Accordions, Sliders


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.

New Premium Plugin – Accordions Plus

Documentation | Plugin page


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.


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.


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.


Missing your language here? Contribute by translating your favorite plugin!




Please rate the plugin if you find it useful.


Complete list of Credits can be found on WP UI Options Page -> Credits. Thanks to all the authors for their incredible work.


  • Preview of the CSS3 styles.
  • Buttons on both editor aspects.
  • Near complete inbuilt documentation.
  • Both jQuery UI themes and WP UI CSS3 styles preview. Picture shows a full CSS3 style - wpui-sevin.


  1. Upload the wp-ui folder to the /wp-content/plugins/ directory.
  2. Activate the plugin through the ‘Plugins’ menu in WordPress.
  3. Add shortcodes to the post editor and enjoy!


Installation Instructions
  1. Upload the wp-ui folder to the /wp-content/plugins/ directory.
  2. Activate the plugin through the ‘Plugins’ menu in WordPress.
  3. Add shortcodes to the post editor and enjoy!
Where can i find a Tutorial/quick start guide?

Read the Quick start guide to learn about editor interface.

How do i get some feature working in this plugin?

Most likely there is an option exactly for the purpose you are searching for. Please check the options page.

Your plugin is awesome! Do you provide CSS customization services?

Yes, you can request a quote through my Contact page.

How do i get regular updates?

Give a 5 Star rating, or Like Us on Facebook and stay updated. or Follow @kavingray on twitter!

Where can i find recent & up-to-date FAQ?

Can be found here.

How do i use multiple jQuery UI themes?

It is possible from WP UI 0.5.5 to use multiple jQuery UI themes on the same page. Check out this guide.

Where can i demo the custom CSS3 styles?

Demo with the style switcher can be found here.

What if the user does not have Javascript enabled?

All the code will degrade gracefully with javascript disabled. Please try disabling the Javascript in your browser to get the idea.

Can i use all the available jQuery UI themes?

Yes. Just enter the name of jQuery UI theme as value to the shortcode [wptabs] style argument. From Version 0.5.5, it is now possible to use multiple UI themes, with this guide.

Why are some of my shortcodes appear on the rendered page?

Make sure each one of your shortcodes is in the separate line but please do avoid empty lines. eg.

  [wptabtitle]Tab 1[/wptabtitle]
  [wptabcontent]Contents of the first tab goes here. Any thing, blah blah.[/wptabcontent]
  [wptabtitle]Tab 2[/wptabtitle]
  [wptabcontent]Content inside the second tab is here.[/wptabcontent]
Why do i see closing shortcodes in the rendered page?

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.


I have some exciting idea/suggestion about this plugin!

I’d love to hear about it. Please drop me a mail here.

How can i support this plugin?
  • Support the plugin by considering a donation.
  • Give this plugin a nice 5 star rating on the plugin page.
  • Tell others that it works, with the compatibility box on the plugin page.
  • Support us by a like on Facebook
  • Tweet about the plugin or follow us on twitter @kavingray.
  • We’d really appreciate a review or a blog post.


2017 年 10 月 19 日
According to Wordfence, this plugin contains malicious code. i.e. it could be used to hack your site. AVOID!!
閱讀全部 57 則使用者評論


以下人員參與了開源軟體〈WP UI – Tabs, Accordions, Sliders〉的開發相關工作。




  • Single line tabs.
  • Compatibility mode to deal with conflicts automatically.
  • Better non-English characters support with HTML IDs
  • Ability to customize your own ID attr, thus desired URL hash.
  • 6 Styles removed, Can be re added through styles upload.
  • BugFixes : Changes to play along well with jQuery > 1.10 & 2.0.
  • BugFix : Accordion autoheight fix
  • Bugfix : Styles demo in options page.
  • Bugfix : spoilers cutoff show/hide text, speed fix.
  • Bugfix : Vertical tabs not showing with jQuery UI themes.


  • Major changes : Please save the options after updating.
  • Important : Feature Changes.
  • Updated for WP 3.5 and above.
  • Redone Widgets and Admin page. Backup your old widget data before updating.
  • Rewritten linking support -> Now open dialogs with URL hash.
  • Loading jQuery UI from Google CDN now Optional.
  • Redone Admin options page, with added features – Import, export options.
  • Enhanced support for IE 7 – 10, Accordions fixed for IE 7-9.
  • Styles now based on scss, scss available in GitHub.
  • Fixed admin page buttons and dialogs.
  • Numerous performance improvements and bug fixes.
  • Scripts updated for latest version for jQuery and jQuery UI.


  • Plugin is now on GitHub.
  • Completely rewritten Tabs, accordions, spoilers using jQuery UI widget factory.
  • Support for use on Dynamic pages.
  • Linking to tabs and accordion panels from other pages and the same page finally available.
  • Support for nested linking.
  • Editor panel now displays post counts with categories and tags.
  • Improved compatibility with WordPress >= 3.4.1.
  • Vastly unused Post widget, pagination, scroller functions were removed.
  • Some styles tweaked and perfected. Check out the dialog styles. 🙂


  • Support for jQuery UI buttons.
  • Rewritten Dialogs handling, Dialogs are now accessible through Image maps and links.
  • Bleeding edge channel, for cool yet experimental features enabled through admin.
  • Improved support for feeds with long URLs and foreign characters.
  • New Image shortcode, Easily link any media gallery image.
  • WP UI styles cleaned and updated.
  • Improved documentation and Quick start guide.
  • Serbian translation by Zoran Aksic, downloadable from plugin page.
  • Numerous performance improvements and bug fixes.


  • BugFixes related to previous version.
  • On Demand script loading using jQuery.
  • Feeds access/excerpt handling.
  • Custom themes uploading error handling and directory browsing improved.
  • Options page modal windows are now handled by colorbox, replacing thickbox.
  • Related posts widget updated.
  • Fix regarding post meta.
  • Options handling changed and might require a manual save for upgrading users.


  • Lots of changes and rewrites from the last release.
  • WordPress 3.3 compatible – Try the tour and help.
  • Completely overhauled editor interface.
  • Revamped tinyMCE and QTags buttons – ready for 3.3 .
  • Load scripts on demand or use conditional logic.
  • Caching images and scripts to improve functionality. Uses wp-content/uploads/wp-ui/cache/ for cache files and images.
  • Display Related/Popular/Recent/Random Posts with the new posts widget.
  • WordPress widgets, manual content or posts widget.
  • Improved/revamped options page with new options added.
  • Interactive tour, that briefs the new features on editor interface.
  • Use images or icons in tabs ( with [wptabtitle] shortcode )
  • New theme “wpui-gene” – minimalistic.
  • New on spoilers – Use [wpspoiler background="minimal green".... Also try blue or red instead of green.
  • Re-Save the Options, please. Deactivate the plugin first if you are uploading manually. 🙂


  • Get and display RSS feeds inside the wp ui widgets.
  • Rewritten documentation available right from within editor.
  • Vertical style on tabs now more sleek and compact.
  • Add unlimited post and feed templates.
  • Select custom/exclusive styles as defaults.
  • Scan styles path issue has been corrected and now works 100%.
  • TinyMCE/quicktags buttons corrected.


  • Compatibility and bug fixes.
  • Style fixes for IE < 8.
  • Help on editor page, Style chooser on options page should now work perfectly.
  • Please remember to save the options.


  • Tons of compatibility fixes. jQuery version requirement relaxed to 1.4.2.
  • Another Tabs design, no-background tabs. Use background=”false” with wptabs shortcode.
  • Style Fixes – uniform feel. Use the custom css panel to enter your font size rule.
  • New shortcode wpui_loop outputs custom loop anywhere and is not limited to WP UI.
  • Pagination for retrieved posts. Basic pagination for now, to be used with the wpui_loop shortcode.
  • Twitter and e-commerce widgets blank page fix.


  • Detailed Preview of jQuery UI themes and CSS3 styles.
  • Dialog positions, style conflicts fixed.
  • Bug fixes, including Line breaks fix, and improved security.
  • Auto fix the missing options that are essential.
  • Optional scroll follow navigation for tabs
  • Numerous style conflicts are fixed across multiple wordpress themes.


  • Display post/posts and pages within Tabs/accordion/dialogs/sliders.
  • Mousewheel support and vertical styling for Tabs.
  • Dialogs completely styled and ready for action.
  • Template feature for the posts.
  • Sliders/dialogs rewritten.
  • Various bugfixes.


  • Fix: array_key_exists error when there are no custom themes listed.


  • jQuery UI custom themes, manageable through options page.
  • Tabs/accordion events choice – Mouseover/Click(default)
  • UI Dialog, some basic support.
  • Complete Linking and history.
  • Tabs/accordion custom styles were modified to cooperate with the jQuery UI themes.
  • Accordion/Tabs – contact form 7 related bug totally fixed – ( Missing submit button )
  • Additional fix for preventing thickbox from breaking jQuery UI functionality (originally unrelated to WP UI).


  • Accordion easing effects added.
  • Many other options were added to the options page.
  • Tab name special characters fix.


  • Fixed “Unable to attach Media – Images to the post with the plugin activated” problem.
  • Fixed the options page contextual help and other documentation.
  • License copy added.


  • The First public release.
  • Custom CSS3 styles.
  • Uses jQuery 1.6.1 and jQuery UI 1.8.12.
  • Added more features to tabs – Nested, AJAX loading etc.
  • Plugin now supports Tabs, Accordion, Sliders, Collapsibles.


  • Plugin scripts rewritten with reusability in mind. IE support, from IE6.