WP UI – display posts

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.

 

Please post support questions at Forums. This site is purely meant for demonstration, documentation and reference purposes. Thanks!

 

 

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.

  1. wptabtitle
  2. wpdialog
  3. 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.

[wptabtitle tag="Blogging" number="3"]

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.
If names are not provided, the tab labels will numbers( 1, 2, 3, 4 ).

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 -

  1. “All posts” if you want to know post ID.
  2. “Categories” if you want to know category ID
  3. “Post Tags” if you want to know tag ID.
  4. “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.

Wordpress find the post's ID 

Find the post ID

Finding the category and tag id in wordpress 

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

wp-ui-components
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, […]

Read More...

Layout

Layout Test

Layout Test
This is a sticky post!!! Make sure it sticks! This should then split into other pages with layout, images, HTML tags, and other things. 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 […]

Read More...

Images

Images Test

Images Test
Image Alignment Tests: Un-Captioned Images Center-align, no caption Center-aligned image with no caption, and text before and after. ALorem 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 […]

Read More...

Gallery

Post Format Test: Gallery

Post Format Test: Gallery

Read More...

Aside

Post Format Test: Aside

Post Format Test: Aside
“I never tried to prove nothing, just wanted to give a good show. My life has always been my music, it’s always come first, but the music ain’t worth nothing if you can’t lay it on the public. The main thing is to live for that audience, ’cause what you’re there for is to please […]

Read More...

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

Image by Dr.Bala

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-0

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.

Read More...

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.

Below widgets get their title from the post, if loaded.

A slider/ Collapsible

A slider with a post loaded.

[wpspoiler post="188"]

Layout Test

This is a sticky post!!! Make sure it sticks! This should then split into other pages with layout, images, HTML tags, and other things.

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.

Read More...

A dialog

Click the button, a dialog will open with the post.

[wpdialog post="128" show="drop" hide="explode"]
Show the post!
wp-ui-components
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.

Read More...

 

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.

  1. Reset the options. But you will need to choose the options you customized earlier.
  2. Copy the below values to the following fields.

 

Option Default value

Location Options page -> Posts

Template for posts in tabs and accordion

<h2 class="wpui-post-title wpui-align-center">{$title}</h2>
<div class="wpui-post-meta wpui-align-center">{$date} | {$author}</div>
<div class="wpui-post-thumbnail">{$thumbnail}</div>
<div class="wpui-post-content">{$excerpt}</div>
<p class="wpui-readmore">
<a class="ui-button ui-corner-all" title="Read more of {$title}" href="{$url}">Read More...</a></p>

Template for posts in Dialogs and sliders
<div class="wpui-post-meta">{$date}</div>
<div class="wpui-post-thumbnail">{$thumbnail}</div>
<div class="wpui-post-content">{$excerpt}</div>
<p class="wpui-readmore">
<a title="Read more from {$title}" href="{$url}">Read More...</a></p>
Default excerpt length
more

Location : Options page -> Style

Dialog width

300

Location : Options page -> Effects

Tabs mousewheel navigation

On list

 

That should do it. Thanks for the patience.

Cheerio!

Kavin

Comments are closed. Please use Support forum for questions.