Beginning from WP UI – 0.7, it comes with the abilty to display posts and pages inside your widgets. This Document covers the syntax, usage and the examples.
Syntax and usage
Single or multiple posts can be displayed in a tab by passing the new arguments to existing shortcodes. And multiple posts with automatic tabs/accordion can be achieved with the wptabposts shortcode.
Getting a single post
These arguments can be used with any of the following shortcodes.
- wptabtitle
- wpdialog
- wpspoiler
These shortcodes handle the following arguments for getting a single post or page. Though the examples show only wptabtitle, you can use these arguments with wpdialog and wpspoiler.
| Arguments | Explanation |
|---|---|
|
post |
ID of the post. Example – the below would get the post with the ID 1071 and name the tab “Unicorns”. [wptabtitle post="1071"]Unicorns[/wptabtitle] |
|
page |
ID or title of the page.
[wptabtitle page="56"]My Page[/wptabtitle]
[wptabtitle page="My Page"]My Page[/wptabtitle] Both the above shortcode will get the page titled “My Page” , given that id of that page is “56″. |
|
elength
|
Default is ‘more’. Maximum length of characters to display in the excerpt. By default, the post is displayed up to the <!–more–> tag, [wptabtitle post="1071" elength="200"] This will trim the post content upto 200 characters. |
|
cat |
Get the posts from selected category and displays them in a single tab or accordion panel.
[wptabtitle cat="Apple" number="6"] |
|
tag |
Get the posts from the given tag and displays them in a single tab/accordion panel.
|
|
before_post |
Insert a string before the post.
[wptabtitle before_post="Cool! this text appears before the loaded post!"]
|
|
after_post |
Insert the string at the end of the post.
[wptabtitle after_post="Wow, wasn't that amazing?"]
|
Getting multiple posts into Tabs/accordion
A new short code [wptabposts] is available from 0.7. This handles getting multiple posts and auto organizing them as tabs or accordion.
All the arguments of the wptabs can be passed to the wptabposts shortcode, as the latter is just a derivative of the former.
| Arguments | Possible values |
|---|---|
|
cat |
ID or Name of the category. Examples: [wptabposts cat="135" number="5"]
is same as [wptabposts cat="apple" number="5"] given the ID of the category “Apple” is 135. |
|
Tag |
Name or ID of the tag Examples : [wptabposts tag="blogging" number="5"]
|
| tab_names | Names of the tabs(labels) in exact order, separated by commas.
[wptabposts tab_names="Math,Science,Definitions,Classes" cat="136" number="4"]
Number of names should be equal to number of posts. |
|
Number |
Number of posts to get from the category or tag. Default is “4″. |
|
get |
Three values – “recent” or “popular” or “random”. Example – this would get last 6 posts from your blog. [wptabposts get="recent" number="6"]
[wptabposts get="popular"]
( get post based on comment count ) [wptabposts get="random"]
( get random posts at each load ) |
|
exclude |
Exclude selected categories or tags. separate multiple categories or tags with commas.
[wptabposts cat="37" exclude="14, 46"] This will load the posts from category “37″ and omit the posts that are also in categories 14 and 46. |
|
length |
Length of the excerpt ( in characters ) to display. Default is upto the “more”. if the <!–more–> is not found, then the wordpress default excerpt length(55) is used. |
Template for the posts
Every user prefers their own way of styling the posts. Some would want extra large thumbnail. Some would prefer not to display the meta.
Thinking of the above, I decided to implement “smarty” like template tags.
Proceed to the WordPress admin -> Settings -> WP UI. In the options page, choose the tab “posts”.
Here you have got two fields( textareas ) to enter your template structure. The first one is for tabs/accordion and the second one is for Spoilers/Collapsible and Dialogs( only from 0.7).
If you are reading this, then probably you are probably well versed in HTML by now. Lets look at a basic example.
<h2>{$title}</h2>
<div class="meta">{$date} | {$author}</div>
<div class="thumbnail">{$thumbnail}</div>
<div class="excerpt">{$excerpt}</div>
<p><a title="Read more of {$title}" href="{$url}">Read More</a></p>
So let’s take a look at the above code. If you are familiar with smarty, then you may safely skip this section of the article.
Above snippet shows the basic HTML structure of a post ( header h2, div, p, a elements). And the stuff within the curly brackets are referred as tags or variables.
These so called tags will be replaced with data when they are available. For example, {$title} would be replaced with the title of the post. As such, {$excerpt} is replaced by the excerpt of the post. So what if you want the whole content to be displayed? Simple, just use {$content}.
Here’s the available list of variables.
| Variable | Explanation |
|---|---|
| {$title} | Title of the post/page. |
| {$date} | Time and date of the post. Also available as relative time. |
| {$author} | Post author |
| {$thumbnail} | Post’s featured image ( thumbnail ) |
| {$excerpt} | Excerpt of the post. |
| {$content} | Full content of the post. |
| {$url} | Permalink to the post. |
| {$author_post_link} | More posts by author – Link. |
| $cats | The categories of the posts |
| $cat | Displays the first category. |
| $tags | Post’s tags. |
| $num_comments | Returns the total number of comments. |
All these so called variables are like temporary placeholders that will be replaced with actual content.
Finding the ID of the posts/categories/tags
Go to wordpress admin. From there Click on the sidebar -
- “All posts” if you want to know post ID.
- “Categories” if you want to know category ID
- “Post Tags” if you want to know tag ID.
- “All page” under Pages, to find out the page ID.
Now in the screen that loads, there is probably a list of items. For example, Posts screen shows all the posts in order starting from recent.
Hover on any of the items ( or “Edit” below that). Now look at the browsers status bar. It should now show you a link.
Some screenshots.
Find the post ID
Find the Category ID and tag ID.
Finding the tag ID is exactly the same, just go to “post Tags” and hover and find out the ID.
Examples
A picture might be worth a thousand words, a practical example – even more.
Multiple posts with wptabposts
Example Tabs This will get 5 posts from their category “test” in this blog.
[wptabposts cat="18" number="5"]
Read
Readability Test
Layout
Layout Test
Images
Images Test
Gallery
Aside
Post Format Test: Aside
Example accordion
[wptabposts type="accordion tag="accordion" number="5"]
Please verify [wptabposts] arguments.
Loading single posts
Loading post on a single page. Note the second tab on the below tabs.
[wptabtitle post="4"]
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
WP UI components demo
WP UI components demo
WP UI is a wordpress plugin that lets you add interactive widgets to your wordpress posts, such as tabs, accordion, sliders, collapsibles.
Take a look at the working examples of the components of wpui plugin.
Try the Styleswitcher, that allows you to see all the widgets in different styles.
Main plugin here.
Quotes
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.Below widgets get their title from the post, if loaded.
A slider/ Collapsible
A slider with a post loaded.
[wpspoiler post="188"]
Layout Test
Paragraph Alignment Tests
Default Paragraph
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.A dialog
Click the button, a dialog will open with the post.
[wpdialog post="128" show="drop" hide="explode"]
Show the post!
That’s for now. If you have any questions, please post them at forums.
What do if you have empty options fields
Some old users reported errors, because of the fact that options introduced in version 0.7 has not been set the default values. While new users should not have this problem and this seems to vary across wordpress installations. If you have missing option defaults, then you have following choices.
- Reset the options. But you will need to choose the options you customized earlier.
- Copy the below values to the following fields.
| Option | Default value |
|---|---|
|
Location |
|
|
Template for posts in tabs and accordion |
<h2 class="wpui-post-title wpui-align-center">{$title}</h2>
|
| Template for posts in Dialogs and sliders |
<div class="wpui-post-meta">{$date}</div>
|
| Default excerpt length |
more |
|
Location : |
|
|
Dialog width |
300 |
|
Location : |
|
|
Tabs mousewheel navigation |
On list |
That should do it. Thanks for the patience.
Cheerio!
Kavin
Pingback: menu | WebHosting
Excelent, just find out about WP UI,
LOVE IT!! You are Awesome!!
Great, thank you for very fast developement ! This function is very helpfull and will make WP UI even more powerfull plugin. AFAIK only plugin with such possibility. Best regards,
pluginuser
How can I have the post content inserted in to the tab content?
Is there a way that this plugins supports custom post types?
Any idea how I would disable the scrolling for the tabs?
I don’t want it to scroll through the tabs with the mouse wheel.
Thanks!
problem- post id must be four digits
hey
i get a fatal error message while trying to insert a post with less than 4 digits on it’s id
like this: (gaps are intentional)
[ wptabs ]
[wptabtitle post="213"]Unicorns[/wptabtitle]
[wptabtitle]example[/wptabtitle]
[wptabcontent] This is the content of Tab2[/wptabcontent]
[ /wptabs ]
then- if i add another number to make 213 a 4 digit number then fatal error is gone and is replaced by “Please verify the post/page ID. Check the spelling if using a name or title.” and this of course cos there is no such number cos i have a new site with a few post’s and pages.
so before i dive into my SQL to change id numbers can anyone please help with this?
thank you
p.s
i have tried to post this in the discussion site but it didn’t work….
Hello didi, this site is for demonstration purposes only. I rarely come over here. Would you be kind enough to try to post your problems at the forums? Thanks.
BTW, that sounds like you got the ID wrong. ID’s can be any number of digits, those hardly affect that.