Toolset allows you to load posts from the database and display them, as fancy lists, on the front-end. A list can appear in any way you choose. It can be a responsive grid, masonry or collage layout, or any other style you wish.
In Toolset, we call such a list of posts a View.
Follow these steps
- To start, edit or create a page, post or a template and insert the View block.
- Use the WordPress Block Editor to design your View.
- Use Toolset blocks to add dynamic fields to the template.
Now, you can enhance your View with advanced features. For example, you can add pagination and infinite scrolling, front-end sorting, filter the list, or add a custom search.
For instructions, see below.
How to style a View
Toolset blocks allow you to design and style everything inside the block editor.
Different Toolset blocks will have different styling options. The most common styling options are:
- Typography – change the appearance of blocks that output text
- Style Settings – change colors, margins, paddings and borders, drop shadows and more.
- Advanced – block allignment, hide element, and more.
Besides styling the blocks themselves, there are two Toolset blocks that help you design your Views:
- Toolset Container – group multiple blocks and apply styling to them: add a background, margins, paddings, and more.
- Toolset Grid – display elements side-by-side in any type of columns: adjust column width, number of columns, and more.
Change the main View settings
You can change the View’s main options at any time. This includes things like pagination, content selection, ordering, filtering, and more.
Click to select the main View block and then use the sections in the right sidebar to tweak the main settings.
Change the loop style of a View
By default, the View display posts in a three-column grid. You can easily change this at any time.
Click to select your View in the editor and then click the Block Navigation button. You will see a tree list of your View and the blocks it contains. Click the View Loop to select it.
Add pagination and Infinite Scrolling to a View
Pagination lets you break otherwise long lists of posts into pages and allows visitors to switch between them. Using pagination, you can also add the Infinite Scrolling effect to your Views.
By default, pagination is turned on when creating a new View. You can click the pagination controls and tweak the options using the right sidebar.
Enable pagination for an existing View
If you have an existing View without pagination you first have to enable it. To enable pagination, select your View block in Block navigation and expand the Pagination section in the right sidebar. There, click the option to enable pagination and tweak the options.
Add front-end sorting to a View
Allowing users to sort the list of posts by price or rating, for example, helps them find the right content more easily.
To enable sorting for a new View, toggle the Front-end sorting option in the View-creation wizard.
To add sorting controls to an existing View use the following steps:
- Click the Add Sorting button. You can find it at the top and bottom of the View Output block.
- Click the sorting control that appears and use the right sidebar to select the options.
You can select what to sort by, adjust the labels, tweak the styling, and more.
Filter the list of posts
By default, a View outputs all posts belonging to the post type you selected. You can add filters to display only posts that meet a certain criteria.
You can filter a View’s output by custom fields, taxonomies, standard post fields, post relationships, and more.
Use the following steps to add a filter to a View:
- Click to select the main View block.
- In the right sidebar, expand the Query Filter section.
- Click Add a filter and in the dialog that appears, select what to filter by.
- In the right sidebar, select the options for your new filter.
Add a custom search to a View
Toolset allows you to easily add a front-end search to your Views. This allows users to easily find the exact content they are looking for.
To enable custom search for a new View, toggle the Search option in the View-creation wizard.
To enable custom search for an existing View use the following steps:
- Click to select the main View block.
- In the right sidebar, toggle the Search option and a View Search section will appear in the editor.
- Click the buttons in the View Search section to add a search field, submit button, and more.
To change the main options for your search, click to select the main View block and in the right sidebar expand the Custom Search section.
For detailed information, check out the lesson about creating a custom search.
List items of a repeatable field group
You can make an entire group of fields “repeatable”. For example, if you’re making a site about gyms (or stores), you could store the “opening hours” which have the “day of the week” and “working hours”, as a repeatable fields group.
Use the following steps to display repeatable field groups.
- Edit the Content Template for single posts of the related post type.
- Insert a View block, give it a name, and select the design options.
- In the third step of the View creation wizard, select your repeatable field group, under the Repeatable field groups sub-section.
- In the Block Editor, click to select the main View block you just created.
- In the right sidebar, expand the Query Filter section and click the Add a filter button.
- In the dialog that appears, select the Post relationship or repeatable field groups owner option.
- In the right sidebar, use the Select items dropdown to select your repeatable field group and click the Save button.
For detailed instructions, visit the lesson about creating and displaying repeatable field groups.