Post Loops: getting and displaying posts

If you need to display a section with the latest posts / company news / blog updates - a classic element of many homepages, LiveCanvas offers you a strategy that exposes all the power of WordPress to retrieve posts in a clean and powerful way, and to display them flexibly.

Data can of course be pulled from custom post types as well.

The output can be displayed as a listing, as a grid, or with your arbitrary custom callback function.

A simple example to get started

In the visual editor, add a section and insert the WordPress Integration / Get Posts element.

You should see a grid with your latest posts.

Upon clicking them, you'll see an interface that allows you to customize the query parameters and the output markup.

Inside the Blocks panel you will find the same  WordPress Integration / Get Posts element - plus it's siblings Post List and Page List. These are all using the same shortcode underneath.

Let's see how you can populate a block with such an element and configure it to quickly get where you want to:

How to add a posts loop - The query options


Customize the output of your Posts Loop


How does it work and how to extend it

Have a look at the HTML code of the section.

Note: Just right-clicking the blue "Section" label on the page will show up the code editor, if you're lazy enough and want to skip opening the contextual menu.

Here's what the section code looks like:

So at the heart of this solution there's a shortcode: lc_get_posts

The shortcode is just a sort of wrapper to the get_posts function which is the best way to pull data from WP without having unwanted side effects. Is just simple and trivial code.

It has a lot of parameters. Here is complete listing with their default values as well:

Query-related parameters

These parameters control which posts will be called from the shortcode.
Geeks will like that these are the same that the get_posts function handles.

posts_per_page => 10
offset => 0
category =>
category_name =>
orderby => date
order => DESC
include =>
exclude =>
meta_key =>
meta_value =>
post_type => post
post_mime_type =>
post_parent =>
author =>
post_status => publish
suppress_filters => true

Output-related parameters

These parameters control the way posts are displayed - it's a handy way to control their layout.

output_view => lc_get_posts_default_view
The name of the function which shall be used for displaying posts. A custom callback function can be used so you can have full control on how the posts will look like. If you do use a custom callback, the following  parameters are ignored.

output_wrapper_class =>
Name of CSS class which will wrap the whole post list

output_link_class =>
Name of CSS class which will be used for the link

output_heading_tag => h2
Heading tag to use for the article title

output_hide_elements =>
Used for hiding post elements - it defaults to none - but you can list here one or more comma separated elements chosen from this set: title, author, datetime, featured, excerpt, category, comments, clearfix


Date format attribute (From v 3.10 onwards)

output_featured_image_before =>
Set to 1 to have the featured image before the post title

output_featured_image_format => thumbnail
Useful to set each  post's featured image format

output_featured_image_class => attachment-thumbnail img-responsive alignleft
Useful to set each  post's image wrapper class


Extending and Customizing the View of your Posts

Dynamic Post Loop Templating

Custom Callback function

In order to have maximum control over the generated markup, you can use your own custom callback templating function.

This can be useful to do if you want to show posts in a carousel, as an example,  or in a special widget that needs a precise HTML syntax.

You'll just need to add a simple function to your codebase, defining how retrieved posts are "printed".

A working example of this is inside this micro plugin, which is meant to be your starter point: Custom Posts Display (download here).

All the plugin does is  to define the lc_get_posts_mycustom_view function.

After activating the plugin, edit via code editor your post loop.

Just add this parameter to the get_posts shortcode:


You will see that the post loop is shown as a linear set of posts, with uppercase titles.

Now duplicating/editing/hacking the PHP function in the plugin, you can have your posts rendered exactly how you want.