Posts

Use Posts to display a queried list of WordPress posts in columns, masonry, gallery, or list layouts with full control over content, style, and pagination.

Usage

Use Posts to render queried WordPress content as a grid, masonry layout, image gallery, or vertical list. The module wires WordPress query controls to a configurable layout, exposes the featured image, post info, terms, and excerpt or full content per post, and supports paginated, infinite scroll, or load-more navigation.

Use Posts on blog index pages, archive replacements, related-content sections, taxonomy landing pages, portfolio galleries, and singular templates that surface secondary content. It fits any layout that needs a flexible loop driven by post type, taxonomy, author, or custom field criteria.

Module Settings

The Posts module settings control the loop layout, the featured image and post meta that appear, the visual styling of cards and text, the underlying query, and the pagination behavior at the bottom of the list.

Layout Tab

The Layout tab selects the overall layout style and configures the post container, featured image, post info, terms, and content for each item.

Layout Default: Masonry

Sets the overall layout used to render the loop. Each option exposes its own dedicated styling and posts settings.

• Columns: Renders posts in equal-width, fixed-column rows.
• Masonry: Renders posts in a flexible grid with variable item heights.
• Gallery: Renders only featured images with a hover overlay.
• List: Renders posts in a single vertical stack with optional left or right images.

Posts

The Posts section controls the per-item dimensions, spacing, container element, and title heading tag. Available when Layout is Columns, Masonry, or List.

Posts settings

Equal Heights (Columns Only) Default: No; Supports: Responsive

Forces every post in the same row to share the tallest item's height. Available when Layout is Columns.

Post Width (Masonry Only) Default: 300

Sets the target column width in pixels for each post tile. Available when Layout is Masonry.

Columns (Columns Only) Default: 3; Supports: Responsive

Sets the number of columns rendered per row. Available when Layout is Columns. Default values per breakpoint are 3 (default), 3 (large), 2 (medium), and 1 (responsive).

Post Spacing (Columns and Masonry Only) Default: 60

Sets the gap in pixels between posts. Available when Layout is Columns or Masonry.

Post Spacing (List Only) Default: 40

Sets the bottom margin in pixels between posts. Available when Layout is List.

Post Padding (Columns and Masonry Only) Default: 20

Sets the inner padding in pixels around each post's text content. Available when Layout is Columns or Masonry.

Post Padding (List Only) Default: 0

Sets the inner padding in pixels for each post in a List layout. Available when Layout is List.

Posts Element Default: <li>(unwrapped in divs)

Selects the HTML5 element used for each post item to improve accessibility and machine readability.

• \<div>: Renders each post inside a generic div element.
• \<article>: Renders each post inside an article element, the most semantically appropriate option for blog content.
• \<li>(wrapped in divs): Renders each post as an li element wrapped inside container div elements.
• \<li>(unwrapped in divs): Renders each post as an li element without the additional wrapping div elements.

Posts Element Class for UL

Posts Element Class for UL

Adds a custom CSS class to the parent ul element. This field appears when Posts Element is set to \<li>(unwrapped in divs).

Posts Element Class Supports: Field Connections

Adds a custom CSS class to each post element.

Posts Title Tag Default: <h2>

Selects the heading tag used for each post title. Options are <h1>, <h2>, <h3>, <h4>, <h5>, <h6>, and <p>.

Featured Image

The Featured Image section controls whether the featured image is rendered, where it sits relative to the post content, its size and dimensions, and the fallback used when a post has no thumbnail.

Featured Image settings

Image Default: Show

Shows or hides the featured image for each post.

Image Position (Columns and Masonry Only) Default: Above Title

Places the image above the title or above the rest of the content for Columns and Masonry layouts.

• Above Title: Renders the image above the post title.
• Above Content: Renders the image above the content but below the title.

Image Position (List Only) Default: Above Content

Places the image relative to the post text in a List layout.

• Above Title: Renders the image above the post title.
• Above Content: Renders the image above the content but below the title.
• Left: Floats the image to the left of the entire post.
• Left Content: Floats the image to the left of the content only.
• Right: Floats the image to the right of the entire post.
• Right Content: Floats the image to the right of the content only.

Image Width

Image Width (Beside Layout Only) Default: 33

Sets the percentage of the post width that the image occupies. Appears when Image Position is Left, Left Content, Right, or Right Content.

Image Size Default: medium

Selects the registered WordPress image size used to render the featured image.

Equal Height Image Default: Disabled

Normalizes featured image dimensions across posts.

• Disabled: Uses the natural dimensions of each image.
• Fixed Height: Forces every image to the height set in Image Height.
• Aspect Ratio: Forces every image to a CSS aspect ratio set in Aspect Ratio.

Image Height

Image Height (Fixed Height Only) Default: 200; Supports: Responsive

Sets a fixed image height in pixels when Equal Height Image is Fixed Height.

Aspect Ratio

Aspect Ratio (Aspect Ratio Only) Supports: Responsive

Sets the CSS aspect ratio in width/height notation, for example 16/9. Used when Equal Height Image is Aspect Ratio.

Image Spacing (Columns and Masonry Only) Default: 0

Sets the spacing in pixels between the featured image and the post text. Available when Layout is Columns or Masonry.

Image Spacing (List Only) Default: 0

Sets the spacing in pixels between the featured image and the post text. Available when Layout is List.

Fallback Image

Selects an image used when a post has no featured image. Leave empty to skip the image entirely for those posts.

Post Info

The Post Info section controls which post meta fields appear with each item. Available when Layout is Columns, Masonry, or List.

Post Info settings

Author Default: Show

Shows or hides the post author. Available when Layout is Columns, Masonry, or List.

Enable Author Link

Enable Author Link Default: Yes

Wraps the author name in a link to the author archive when Author is Show.

Date Default: Show

Shows or hides the post date.

Date Format

Date Format Default: Default

Selects the format used to render the post date when Date is Show. Default uses the WordPress general date format. Other options are formatted samples such as M j, Y, F j, Y, m/d/Y, m-d-Y, d M Y, d F Y, Y-m-d, and Y/m/d.

Comments (List Only) Default: Show

Shows or hides the comment count next to each post. Available when Layout is List.

Comments (Columns and Masonry Only) Default: Hide

Shows or hides the comment count next to each post. Available when Layout is Columns or Masonry.

Separator Default: |

The character or string rendered between the visible post info items.

Post Terms

The Post Terms section controls the rendering of taxonomy terms attached to each post. Available when Layout is Columns, Masonry, or List.

Post Terms settings

Terms Default: Hide

Shows or hides the list of hierarchical taxonomy terms assigned to each post.

Terms Label

Terms Label Default: Posted in

The label rendered before the list of terms when Terms is Show.

Terms Separator

Terms Separator Default: ,

The character or string rendered between individual terms when Terms is Show.

Post Content

The Post Content section controls the rendered post body and the optional read-more link. Available when Layout is Columns, Masonry, or List.

Post Content settings

Content Default: Show

Shows or hides the post content area for each item.

Content Type (List Only) Default: Excerpt

Selects whether the post body renders as a trimmed excerpt or the full post content. Available when Layout is List.

• Excerpt: Renders the WordPress excerpt, optionally trimmed to a fixed word count.
• Full Text: Renders the complete post content.

Content Length

Content Length (Excerpt Only)

Sets the maximum number of words rendered in the excerpt when Content Type is Excerpt. Leave empty to use the default WordPress excerpt length.

More Link Default: Hide

Shows or hides an inline read-more link at the end of each post.

More Link Text

More Link Text Default: Read More

The text used for the inline read-more link when More Link is Show.

Style Tab

The Style tab controls the visual appearance of post cards, text, gallery overlays, and the gallery hover icon.

Posts

The Posts section controls per-card styling. Available when Layout is Columns, Masonry, or List.

Posts settings

Post Alignment

Sets the horizontal text alignment used inside each post.

Post Background Color Supports: Field Connections

Sets the background color of each post container.

Border settings

Border settings control border style, width, color, radius, and related responsive border controls where available.

Text

The Text section controls the typography and color of the title, post info, content, and inline links. Available when Layout is Columns, Masonry, or List.

Text settings

Title Color Supports: Field Connections

Sets the color of the post title link.

Title Typography Supports: Responsive

The font settings for the post title.

Typography settings

Typography settings control font family, size, weight, line height, letter spacing, text transform, and responsive text styling where available.

Post Info Color Supports: Field Connections

Sets the color of post info text such as the author, date, and comment count.

Post Info Typography Supports: Responsive

The font settings for the post info row.

Typography settings

Typography settings control font family, size, weight, line height, letter spacing, text transform, and responsive text styling where available.

Content Color Supports: Field Connections

Sets the color of the post content text.

Content Typography Supports: Responsive

The font settings for the post content.

Typography settings

Typography settings control font family, size, weight, line height, letter spacing, text transform, and responsive text styling where available.

Link Color Supports: Field Connections

Sets the color of inline links inside the post content.

Link Hover Color Supports: Field Connections

Sets the color of inline links inside the post content on hover.

Hover Transition (Gallery Only) Default: Fade

Sets the transition used when the gallery overlay appears on hover. Available when Layout is Gallery.

• Fade: Cross-fades the overlay over the image.
• Slide Up: Slides the overlay in from the bottom.
• Slide Down: Slides the overlay in from the top.
• Scale Up: Scales the overlay in from a smaller size.
• Scale Down: Scales the overlay in from a larger size.

Overlay Colors (Gallery Only)

The Overlay Colors section styles the text and background of the hover overlay rendered on top of each gallery image. Available when Layout is Gallery.

Overlay Colors settings

Overlay Text Color Default: ffffff; Supports: Field Connections

Sets the color of the post title displayed inside the overlay.

Overlay Background Color Default: 333333; Supports: Field Connections

Sets the background color of the overlay panel rendered behind the title text.

Icons (Gallery Only)

The Icons section adds an optional decorative icon to each gallery item. Available when Layout is Gallery.

Icons settings

Use Icon for Posts Default: No

Enables a per-post icon rendered inside the gallery overlay.

Post Icon

Post Icon (Use Icon for Posts Only) Supports: Field Connections

Selects the icon used for each gallery item when Use Icon for Posts is Yes.

Post Icon Position

Post Icon Position (Use Icon for Posts Only) Default: Above Text

Places the icon above or below the gallery title text when Use Icon for Posts is Yes. Options are Above Text and Below Text.

Post Icon Color

Post Icon Color (Use Icon for Posts Only) Supports: Field Connections

Sets the icon color when Use Icon for Posts is Yes.

Post Icon Size

Post Icon Size (Use Icon for Posts Only) Default: 24

Sets the icon size in pixels when Use Icon for Posts is Yes.

DuoTone Icon Primary Color Supports: Field Connections

For Font Awesome DuoTone icons only: the primary color applied to the icon.

DuoTone Icon Secondary Color Supports: Field Connections

For Font Awesome DuoTone icons only: the secondary color applied to the icon.

Query Tab

The Query tab configures the source of the loop, the post type, sorting, dynamic and custom field filters, and how many posts are returned.

Source Default: Custom Query

Selects whether the module renders its own custom query or inherits the current page's main WordPress query.

• Custom Query: Builds a query using the post type, ordering, dynamic filters, and custom field filters configured in this tab.
• Main Query: Uses the current page's main query, for example the archive query on a category page or the search query on a search results page.

Custom Query

The Custom Query section configures the post type, sorting, offset, and self-exclusion behavior used when Source is Custom Query.

Custom Query settings

Post Type Default: Post

Selects one or more registered post types used in the query.

Ordering settings

Ordering settings control how queried posts or items are sorted, such as by date, title, menu order, or custom ordering options where available.

Offset Default: 0

Skips this many matching posts from the start of the query before returning results.

Exclude Current Post Default: No

Excludes the post being viewed from the query when the module renders inside a singular template or Themer layout.

Filtering settings

Filtering settings control which posts, terms, authors, or content types are included or excluded from the module output.

Custom field filter settings

Custom field filters limit queried content by matching custom field keys, values, and comparison rules where available.

Pagination Tab

The Pagination tab controls how additional pages of results are displayed and includes the styling controls for the load-more button.

Pagination Style Default: Numbers

Selects how additional posts are loaded after the first page.

• Numbers: Renders standard numbered pagination links below the loop.
• Scroll: Loads additional posts automatically as the visitor scrolls toward the end of the loop.
• Load More Button: Renders a button below the loop that loads additional posts on click.
• None: Hides pagination and displays only the first page of results.

Auto-scroll on Pagination

Auto-scroll on Pagination (Numbers Only) Default: Yes

Scrolls the page to the top of the loop when a new page of results is loaded. Appears when Pagination Style is Numbers.

Posts Per Page Default: 10

Sets the maximum number of posts returned per page of results.

No Results Message Default: Sorry, we couldn't find any posts. Please try a different search.

The message displayed when the query returns no posts.

Show Search Default: Show

Renders a WordPress search form below the no-results message when no posts are found.

Load More Button (Load More Button Only)

The Load More Button section configures the button text and the loading-state label used during AJAX requests. Available when Pagination Style is Load More Button.

Load More Button settings

Button Text Default: Load More

The label displayed on the load-more button.

Loading text

The label displayed on the button while the next page of posts is being fetched. Falls back to Loading... when left empty.

Button Icon (Load More Button Only)

The Button Icon section adds an optional icon to the load-more button. Available when Pagination Style is Load More Button.

Button Icon settings

Button Icon Supports: Field Connections

Selects the icon rendered next to the button text.

Button Icon Position

Button Icon Position Default: Before Text

Places the icon before or after the button text when an icon is selected. Options are Before Text and After Text.

Button Icon Visibility

Button Icon Visibility Default: Always Visible

Keeps the icon visible or fades it in on hover when an icon is selected. Options are Always Visible and Fade In On Hover.

Button Style (Load More Button Only)

The Button Style section sets the size and inner spacing of the load-more button. Available when Pagination Style is Load More Button.

Button Style settings

Button Width Default: Auto

Sets the button width to Auto or Full Width.

Button Padding Supports: Responsive, Link Values

The inner spacing of the load-more button.

Button Text (Load More Button Only)

The Button Text section controls the typography and color of the load-more button label. Available when Pagination Style is Load More Button.

Button Text settings

Button Text Color Supports: Field Connections

Sets the text color of the button label.

Button Text Hover Color Supports: Field Connections

Sets the text color of the button label on hover and focus.

Button Typography Supports: Responsive

The font settings for the button label.

Typography settings

Typography settings control font family, size, weight, line height, letter spacing, text transform, and responsive text styling where available.

Button Background (Load More Button Only)

The Button Background section controls the background color, fill style, and hover transition of the load-more button. Available when Pagination Style is Load More Button.

Button Background settings

Button Background Color Supports: Field Connections

Sets the default background color of the button.

Button Background Hover Color Supports: Field Connections

Sets the background color of the button on hover and focus.

Button Background Style Default: Flat

Selects a Flat or Gradient background style for the button.

Button Background Animation Default: Disabled

Enables or disables the transition between the normal and hover background colors. Options are Disabled and Enabled.

Button Border (Load More Button Only)

The Button Border section controls the border style and hover color of the load-more button. Available when Pagination Style is Load More Button.

Button Border settings

Button Border Supports: Responsive

The border style, width, color, and radius for the load-more button.

Button Border Hover Color Supports: Field Connections

Sets the border color of the button on hover and focus.

Advanced tab

The Advanced tab includes all the standard settings for margins, visibility, animations, and advanced HTML configurations.

See the Advanced tab section for more information.