The Porto Related Posts element is a dedicated widget used inside Porto Single Post Builder templates to display contextually related content below or alongside a post.
It automatically queries related posts based on taxonomy relationships and renders them using a selected Post Mini Type Layout, ensuring visual consistency with other Porto listing elements.
This element is optimized for single post pages only and is commonly used to improve content discovery, reduce bounce rate, and keep visitors engaged with additional relevant posts.
Porto Related Posts Element Options
CONTENT TAB — Posts Selector (Query)
These options determine how related posts are sorted.
- Post Mini Type Layout
- What it does: Selects the mini layout used to render each related post item. This layout is created separately using Porto Post Type Builder.
- When to use: Use different layouts depending on content type (e.g., Blog cards with excerpt and meta, Minimal title + image layouts, Media-focused cards).
- Notes: The Post Mini Type must be created previously using Porto Post Type builder.
- Count
- Controls how many related posts are displayed.
- Order By
- Common options:
Date,Modified,ID,Menu Order,Title,Random,Price,Popularity,Rating, etc.
- Order
-
ASCorDESC. For recent-first, useDESCondate.
CONTENT TAB — Layout & Display
These options control how the query results are displayed.
- View
- Available rendering modes: Grid, List, Masonry, Slider (names may vary by Porto version).
- Choose Slider to enable the slider-specific options in the Style tab.
- Columns / Columns on Tablet / Columns on Mobile
- Number of columns at desktop / tablet / mobile breakpoints.
- Example:
4 / 3 / 2typical for product grids. - Use conservative numbers on mobile for readability (1–2 columns).
- Column Spacing
- Spacing (gutter) between columns. Enter px value or use provided presets.
- Small gutters for dense cards; larger gutters for airy design.
- Add Half Column
- When enabled, allows certain layouts to insert a half-width item as part of creative grids — useful for asymmetric designs.
- Works best with Post Mini Type Layouts built to support half-width.
- Image Size
- Controls the image size rule used for thumbnails (e.g.,
thumbnail,medium,large,full, or Porto presets likeblog-masonry-small). - Match the image size to your card size for performance and correct cropping.
- Custom Class
- Add one CSS class (or multiple space-separated) to the widget container for custom styling.
STYLE TAB
These options control visual appearance and interactive behavior.
- Slider Options (shown when View = Slider)
- Slides to Show (desktop / tablet / mobile)
- Slides to Scroll
- Autoplay (on/off) and Autoplay Speed
- Speed (transition ms)
- Pause on Hover
- Arrows / Dots (show navigation)
- Center Mode / Variable Width (for creative sliders)
These options let you fine-tune behavior and responsiveness for carousel presentation.
Behavior & Rules
- The current post is automatically excluded from results
- Related logic is based on shared taxonomy terms
- The Post Mini Type Layout controls which fields are visible
- Image size selection directly impacts performance
- This element should only be used inside Single Post templates
Best Practices
- Use concise layouts to avoid overwhelming readers
- Limit the number of related posts for better focus
- Match image size to card dimensions
- Combine with Post Navigation for stronger internal linking
- Always test on mobile devices
