Post Widget
Post Widget Settings
Posts Per Page
Define the number of posts displayed per page.
Details: Set the number of posts to show per page, with a default of 3. Options range from -1 to 100, where -1 displays all posts.
Tips:
- Use -1 for small datasets to avoid pagination.
- Balance performance and content density for optimal user experience.
Layout
Choose the layout for displaying posts.
Details: Select a layout to control the presentation of posts on the page.
Options:
| Layout | Description |
|---|---|
| Grid | Arranges posts in a uniform grid. |
| Masonry | Creates a dynamic, staggered layout. |
| Carousel | Displays posts in a sliding carousel. |
Tips:
- Choose Grid for clean, structured displays.
- The Trigger Breakpoint option can be used to alternate between the carousel and the grid layout based on the screen width.
Post Skin
Select the visual style for posts.
Details: Choose a skin to customize the appearance of each post.
Options:
| Skin | Description |
|---|---|
| Classic | Standard layout with balanced text and images. |
| On Side | Places image and content side by side. |
| Banner | Emphasizes large images with minimal text. |
| Template Grid | Uses predefined templates for grid layouts. |
| Custom HTML | Allows fully customized HTML layouts. |
Keep Sideways on Mobile
Maintain the “On Side” layout on mobile devices.
Details: When enabled, the “On Side” skin retains its side-by-side layout on mobile. Available only when “On Side” is selected as the post skin.
Columns
Set the number of columns for the grid layout.
Details: Choose 1 to 8 columns for the grid, with separate defaults for tablet and mobile views.
Options:
| Option | Description |
|---|---|
| 1–8 Columns | Define column count for desktop, tablet, and mobile. |
Post HTML Tag
Choose the HTML tag for each post.
Details: Select the semantic tag for post containers.
Options:
| Tag | Description |
|---|---|
| div | Generic container for flexible styling. |
| article | Semantic tag for independent content. |
Tips:
- Use article for SEO-friendly blog or product posts.
- Choose div for non-semantic layouts.
Title HTML Tag
Choose the HTML tag for post titles.
Details: Select the tag for post titles to control semantics and styling.
Options:
| Tag | Description |
|---|---|
| h1 | Main heading for high SEO priority. |
| h2 | Secondary heading for sub-sections. |
| h3 | Tertiary heading for smaller sections. |
| h4 | Lower-level heading for nested content. |
| h5 | Minor heading for less emphasis. |
| h6 | Smallest heading for minimal emphasis. |
| div | Non-semantic container for styling. |
| span | Inline container for specific styling. |
| p | Paragraph tag for text-based titles. |
Tips:
- Use h2 or h3 for balanced SEO and hierarchy.
- Choose span for inline styling needs.
Default Template
Select the default template for posts.
Details: Choose a predefined template for the “Template Grid” skin. Available only when “Template Grid” is selected.
Extra Templates
Add additional templates for the grid layout.
Details: Configure extra templates with settings for template selection, position, application (once or repeated), and column/row span.
Options:
| Setting | Description |
|---|---|
| Template | Choose a predefined template. |
| Position | Set the template’s position in the grid. |
| Apply Once | Apply the template only once or repeatedly. |
| Column Span | Define the number of columns the template spans. |
| Row Span | Define the number of rows the template spans. |
Custom HTML
Define custom HTML for post layouts.
Details: Enter custom HTML using tags like #TITLE#, #CONTENT#, #EXCERPT#, #PERMALINK#, and #IMAGE#. Available only when “Custom HTML” is selected.
Query
Customize the query used to retrieve posts.
Details: Configure how posts are selected, ordered, and filtered for display.
Query Type
Select the type of query for fetching posts.
Details: Choose how posts are retrieved based on specific criteria.
Options:
| Query Type | Description |
|---|---|
| Custom Query | Define custom conditions for fetching posts. |
| Main Query | Use the default WordPress query for the current page. |
| User Query | Fetch users instead of posts. |
| Taxonomy Query | Fetch taxonomies instead of posts. |
Tips:
- Use Custom Query for tailored post filtering.
- Choose Main Query for archive or search pages.
Post Type
Choose the type(s) of posts to retrieve.
Details: Select multiple post types, such as post, page, or custom types like product (if using WooCommerce).
Post Status
Choose the status of posts to query.
Details: Select post statuses to filter retrieved content.
Options:
| Status | Description |
|---|---|
| Published | Publicly available posts. |
| Pending | Posts awaiting review. |
| Draft | Unpublished posts. |
| Private | Posts restricted to specific users. |
| Trashed | Posts moved to trash. |
Order By
Define the field for ordering posts.
Details: Select the criterion for sorting retrieved posts.
Options:
| Order By | Description |
|---|---|
| Date | Sort by publication date. |
| Last Modified | Sort by last modified date. |
| Random | Sort posts randomly. |
| Comment Count | Sort by number of comments. |
| Title | Sort alphabetically by title. |
| Post ID | Sort by post ID. |
| Author | Sort by post author. |
| Menu Order | Sort by custom menu order. |
| Relevance | Sort by relevance for search results. |
| Custom Field | Sort by a custom field value. |
| Custom Field (Numeric) | Sort by a numeric custom field value. |
Field Key
Specify the custom field meta key for sorting.
Details: Enter the meta key (e.g., _price for WooCommerce products) when ordering by custom fields.
Order
Define the sorting direction.
Details: Choose ascending or descending order for posts.
Options:
| Order | Description |
|---|---|
| Descending | Sort from newest to oldest (default). |
| Ascending | Sort from oldest to newest. |
Post Offset
Skip a specified number of posts in the query.
Details: Set the number of posts to skip for pagination or custom displays.
Carousel Settings
Configure the carousel layout and behavior for post displays.
Details: Customize breakpoints, slide visibility, navigation, and effects for the carousel layout, available when “Carousel” is selected under Layout.
Options:
| Setting | Purpose | Details |
|---|---|---|
| Trigger Breakpoint | Set the breakpoint for enabling the carousel layout. | Select the screen size where the carousel activates. Available when “Carousel” is selected. |
| Slides Per View | Define the number of visible slides. | Set 1 to 8.5 slides (0.5 increments for partial slides), with separate defaults for tablet and mobile. |
| Slides to Scroll | Set the number of slides to scroll at a time. | Choose 1 to 8 slides, with separate defaults for tablet and mobile. |
| Slide Gap | Define the space between slides. | Set the gap from 0 to 60 pixels (default: 20). |
| Arrow | Enable or disable navigation arrows. | When enabled, arrows allow users to navigate carousel slides. |
| Pagination | Enable or disable pagination indicators. | When enabled, pagination displays below the carousel. |
| Pagination Type | Choose the pagination style for the carousel. | Select from Bullets (small dots), Fraction (current/total slide numbers), or Progressbar (progress bar). Available when pagination is enabled. |
| Transition Effect | Choose the carousel transition effect. | Select from Slide (standard horizontal transition) or Fade (smooth fading effect). |
| Animation Speed | Set the speed of slide transition animations. | Choose 1 to 10,000 milliseconds (default: 600). |
| Autoplay | Enable or disable automatic slide transitions. | When enabled, slides transition automatically. |
| Autoplay Speed | Set the delay between autoplay transitions. | Choose 1 to 10,000 milliseconds (default: 3,000). |
| Pause on Hover | Pause autoplay when users hover over the carousel. | When enabled, hovering pauses automatic transitions. |
| Enable Touch Move | Allow swipe navigation for the carousel. | When enabled, users can swipe to navigate slides. |
| Enable Mousewheel | Allow mousewheel navigation for the carousel. | When enabled, users can scroll slides using the mousewheel. |
| Infinite Loop | Enable continuous looping of carousel slides. | When enabled, the carousel loops endlessly. |
| Apply Parallax | Enable a parallax effect for carousel slides. | By default, the carousel does not apply a parallax effect. To enable it, add the required data attributes to the slide widgets, as detailed in the Swiper API documentation at https://swiperjs.com/swiper-api#parallax. |
| Adaptive Height | Adjust carousel height based on slide content. | When enabled, the carousel height adapts to the current slide. |
| Slider Height | Set a fixed height for the carousel. | Choose a height in pixels or viewport height (vh, default: 500px). Available when “Adaptive Height” is disabled. |
| Center Mode | Center the current slide in the viewport. | When enabled, the active slide is centered. |
| Centered Slide Bounds | Ensure slides stay within viewport bounds. | When enabled, slides are centered within the viewport. |
| Lazy Load | Enable lazy loading for carousel slides. | When enabled, slides load only when in view, improving performance. Not recommended for carousels above the fold. |
Content Settings
Content
Configure the content displayed in each post.
Details: Select content types to display within posts.
Options:
| Content Type | Description |
|---|---|
| Title | Displays the post title. |
| Content | Shows the full post content. |
| Excerpt | Displays a short post summary. |
| Custom Field/ACF | Shows custom field data, like _price for WooCommerce. |
| Taxonomy | Displays associated taxonomies, like categories or tags. |
| HTML | Allows custom HTML content. |
| Post Meta | Shows meta data like author or date. |
| Read More | Adds a link to the full post. |
| Bookmark | Allows users to bookmark posts. |
| Edit Options | Provides post editing controls. |
| Product Price | Displays product price (WooCommerce). |
| Product Rating | Shows product ratings (WooCommerce). |
| Buy Now | Adds a buy button (WooCommerce). |
| Product Badge | Displays badges like “On Sale” (WooCommerce). |
Bookmark Options
Configure options for pinning and unpinning posts.
Details: Customize the display, icons, and text for bookmarking posts, with pinned post IDs for logged-out users stored in a cookie named post_id_list and for logged-in users saved as user meta with the same key.
Options:
| Setting | Purpose | Details |
|---|---|---|
| Pin Post | Enable the bookmark option for posts. | When enabled, allows users to pin posts for quick access. Available when “Bookmark Options” is selected. |
| Pin Icon | Select an icon for the bookmark option. | Choose an icon. Available when “Pin Post” is enabled. |
| Bookmarked Text | Set text for the “Pin” button. | Define the button text (default: “Pin”). Available when “Pin Post” is enabled. |
| Unbookmarked Text | Set text for the “Unpin” button. | Define the button text (default: “Unpin”). Available when “Pin Post” is enabled. |
| Hide for Logged-Out Users | Hide the bookmark option for logged-out users. | When enabled, restricts pinning to logged-in users. Available when “Pin Post” is enabled. |
Edit Options
Configure options for pinning, republishing, unpublishing, editing, and deleting posts.
Details: Customize the display, icons, and text for post interaction options, with pinned post IDs for logged-out users stored in a cookie named post_id_list and for logged-in users saved as user meta with the same key.
Options:
| Setting | Purpose | Details |
|---|---|---|
| Display Republish | Enable the republish option for posts. | When enabled, allows republishing posts. Available when “Edit Options” is selected. |
| Republish Icon | Select an icon for the republish option. | Choose an icon. Available when “Edit Options” and “Display Republish” are enabled. |
| Republish Text | Set text for the republish option. | Define the text (default: “Republish”). Available when “Edit Options” and “Display Republish” are enabled. |
| Display Unpublish | Enable the unpublish option for posts. | When enabled, allows unpublishing posts. Available when “Edit Options” is selected. |
| Unpublish Icon | Select an icon for the unpublish option. | Choose an icon. Available when “Edit Options” and “Display Unpublish” are enabled. |
| Unpublish Text | Set text for the unpublish option. | Define the text (default: “Unpublish”). Available when “Edit Options” and “Display Unpublish” are enabled. |
| Display Edit | Enable the edit option for posts. | When enabled, allows editing posts. Available when “Edit Options” is selected. |
| Edit URL | Set the URL for editing posts. | Define the edit URL using #ID# for post ID (default: “/your-edit-page?#ID#”). Available when “Edit Options” and “Display Edit” are enabled. |
| Edit Icon | Select an icon for the edit option. | Choose an icon. Available when “Edit Options” and “Display Edit” are enabled. |
| Edit Text | Set text for the edit option. | Define the text (default: “Edit”). Available when “Edit Options” and “Display Edit” are enabled. |
| Display Delete | Enable the delete option for posts. | When enabled, allows deleting posts. Available when “Edit Options” is selected. |
| Delete Icon | Select an icon for the delete option. | Choose an icon. Available when “Edit Options” and “Display Delete” are enabled. |
| Delete Text | Set text for the delete option. | Define the text (default: “Delete”). Available when “Edit Options” and “Display Delete” are enabled. |
Pagination Settings
Pagination
Enable or disable pagination for posts.
Pagination Type
Choose the pagination style.
Details: Select the type of pagination controls.
Options:
| Type | Description |
|---|---|
| Numeric | Shows numbered page links. |
| Next/Previous | Displays next and previous arrows. |
| Load More Button | Adds a button to load additional posts. |
| Infinite Scroll | Loads posts automatically on scroll. |
Tips:
- Use Infinite Scroll for seamless browsing.
- Choose Numeric for clear page navigation.
Items Per Page
Set the number of posts per page.
Details: Define the number of items displayed (default: 10).
Load More Text
Set text for the “Load More” button.
Details: Define the button text (default: “Load More”). Available when “Load More Button” is selected.
Infinite Scroll Trigger
Choose how infinite scroll is triggered.
Details: Select the trigger method. Available when “Infinite Scroll” is selected.
Options:
| Trigger | Description |
|---|---|
| Scroll | Loads posts automatically on scroll. |
| Button Click | Loads posts when a button is clicked. |
Tips:
- Use Scroll for seamless user experience.
- Choose Button Click for controlled loading.