[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

  1. listing_only – If set to on, only the listing will be displayed without additional layout.
    • Default: off.
    • Options: on, off. Specify one only.
  2. layout – The layout type.
    • Default: grid.
    • Options: grid, carousel.
  3. 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-60split-50-50split-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.
  4. per_row – Number of posts to display per page.
    • Default: 3.
    • Options: 16. Specify one only.
  5. per_page – Number of posts to display per page.
    • Options: Any numeric value. Specify one only.
  6. pagination – Pagination type.
    • Default: loadmore.
    • Options: loadmore, pagination. Specify one only.
  7. search_filter – Enable or disable search filter.

GRID LAYOUT

  1. 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.

CAROUSEL LAYOUT

  1. carousel_layout – The carousel layout style.
    • Default: default-carousel-layout.
  2. autoplay – Enable or disable autoplay for the carousel.
    • Default: off.
    • Options: on, off. Specify one only.
  3. slider_speed – Autoplay speed in seconds.
    • Default: 6.
    • Options: Any numeric value.
  4. slider_arrows – Show or hide navigation arrows.
    • Default: on.
    • Options: on, off. Specify one only.
  5. slider_dots – Show or hide navigation dots.
    • Default: on.
    • Options: on, off. Specify one only.

DESIGN

  1. element_width – Width of the element.
    • Default: default-width.
    • Options: default-width, small-container, medium-container, large-container, row-fluid. Specify one only.
  2. alignment – Alignment of the content.
    • Default: default-alignment.
    • Options: default-alignment, text-left, text-center, text-right, text-justified. Specify one only.
  3. 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.
  4. background – Background color or image for the element.
    • Options: Any image URL.
  5. classes – Adds an HTML wrapper class so you can modify the specific output with custom CSS. Use spaces to separate
  6. id – Custom ID for the element.

HEADER

  1. heading – Main heading text on the post element section.
    • Options: Any text value.
  2. heading_size – Heading size.
    • Default: h2.
    • Options: h1, h2. Specify one only.
  3. sub_heading – Subheading text.
    • Options: Any text value.

CONTENT

  1. meta – Determines which meta information to display for each post.
    • Default: description.
    • Options: date, author, category, tag, description. Use commas , to separate values.
  2. content – Specifies the type of content to display for each post.
    • Default: description.
    • Options: description, excerpt. Specify one only.
  3. max_words – Limits the number of words displayed in the post description.
    • Default: 20.
    • Options: Any numeric value.
  4. link_type – Defines how the link to the post is displayed.
    • Default: button.
    • Options: button, text, none. Specify one only.
  5. show_in_modal – Determines whether the post content should be displayed in a modal (popup) window.
    • Default: off.
    • Options: on, off. Specify one only.
  6. limit – Limits the total number of posts to display. Leave empty to display all matching posts.
    • Options: Any numeric value.
  7. orderby – Specifies the criteria for ordering the posts.
    • Default: date.
    • Options: id, date, title, menu_order, rand. Specify one only.
  8. order – Specifies the order of the posts.
    • Default: desc.
    • Options: asc, desc. Specify one only.

FILTER

  1. featured – Filters posts to display only featured posts.
    • Default: no.
    • Options: no, yes. Specify one only.
  2. categories – Filter posts by categories. Comma-separated list of category IDs or slugs.
  3. tags – Filter posts by tags. Comma-separated list of tag IDs or slugs.
  4. 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.
Custom Styling: Use the 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.