[post_element]
This is the main shortcode for displaying the posts listing section on a page.
Product
Shortcode Attributes
There are a number of shortcode attributes available which you can use to customize the output.
GENERAL LAYOUT
- listing_only – If set to
on, only the listing will be displayed without additional layout.- Default:
off. - Options:
on,off. Specify one only.
- Default:
- layout – The layout type.
- Default:
grid. - Options:
grid,carousel.
- Default:
- display – The display style.
- Default:
image-above-content. - Options:
- ORDINARY DISPLAYS:
image-above-content,image-overlay-content,content-only. Specify one only. - SPLIT DISPLAYS:
image-left-content,image-right-content. Specify 2 (Split and Split Size). Use commas to separate. - SPLIT DISPLAY SIZES (Required on Split Display):
split-25-75,split-40-60,split-50-50,split-60-40. Specify 3(Split, Split Size, and Alternate Split). Use commas to separate. - ALTERNATE SPLIT DISPLAY (Can use only on Split-50-50 and on the opposite option of the Split Display):
then-left,then-right.
- ORDINARY DISPLAYS:
- Default:
- per_row – Number of posts to display per page.
- Default:
3. - Options:
1–6. Specify one only.
- Default:
- per_page – Number of posts to display per page.
- Options: Any numeric value. Specify one only.
- pagination – Pagination type.
- Default:
loadmore. - Options:
loadmore,pagination. Specify one only.
- Default:
- search_filter – Enable or disable search filter.
GRID LAYOUT
- grid_layout – The grid layout style.
- Default:
default-grid-layout. - Options:
default-grid-layout,grid-layout-1,grid-layout-2,grid-layout-3,masonry-layout-1. Specify one only.
- Default:
CAROUSEL LAYOUT
- carousel_layout – The carousel layout style.
- Default:
default-carousel-layout.
- Default:
- autoplay – Enable or disable autoplay for the carousel.
- Default:
off. - Options:
on,off. Specify one only.
- Default:
- slider_speed – Autoplay speed in seconds.
- Default:
6. - Options: Any numeric value.
- Default:
- slider_arrows – Show or hide navigation arrows.
- Default:
on. - Options:
on,off. Specify one only.
- Default:
- slider_dots – Show or hide navigation dots.
- Default:
on. - Options:
on,off. Specify one only.
- Default:
DESIGN
- element_width – Width of the element.
- Default:
default-width. - Options:
default-width,small-container,medium-container,large-container,row-fluid. Specify one only.
- Default:
- alignment – Alignment of the content.
- Default:
default-alignment. - Options:
default-alignment,text-left,text-center,text-right,text-justified. Specify one only.
- Default:
- theme – Theme or style for the section.
- Default:
default-section. - Options:
default-section,light-section,grey-section,dark-section,theme-section,second-theme-section. Specify one only.
- Default:
- background – Background color or image for the element.
- Options: Any image URL.
- classes – Adds an HTML wrapper class so you can modify the specific output with custom CSS. Use spaces to separate
- id – Custom ID for the element.
HEADER
- heading – Main heading text on the post element section.
- Options: Any text value.
- heading_size – Heading size.
- Default:
h2. - Options:
h1,h2. Specify one only.
- Default:
- sub_heading – Subheading text.
- Options: Any text value.
CONTENT
- meta – Determines which meta information to display for each post.
- Default:
description. - Options:
date,author,category,tag,description. Use commas,to separate values.
- Default:
- content – Specifies the type of content to display for each post.
- Default:
description. - Options:
description,excerpt. Specify one only.
- Default:
- max_words – Limits the number of words displayed in the post description.
- Default:
20. - Options: Any numeric value.
- Default:
- link_type – Defines how the link to the post is displayed.
- Default:
button. - Options:
button,text,none. Specify one only.
- Default:
- show_in_modal – Determines whether the post content should be displayed in a modal (popup) window.
- Default:
off. - Options:
on,off. Specify one only.
- Default:
- limit – Limits the total number of posts to display. Leave empty to display all matching posts.
- Options: Any numeric value.
- orderby – Specifies the criteria for ordering the posts.
- Default:
date. - Options:
id,date,title,menu_order,rand. Specify one only.
- Default:
- order – Specifies the order of the posts.
- Default:
desc. - Options:
asc,desc. Specify one only.
- Default:
FILTER
- featured – Filters posts to display only featured posts.
- Default:
no. - Options:
no,yes. Specify one only.
- Default:
- categories – Filter posts by categories. Comma-separated list of category IDs or slugs.
- tags – Filter posts by tags. Comma-separated list of tag IDs or slugs.
- posts – Specific posts to display. Comma-separated list of post IDs.
Example Usage
[post_element per_row="3" theme="dark-section" heading="Recent News" content="excerpt" max_words="30"]
[post_element layout="carousel" autoplay="on" slider_speed="5" heading="Featured Posts" featured="yes"]
| Example 1: This example displays the posts in a grid layout with 3 posts per row, the section uses a dark-section, a heading titled “Recent News” is displayed at the top of the post listing, each post shows its excerpt, limited to 30 words. Example 2: This example displays the posts in a carousel (slider) layout, the carousel will automatically slide through the posts every 5 seconds, a heading titled “Featured Posts” is displayed at the top of the carousel, only featured posts are included in the carousel. |
classes attribute to add custom CSS classes for advanced styling.Pagination: The
pagination attribute allows you to control how additional posts are loaded (e.g., loadmore).Filters: Use the
categories, tags, and posts attributes to filter the displayed posts.