Chap
WordPress theme
Get Chap
Posts
by

Posts

The post shortcode can be used to display a secondary loop of posts anywhere using WP_Query.

[posts] shortcode arguments
classes:
Type -
[items|grid|cards]
Items -
[compact|very compact|divided|relaxed|very relaxed]
Grid -
[divided|vertically divided|celled|internally celled|relaxed|very relaxed]
Cards -
[raised|stackable|doubling|centered|fluid|red|green|blue|...]
query:
WordPress query string or keyword (Available keywords: related).
template:
Custom template name.
excerpt:
Custom excerpt length (number of words). Set to 0 to disable excerpts. (Default: 55)
thumbnail:
Custom thumbnail image size (none|thumbnail|small|medium|large|full). (Default: medium)
header:
Posts header size (tiny|small|medium|large|huge). (Default: small)
meta:
Info displayed below post title. (date_author|timeago_author|date|timeago|author|none)
tags:
Set to false to disable tags (categories, tags and sticky post indicator).
read_more:
Set to false to disable the "Read more" link.
pagination:
Set to true to enable pagination.
pagination_alignment:
Pagination alignment (left|center|right).
pagination_menu:
Additional classes for the pagination menu.
next:
Pagination next posts link text (default: "Older posts").
prev:
Pagination previous posts link text (default: "Newer posts").
count:
Specify post count when query is a keyword (default: 4).
header_text:
Header text to display above posts (only displayed if there are posts).
header_classes:
Classes for the header.
content_before:
Content before the posts (only displayed if there are posts).
content_after:
Content after the posts (only displayed if there are posts).
Items
<posts items query="posts_per_page=3&ignore_sticky_posts=1">
Divided items
<posts divided items query="posts_per_page=3&ignore_sticky_posts=1">
Relaxed items
<posts very relaxed items query="posts_per_page=3&ignore_sticky_posts=1">
Grid
<posts grid query="posts_per_page=3&ignore_sticky_posts=1">
Divided grid
<posts divided two column grid query="posts_per_page=4&ignore_sticky_posts=1">
Celled grid
<posts celled two column grid query="posts_per_page=6&ignore_sticky_posts=1">
Internally celled grid
<posts internally celled two column grid query="posts_per_page=6&ignore_sticky_posts=1&meta_key=_thumbnail_id">
Cards
<posts cards query="posts_per_page=3&ignore_sticky_posts=1&meta_key=_thumbnail_id">
Cards count
<posts four stackable cards query="posts_per_page=4&ignore_sticky_posts=1">
Basic pagination
<posts divided items query="posts_per_page=3&ignore_sticky_posts=1" pagination="true">
Advanced pagination
<posts two column grid
	query="posts_per_page=4"
	pagination="true"
	next="Older entries"
	prev="Newer entries"
	pagination_alignment="right"
	pagination_menu="tiny secondary"
>
Content instead of excerpt
<posts one column vertically divided grid
	query="posts_per_page=1&ignore_sticky_posts=1"
	template="templates/loop-content"
	pagination="true"
	next="Older post"
	prev="Newer post"
>
Notes
The loop-content template is designed to show posts with content inside grid loops.
Custom header size
<posts items query="posts_per_page=3&ignore_sticky_posts=1" header="huge">
No thumbnails
<posts three column grid query="posts_per_page=3&ignore_sticky_posts=1&meta_key=_thumbnail_id" excerpt="20" thumbnail="none">
<posts three column grid query="posts_per_page=3&ignore_sticky_posts=1&meta_key=_thumbnail_id" excerpt="0">
No meta
<posts three column grid query="posts_per_page=3&ignore_sticky_posts=1&meta_key=_thumbnail_id" excerpt="20" meta="false">
No tags
<posts three column grid query="posts_per_page=3&ignore_sticky_posts=1&meta_key=_thumbnail_id" excerpt="20" tags="false">
<posts three column grid query="posts_per_page=3&ignore_sticky_posts=1&meta_key=_thumbnail_id" excerpt="20" read_more="false">
Plain
More posts
<subheader dividing>More posts</subheader>
<posts compact marginless items query="posts_per_page=5&ignore_sticky_posts=1" header="tiny" excerpt="0" thumbnail="none" meta="true" tags="false" read_more="false">
<posts query="related" count="5">
Notes
Using the "related" keyword as query will fetch related posts.
You can use custom WP_Query arguments programmatically by using the csc_posts_query filter. Argument 2 of that filter will contain the shortcode's arguments which can be used to identify which instance of the shortcode it is.
<posts id="custom">
add_filter('csc_posts_query', function($query, $args) {
	if(isset($args['id']) && $args['id'] === 'custom') {
		return [
			'category__in' => [2, 6],
			'posts_per_page' => 3,
		];
	}
	return $query;
}, 10, 2);
<posts items query="posts_per_page=3&ignore_sticky_posts=1" header_text="Header shown when there are posts" header_classes="large dividing">
<posts items query="posts_per_page=3&cat=123123" header_text="Header not shown because there are no posts">
Notes
Header can be prepended with the header_text argument for only when there are results.
Wrapper: content before/after
<posts items query="posts_per_page=3&ignore_sticky_posts=1" content_before="{lt}div class='ui primary segment'{gt}" content_after="{lt}/div{gt}">
<posts items query="posts_per_page=3&cat=123123" content_before="{lt}div class='ui primary segment'{gt}" content_after="{lt}/div{gt}">
Notes
You can specify before and after content to wrap the posts in something. The wrapper elements won't be displayed when there are no posts.
That way there won't be an empty container when there are no related posts for example.
<posts three column internally celled stackable grid query="related" count="6" header_text="Related posts" header_classes="large dividing" content_before="{lt}div class='ui segment'{gt}" content_after="{lt}/div{gt}">
Notes
Adding this shortcode to Chap Theme -> Code -> After post content can easily display related posts for all posts.
Header
Previous post
Divider
Next post

Leave a comment

Your email address will not be published. Required fields are marked *

Demos

Documentation

Social media

Facebook
Twitter
Instagram
YouTube

Newsletter

Sign up for Chap newsletter to keep up to date with the latest bug fixes, new features and tutorials.
Chap - WordPress theme using Semantic UI
Powered by Chap.