Where WordPress only lets you display posts in chronological or alphabetical order, the relational field lets you select the posts to display, in the order of your choice.
This field is only available in the pro versions of Modern Fields.
Configuration
First, go to Modern Fields > Fields groups and add the Relation Field block.
In the inspector, you can select which post types the user will be able to choose from.
| Effect | |
|---|---|
| Post types | Select which post types the user will be able to choose from. |
| Published posts only | Also shows drafts posts if disabled. |
| Show filters | Display a select to filter by post type in the modal, and a select to filter by taxonomy when a post type is selected. |
| Sort order | Select the suggested posts display order in the sidebar left column. |
| Limit selection | If enabled, select the maximum number of posts the user can select. |
Using the relation field
The field shows a preview of the selection made by the user. The “Select posts” button opens a modal for selecting other posts.
In the modal, there are 2 columns: the left column displays the available posts (based on the allowed post types), and the right column displays your selection.
The search bar lets you quickly find your posts.
You can then reorder the items in your selection by dragging and dropping them to set their display order.
Click on “Confirm selection” to exit the modal and update the selected posts.
Check the relation field in action through this video:
Show posts with relation loop block
In Modern Fields, you don’t need to write code to display the selection. Instead, use the block “Relation loop“. you’ll find it in the inserter.
It’s a variation of the native WordPress query loop block, so it works the same way.
You just need to select the relation field in the block options in the inspector. If only one relation is available, it will be automatically selected.
It also works with a relation field in an option page, from a template file…
Now, when you change the selection in the relation field, the relation loop adapts itself live.
Register a pattern for the relation loop block
You can declare a pattern dedicated to the relation loop block. This way, when you insert the block, you will be able to select a complete, ready-to-use layout.
To do so, add the property Block Types in the pattern PHP file. Then, you’ll need to set the reference to the relation loop block variation: core/query/modern-fields/relation-loop
Note: in your pattern, the Query loop should be the first block of the markup.
Learn more about registering WordPress patterns with Full Site Editing.
Show posts with code
You can still write code to display your selection, for example within a custom PHP block.
Outside a custom block:
Inside a Modern Fields custom PHP block:
Learn more about the WP Query here.