So you’ve just installed WP UI, and are excited on finding out what this has got to offer? Well, prepare to be amazed. WP UI’s core purpose is it’s simplicity while  offering great versatility.  Following is a rough guide on implementing each WP UI component and posts feature with the UInterface .

Locating the Editor menu buttons

WP UI’s versatile menu could be found right on WordPress editor toolbar, both for Visual and HTML editors. Please refer to the below screenshot.

 

1) Inserting Tabs / Accordions (Est. total time – 2-3 seconds)

Inserting tabs and accordions is the same simple two step process –

1. Entering title and content for each tab, as many as needed.
2. Wrapping all the tabs.

If you are already into WP UI’s mechanics, you might know first step uses

and shortcodes, while the second step uses to wrap’em up. You can also choose between tabs and accordions in the final dialog.

Let’s get started.

1) Click UI button –> “Add tab set” ( Labeled 1 on Image 0 ) . This should open a dialog, as pictured below. To automatically enter content, select some text in the editor before clicking “Add tab set”.

 

2) Enter the title and content, and click insert. Repeat this process for as many needed. So Say for example, I chose three tabs, now it should look like.

3) Wrap the tabs – Now select the entered tabs ( as in above screenshot ) and click “UI button –> Menu –> Wrap tab sets”. This will open a dialog as in the following screenshot.

4) Just click insert, Save the page, you’re ready to go.

5) Want an accordion instead of tabs? Take a look at the image 1.3 – In the wrap tabs dialog – you can choose type – tabs or accordions in the first select box. Cool, ain’t it?

 

Once you get a hang of it, this shouldn’t take more than 3-4 secs.

---

2) Auto Tabs/Accordions with Posts

This is another super feature of wp-ui, that allows you implement a set of tabs in a single click( In Wrap tab set dialog ) or choose a post for a particular tab ( While in “Add tab set” dialog )

To automatically populate tabs/accordions with posts, Click UI button –> Menu –> Wrap tab set. Now in the opened dialog, click “ > Or display posts” at the bottom.

 

1) The above screenshot is pretty self explanatory, Basically select/unselect a category by clicking on it once, then click insert. Selected cats/tags will turn gray.

2) You can also search for a category/tag if you’ve got a long tiring list.

3) You can select number of tabs ( Above close button ).

4) Insert, save the post and check it on the frontend.

---

3) Spoilers/Dialogs

Inserting Spoilers and dialogs are a very simple and similar processes.

1) Click UI button –> Menu –> Spoilers or dialogs.

2) Enter the title/name and content.

3) Alternatively you can auto fill the content by selecting text before clicking Spoilers/dialogs.

4) Click insert, Publish the post – Check the beautiful widgets appear.

---

4) Choosing a post for individual tab/accordion panel/Spoiler/dialog.

These three menu items -

1. Add tab set
2. Spoilers
3. Dialogs

have an option to get and display the post. You can click “>Or choose a post” at the bottom of each dialog.

1) Click choose a post, Scroll thro the list to find the post you wish to display and click to select.

2) Enter a name for this tab/spoiler/dialog.

3) If you are selecting this post for a tab, please make sure rest of the tabs are set up and finally wrapped after this step.

3) Click insert –> Publish the post . Yes, it’s that easy.

---

1. If you wish to improve this documentation by editing, Please contact me.
2. Get support on the forum.

Kavin