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:
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
orderby => date
order => DESC
post_type => post
post_status => publish
suppress_filters => true
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.
Name of CSS class which will wrap the whole post list
Name of CSS class which will be used for the link
output_heading_tag => h2
Heading tag to use for the article title
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
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 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.
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.