If you are interested, Please drop me a mail, with subject “Beta Tester”

Facebook

Twitter

Tweets by @kavingray

Need plugin testers to test out new and exciting functionality on WP UI versions coming over the following months. Those who are interested, Please drop me a mail with “Testing:” in subject.

You can contact me here.

Linking to tabs

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

Nice Quotes

Some block quote tests:

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.

So in the above tabset – Say you’d like to link to the tab Tables. Link to the tab now would be

http://kav.in/projects/blog/linking-to-tabs-accordions-and-spoilers-in-wp-ui/#tables

To find the link to the tab, Just mouse over to your desired tab and see the bottom of browser’s status bar. Or you can just right click on the tab and copy link..

Link to the tabs

Here is the link to the tab “Nice quote“. Enjoy.

Linking to accordions

Now the same thing in accordions.

Lorem

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

Ipsum

Some block quote tests:

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.

Dolor

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.

Linking to accordions can be slightly tricky. Browsers dont show mouseover anchor captions, but the mechanism is same as with tabs.

Link to the first accordion panel would be

http://kav.in/projects/blog/linking-to-tabs-accordions-and-spoilers-in-wp-ui/#lorem

Generally Hash part ( one after the # ) is lowercase version of your title. If your title has spaces, they are replaced with underscores ( Nice Tie becomes #nice_tie). Chrome inspector or Firefox with Firebug can be extremly helpful to find the accordion and spoiler’s links.

Caution : Duplicate titles

Duplicate titles are not uncommon within a page, when present link’s hash part is appended with a number. Right click on accordion title -> Inspect element to find out the URL in such cases.

Linking to Spoilers

Linking to spoilers is pretty much the same as accordions. Hash part is lowercase stripped version of name you give it.

Link to this spoiler would be

http://kav.in/projects/blog/linking-to-tabs-accordions-and-spoilers-in-wp-ui/#my_spoiler

Click to try it.

Notes:

• You cannot toggle spoilers by reclicking same links without resetting the url first(#)
• Removing the hash part reloads the URL when in the same page.
• Disable enable linking functionality with WP UI Options page -> Advanced ->Linking and history

Happy linking.

Usage

Buttons are implemented with the shortcode – [wpui_button]. This is a self enclosing shortcode. Basic usage is as follows.

[wpui_button url="http://example.com/link/to" label="Button Text"]

This will produce a nice button –

[wpui_button url="#" label="JS alert" onclick="alert('Hi There')"]

Clicking this button will show a js alert. –

Shortcode wpui_button requires arguments url and label, rest of the arguments optional and listed below.

Arguments list.

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.

Image 0 – Pictured : WP UI’s editor arsenal.

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

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”.

 

Img 1.1 – Entering the tab’s content and title. Repeat this step for as many tabs needed.

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.

 

Image 1.2 – Three sample tabs entered and selected.

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.

Image 1.3 – Final step – Click insert, save post/page and you are ready to go.

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?

 

Image 1.4 – Final result. Simple, Beautiful, isn’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.

 

Image 2.1 – Choose a category/tag to populate tabs from.

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.

 

Image 2.2 – Auto tabs/accordion from posts result.

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.

Image 3.1 – Choosing a post.

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

Choosing Categories for wptabposts shortcode

Changes

There are changes on Admin – options, editor , features – some new ones and styles.

Editor

Yep, that’s right. Editor buttons in WP UI were always a bit lacking with the feature set already available on the frontend. But not anymore. Enter the new WP UI’s editor interface – Menus and buttons. Take the following screen shot for example – It lets you select the categories, tags, recent/popular/random posts with an UI.

Choosing Categories for wptabposts shortcode

And so can you choose individual posts for use with wptabtitle, wpspoiler and wpdialog shortcodes.

Selecting individual posts with new UI

That’s not all, folks. If you have wordpress version 3.3 installed and wish to know the new features this version – I highly recommend you a tour. If you upgraded, you can always disable the tour with “WP UI options page -> General -> Tour”.

Detailed interactive tour on Editor

 

 

Options

Lot of options were changed, some were modified to preserve compatibility. It is highly recommended to re-save the options. If you find the new options blank, then it might be time to reset the options or de-re-activate the plugin.

Loading multiple styles

Choose only the style you need, with WP UI options -> Style -> Select multiple styles.

Load only the styles you want!

And the Custom CSS option is now moved from “advanced” to Style tab.

One of the new option that needs to be configured, is “Post widget”, that is shown at each posts end and can show – Related/recent/random/popular posts at end of post in single view.

Option - Posts widget

Loading

 Conditional and on-demand loading

These are two new options, quite different.

Conditionals to limit/prevent scripts/styles loading.

Conditional loading

It is now possible to use conditional loading, using WordPress conditionals. For example – conditionals in the above screenshot limit to plugin scripts and styles to load only on single pages and on the page with slug – pricing. Complex conditional usage is possible, using parantheses, AND && , OR (||) conditionals.

Example – load only on pricing page or custom post type, let’s say “custom_post_type”.

is_page( 'pricing' ) || ( 'custom_post_type' == get_post_type()  )

This was inspired from one of my favorite plugins – Widget Logic by Alan.

This option uses php function eval, that is used to evaluate the code. While this is essential for such functionality, it must be noted that anyone who has capabilities to edit plugin options has the ability to introduce malicious codes. If you are concerned about security implications – you may chose to refrain from using this option entirely. Eval is not used if option is left blank.

 

On-Demand loading

This is new and considered experimental, as it depends on some features that might be absent on some servers. This needs “Cache option” on the general tab to be set. When enabled, the scripts are loaded as necessary – If page has spoilers, only code for spoilers i s loaded. Output is already minified. Cacheing is built-in to prevent server load. If you are using W3TC or any other cache plugin, leave this disabled. If you are still unsure of this option – please leave it disabled. 

FrontEnd

Related posts

With a new option, you can display recent/related/popular/random posts at the end of post in single view. While the styling is now just minimal – I’m all open to ideas, please feel free to suggest me.

Display related posts with WP UI

 

New style – wpui-gene

New style for minimalistic lovers. With no background, this is absolutely suited for long posts, as used here.

wpui-gene style

 

Misc

Using images/icons in tab titles

Yes, you can now use images and icons with wptabtitle shortcodes. Links will still be stripped, as it is jQuery UI’s default behavior. See the next screenshot.

Language support

Now all the languages should be compatible, even the RTL languages. And AJAX option works simultaneoulsly.

Use images/icons in tabs | Language support

 

Widgets

Two wordpress widgets are available, one for entering the content manually and other for using posts.  While these widgets are still being developed, I’d appreciate some feedback.

Widgets

 

 

 

That’s it, friends. Hope you enjoy the plugin.

Credits

Images in this page –