Chap
WordPress theme
Get Chap
Posts
by

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|celled|internally celled|relaxed|very relaxed]
Cards -
[raised|stackable|doubling|centered|fluid|red|green|blue|...]
query:
WordPress query string.
template:
Custom template name.
excerpt:
Custom excerpt length (number of words). Set to 0 to disable excerpts.
thumbnail:
Custom thumbnail image size (none|thumbnail|small|large|full).
meta:
Set to false to disable meta (date and author).
tags:
Set to false to disable tags (categories, tags and sticky post indicator).
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").
<posts items query="posts_per_page=3&ignore_sticky_posts=1">
<posts divided items query="posts_per_page=3&ignore_sticky_posts=1">
<posts very relaxed items query="posts_per_page=3&ignore_sticky_posts=1">
<posts grid query="posts_per_page=3&ignore_sticky_posts=1">
<posts divided two column grid query="posts_per_page=4&ignore_sticky_posts=1">
<posts celled two column grid query="posts_per_page=6&ignore_sticky_posts=1">
Internally celled grid
Google Accelerated Mobile Pages logo

Setting up AMP
by

Google’s Accelerated Mobile Pages project allows mobile users to access content almost instantly. Instead of displaying your real website Google links to the AMP version of your website. An AMP version is a very lightweight and mobile-oriented version of your site’s content. A lot of the resources, such as scripts, used on AMP websites can…

Read more
How to
ampgooglemobile 
<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">
<posts four stackable cards query="posts_per_page=4&ignore_sticky_posts=1">
<posts divided items query="posts_per_page=3&ignore_sticky_posts=1" pagination="true">
<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

Custom header templates
by
Table of contents
Creating custom templates
Rendering the main menuRendering branding
Chap comes with multiple header templates out of the box.

Header template options

There is an option for a default header template, that will be used on all posts and pages, and a header template override metabox to display a different header on specific pages.

Header template override metabox
Creating custom templates
If you don’t find a suitable header then it’s possible to create your own custom template.

Header templates are located at /wp-content/themes/chap/templates/header-*.php.

Copy a template file that you would like to modify to your child theme templates directory: /wp-content/themes/chap-child/templates/header-custom-name.php.

Now an option to use “Header custom name” template will be available in the Chap options and metabox.

Modify the header-custom-name.php file to your liking.

A few things to keep in mind:

Explore the default header templates to get the general idea of how headers are built.
Knowledge of Semantic UI framework can be helpful.
Rendering the main menu
Rendering the main menu with it's container
PHP
<?php do_action('chap_render_main_menu_container'); ?>
The container .ui.mainmenu.container is used to apply theme options such as “spacing below main menu“. If you choose to omit it then some theme options will simply have no effect.
Rendering the main menu without it's container
PHP
<?php do_action('chap_render_main_menu'); ?>
Rendering the main menu without menu widgets
PHP
<?php do_action('chap_render_main_menu', ['widgets' => false]); ?>
Rendering the main menu on the right side
PHP
<?php do_action('chap_render_main_menu', ['right' => true]); ?>
Rendering branding
Rendering the branding container with header widgets
PHP
<?php do_action('chap_render_branding_container'); ?>
Rendering the brand only
PHP
<div class="ui branding container">
    <?php do_action('chap_render_brand', true); ?>
</div>
The container .ui.branding.container is used to apply theme options such as “spacing from top” and “spacing from menu“. If you choose to omit it then some theme options will simply have no effect.
Rendering the brand logo image only
PHP
<?php do_action('chap_render_brand', false); ?>
Having trouble creating a custom header? Contact support with illustrations about your desired header and we may be able to help you out.
Read more
How to 
<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.
No thumbnails
<posts three column grid query="posts_per_page=3&ignore_sticky_posts=1&meta_key=_thumbnail_id" excerpt="20" thumbnail="none">
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">

Leave a Reply

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.