Black Friday Deal - 50% OFF on all plans

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

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

Using a Custom Callback Display function

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

A working example is in this extra barebones plugin, which is meant for hacking: Custom Posts Display (download here).

Just very few lines of code defining the function lc_get_posts_mycustom_view.

After activating the plugin, edit your post loop and set the output_view parameter to lc_get_posts_mycustom_view (via code editor or GUI)

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.

Go to Next Chapter