In this video we show you how you can create super custom post overviews and sliders with Greyd.Suite’s post slider block. With detailed frontend and backend filters, sorting options and even interactive live searches.
How to create post overviews and sliders
Hey, this is Sandra from GREYD and in this video I’m going to show you how to create individual post overviews and sliders with GREYD.SUITE.
To build a slider or post overview, you always need a Query Loop. A Query Loop is there to display certain posts of a post type and it always consists of a post template and the content. There are different ways to start. For example, if we just add a Query Loop here, we can either start with a template or pattern. Or we can start blank and then you will see a couple of presets, among others our post sliders.
A post slider is basically a variation of the post template. So if you have a look at the structure we had before, we had the Query Loop and post template. And now we have Query Loop and post slider. Since this is a variation, you can directly start with post slider and automatically get this layout.
In order to see something in the preview, select some pattern or template. Now in the parent block, the Query Loop, you can set the alignment and how many items you want per page, how many offset, or how many pages you want to have. If you set zero, the Query Loop will create as many pages as necessary to display all your posts.
On the right you will find more options. Depending on the width, you can say that the inner blocks should use the content width as defined in the site editor. This option is only necessary if you place your post slider in an archive or search template. In all other cases, you select which post types you want to use for your post overview. For example, I’ve got a post type “movies”. Then you can define the order of posts and further narrow them down with filters — by taxonomy, authors or keywords. If this is not enough, we offer more advanced filter options. For example, exclude a taxonomy, only include terms of the current post, or exclude them. You can filter by meta fields, by date, or select individual posts to include or exclude. Advanced sorting options are also available — by meta fields, most popular posts, random, etc. And you can combine filters and sorting.
Now let’s go into more detail with the post slider. You can switch between list view and grid. For each breakpoint you can define how many elements per page, how many columns, and how much space between them. This makes it simple to create responsive grids.
You can always switch between post templates and post sliders. You can also add filters in the frontend so users can filter posts themselves. Place the filter on top, below, left, center, or right, and define the design, size, and spacing. Users can also sort posts themselves with a dropdown. You can customize the labels, which is useful for multilingual sites.
You can add arrows to switch between pages and place them anywhere: top, bottom, beside posts, or overlapping the content. You can use icons or upload custom images, and define colors, hover effects, size, and spacing. Alternatively, you can add classic pagination with digits or icons, top or bottom, overlapping or not, again with lots of design options. You can also define the animation of page transitions, enable looping, autoplay, and set the speed. On mobile you can enable automatic scrolling so that when a new page loads, the view jumps to the first post instead of staying at the bottom.
To display your individual post content, use GREYD.SUITE dynamic tags. Either place a dynamic template or individual elements like headline and image in your post slider, then connect them to your post content using the dynamic tag icon or a hashtag. You can display post titles, dates, featured images, custom fields, or general tags like site title, user name, or date. You only need to configure this once — it applies to all posts in the loop.
When you click on a linked post in the frontend, you see the post page defined by the post template. Post templates are regular WordPress templates you edit in the site editor. You can use default placeholders like post content, or GREYD dynamic tags like author. For custom post types, you can create individual single templates, so each post type can have its own layout.
If you combine the post slider with GREYD.Search, you get an interactive live search. The results of your post overview update instantly as you filter. GREYD.Search also provides more advanced design options and filter features, like date pickers. To enable this, just add the GREYD.Search block inside the same Query Loop as your post slider. Or start directly with the live search block, which includes both by default.
So as you’ve seen, you have lots of different possibilities to design and create individual post overviews and sliders. There are more tutorials in the Helpcenter on working with templates, creating post types, and building searches. One tutorial in particular shows the entire process — from creating a custom post type to styling post templates, to building post sliders and overviews. Definitely have a look in our Helpcenter.
For more videos and information please visit our Helpcenter.
Was this article helpful?