How to create dynamic content sliders in WordPress
WordPress can automatically query posts, pages, and custom post types, but it does not provide a finished dynamic slider in core. You can combine a Query Loop with custom CSS and JavaScript, or use a slider plugin to handle the carousel, responsive layout, controls, and automatic updates.
- 01Choose the content to rotate
- 02Build the dynamic content list
- 03Turn the list into a slider
- 04Set responsive image behaviour
- 05Test the published slider
- 06Use the fast route
What you need
- A WordPress site with posts, pages, or a registered custom post type
- Admin access or access to the site files
- Featured images or other media for each item
- A staging site or recent backup for custom code
Choose the content to rotate
Decide whether the slider should show blog posts, pages, products, or a custom post type. Also choose the rule that controls the results, such as a category, tag, author, publication date, or a custom taxonomy.
Give every item a suitable featured image, clear title, useful excerpt, and meaningful alternative text. Keep the number of slides small enough that visitors can scan them quickly.
Build the dynamic content list
Add a Query Loop block to the page or template. Change its query type to Custom, then select the post type, ordering, number of items, and filters. WordPress documents these settings for posts, pages, and custom post types.
Inside the Post Template, add the Featured Image, Title, Excerpt, and Read More blocks. Enable links for the title and image if visitors should open the full item. Changes made inside the template repeat for every result.
Turn the list into a slider
The Query Loop creates a changing list, not a complete carousel. To make it slide horizontally, add a custom CSS class to the block and use CSS to create a horizontal track with overflow hidden. Add JavaScript for previous and next buttons, slide movement, focus handling, and optional automatic rotation.
This manual route is suitable when you only need a simple carousel and can maintain code. It breaks easily when a theme changes its markup, when the query returns no items, or when new controls are not made keyboard-accessible. The W3C recommends keyboard controls, a pause mechanism, and clear communication of the active slide.
Set responsive image behaviour
Use WordPress image sizes rather than loading every slide at its original dimensions. WordPress normally adds srcset and sizes so browsers can select a suitable image for the viewport.
Do not lazy-load the first visible hero slide if it is near the top of the page, because that can delay the main image. Keep width and height information on images to reduce layout movement, and check the slider on mobile before publishing.
Test the published slider
Check the query after publishing a new post, changing a category, removing a featured image, and reaching the last slide. Confirm that the slider shows a useful fallback when there are no matching items instead of leaving an empty space.
Use the keyboard to reach every control, pause automatic movement, and open each linked item. Test narrow screens, touch gestures, slow connections, and reduced-motion preferences. If the slider hides important content or moves too quickly, replace it with a static list or disable auto-rotation.
Use the fast route
For a production site, use a dynamic slider plugin instead of maintaining the CSS and JavaScript yourself. Soliloquy Dynamic fits this job because it can pull posts, pages, and custom post types into responsive sliders and refresh the displayed content as your WordPress content changes.
After installing and activating it, create a dynamic slider, choose the source post type and filters, configure the number of items and ordering, then insert the generated slider where it belongs. Preview it on mobile and verify that navigation, pause controls, links, captions, and image loading work with your theme.
Let Soliloquy Dynamic do it
Pulls posts, pages, and custom post types into responsive sliders; choose it for automatically refreshed visual content.
Sources
- wordpress.org /documentation/article/query-loop-block/?utm_source=openai
- w3.org /WAI/tutorials/carousels/?utm_source=openai
- developer.wordpress.org /apis/responsive-images/?utm_source=openai
- developer.wordpress.org /reference/functions/wp_get_loading_optimization_attributes/…
Questions
- Can WordPress create a dynamic slider without a plugin?
- WordPress can create the dynamic content list without a plugin by using the Query Loop block, but core does not provide a finished carousel interface. You would need custom CSS and JavaScript for horizontal movement, navigation, focus handling, and optional auto-rotation. That is fine for a simple, developer-maintained slider, but a plugin is safer for a production site.
- How do I make a slider update when I publish a new post?
- Make the slider query the post type rather than selecting individual slides manually. Set filters such as category or taxonomy, choose an ordering rule, and set the number of results. The Query Loop then uses the current matching content, so newly published items appear when the page query refreshes.
- Can a dynamic slider show custom post types?
- Yes, a dynamic slider can show a custom post type when that post type is publicly queryable and available to the block or slider tool. In a Query Loop, change the query type to Custom and select the post type if it appears. If it is missing, check the post type registration and whether the plugin or theme exposes it to the editor.
- Should a WordPress content slider rotate automatically?
- Automatic rotation is optional and should not be the only way to view content. Provide previous and next buttons, a visible pause or play control, keyboard access, and a sensible stop condition when the user focuses or hovers over the carousel. The W3C recommends allowing users to pause movement because it can make text difficult to read.