web_carousel_feed Shortcode
The web_carousel_feed shortcode displays current public content using a saved query or ordered post IDs and a shared feed template. The Carousel Feed block uses the same renderer and conditional assets. Existing shortcodes continue to render when the Legacy editor is disabled.
The attributes below match the current Page Builder controls and public output. Use raw syntax only for reviewed content that cannot be maintained through the visual controls.
Usage
[web_carousel_feed]Attributes
| Attribute | Default | Accepted values | Purpose |
|---|---|---|---|
query_type |
custom |
custom, single_posts |
The default query gets 12 posts per page ordered by date descending. Custom queries can be created in Theme settings. |
single_posts |
— | Comma-separated positive post IDs | Complete ordered selection. A single ID is supported; an empty selection displays nothing. Available when query_type is single_posts. |
custom_query |
1 |
String unless stated otherwise | Controls the custom queries. Available when query_type is custom. |
only_related |
— | yes |
Controls the only related to current post. |
related_display_mode |
mix |
mix, split |
Controls the related posts display mode. Available when only_related is yes. |
related_split_{post_type}_title |
Localized Related {type label} |
Plain text | Heading and accessible label for a split related group; for example related_split_page_title. Empty suppresses the heading. |
layout |
default |
default or a configured custom feed-template slug |
Selects the template used for each carousel result. |
web_carousel_style |
style_2 |
style_1, style_2, style_3 |
Centered content, multiple columns, or wide slider. |
web_carousel_elements_align |
center |
center, left |
Controls the carousel elements align. Available when web_carousel_style is style_2. |
web_carousel_contain |
— | yes |
If checked, carousel will be contained. Available when web_carousel_style is style_2. |
web_carousel_arrows |
— | yes |
If checked, arrows will be visible. |
web_carousel_arrows_style |
default |
default, over_content, next_to_content, below_content |
Controls the arrows style. Available when web_carousel_arrows is yes. |
web_carousel_dots |
— | yes |
If checked, dots will be visible. Available when web_carousel_style is style_2. |
web_carousel_slide_numbers |
— | yes |
If checked, numbers will be visible. Available when web_carousel_style is style_2. |
web_carousel_opacity |
— | yes |
If checked, non-primary slides will have less opacity. Available when web_carousel_style is style_2. |
web_carousel_continuous_scroll |
— | yes |
Enable continuous movement with automatic looping instead of timed autoplay. |
web_carousel_scroll_direction |
left |
left, right |
Physical movement direction when continuous scroll is enabled. |
web_carousel_scroll_speed |
60 |
Number from 1 to 300 |
Continuous movement speed in pixels per second. |
web_carousel_pause_autoplay_on_hover |
— | yes |
Pause timed autoplay or continuous scroll while hovering. Leave empty to keep moving. |
web_carousel_yes_autoplay |
— | yes |
If checked, autoplay will be enabled. |
web_carousel_autoplay_speed |
3000 |
1000–10000 milliseconds |
Timed autoplay interval. Available when web_carousel_yes_autoplay is yes. |
web_carousel_cells_loop |
— | yes |
If checked, infinite loop will be allowed. |
web_carousel_adaptive_height |
— | yes |
If checked, carousel height will adapt to each cell. |
web_carousel_draggable |
yes |
yes |
Enable dragging across slides. |
web_carousel_free_scroll |
— | yes |
Enables content to be freely scrolled and flicked without aligning cells to an end position. |
web_carousel_columns |
web-carousel-x2 |
web-carousel-x2, web-carousel-x3, web-carousel-x4, web-carousel-x5 |
Existing desktop helpers for 3, 4, 5 or 7 columns, with smaller-screen adaptations. Available when web_carousel_style is style_2. |
accessible_name |
Localized Carousel |
Plain text | Descriptive carousel region label. Split group titles take precedence. |
device_visibility |
— | String unless stated otherwise | Applies the selected responsive visibility rule. |
el_id |
— | Valid unique HTML ID | Enter section ID (Note: make sure it is unique and valid according to w3c specification). |
el_class |
— | String unless stated otherwise | If you wish to style particular content element differently, then use this field to add a class name and then refer to it in your css file. |
Continuous scroll
Continuous scroll moves the content at a steady speed without waiting between slides. It is available in Carousel and Carousel feed, in all three styles, including their Gutenberg blocks. The Slider shortcode does not expose this option.
- Edit the element in Page Builder. For Carousel feed, open Carousel options.
- Enable Continuous scroll.
- Choose Left or Right in Scroll direction, then set Continuous scroll speed in pixels per second. Higher values move faster.
- Enable Pause AutoPlay on hover to pause while the pointer is over the carousel, or leave it unchecked to keep moving.
- Save the page and check the frontend.
This mode enables looping and free scrolling automatically. It takes precedence over Autoplay, Autoplay speed, Reverse autoplay, and the manual loop setting; those settings still apply when continuous scroll is disabled. Dragging and navigation remain available, and continuous motion resumes after the movement settles. Keyboard navigation and focused links or controls pause continuous movement; leave the carousel to resume. Visitors who request reduced motion receive a stationary carousel with manual navigation. Hidden tabs and off-screen carousels pause until visible again. A single item stays stationary; use enough items to fill the viewport for a continuous strip.
[web_carousel_feed custom_query="1" web_carousel_continuous_scroll="yes" web_carousel_scroll_direction="left" web_carousel_scroll_speed="60" web_carousel_pause_autoplay_on_hover="yes"]Choose a query that returns several items. When related content is split by post type, each carousel receives the same motion settings and pauses independently.
The carousel wrapper exposes data-continuous-scroll="true", data-scroll-direction="left|right", and data-scroll-speed="60". Hover pause reuses data-pause-autoplay-on-hover="true"; omitting it disables hover pause. These attributes configure the existing carousel runtime.
Confirm the direction on the frontend, hover with the pause setting enabled and disabled, drag to another item, and verify the movement resumes without a jump at the loop boundary. If it stays still, check reduced-motion preferences, keyboard focus, visibility, and the item count.
Accessibility
Each visible result remains available to assistive technology and keyboard navigation, including layouts that show several results simultaneously. Results outside the carousel viewport are hidden from the accessibility tree and made inert until they move into view.
Set accessible_name to describe the content. Reduced-motion preferences prevent timed autoplay as well as continuous motion. Keyboard focus pauses automatic playback; manual controls remain available.
Query and template behavior
Related output split by post type applies the saved result limit separately to each type. Historical taxonomy selector rows combine taxonomies with AND and terms within each taxonomy with IN; an explicitly structured query retains its nested relations.
The carousel retains the saved query's size, including all-results queries, independently of page pagination. Only published, password-free public items allowed by current content-type permission rules are rendered. Explicit selections preserve all IDs in their authored order, including when just one post is selected. Missing explicit queries and empty selections display nothing. Use a practical query limit for large collections; recursive card expansion remains bounded.
Related mode intersects the source with the current post's related_posts selection. An empty relationship displays nothing. Split mode groups the resulting items by post type and omits empty groups; it does not query every type independently.
The default template, and a deleted template, use the theme's title-only fallback without links. Choose a configured template for card links, media and metadata. The existing carousel stylesheet/script and the selected template's conditional dependencies are shared with Gutenberg. No new per-carousel stylesheet is generated. Avoid self-referencing templates; nested expansion is bounded.
[web_carousel_feed query_type="single_posts" single_posts="123,456" layout="news-card" accessible_name="Featured news" web_carousel_arrows="yes" web_carousel_adaptive_height="yes"]Replace the example IDs and template slug with published content and a template configured on your site. Clear the relevant page cache after changes when cached HTML would otherwise remain visible.
Verification
With continuous scroll disabled, autoplay enabled and looping disabled, the feed stops at its last slide. Enable looping for continuous playback. Hover and tab visibility pauses do not restart playback once the last slide has been reached.
Operate web_carousel_feed with pointer and keyboard input, and confirm labels, focus and motion remain understandable. Pay particular attention to query_type and single_posts.