This thread is resolved. Here is a description of the problem and solution.
Problem: I have two custom post types, Recipes and Ingredients, in a many-to-many (M2M) post relationship. In the intermediary post type, there is a custom field representing the quantity of each Ingredient in a specific Recipe. On the Recipe post template, I want to display a list of related Ingredients, the quantities of each, and I want to sort the Ingredients using a custom sort order I specify in wp-admin.
Solution: In the Recipe post, add related Ingredients in the Recipe post's relationships panel, and set the quantity and sort order for each Ingredient. In the Recipe post template, create a View of the intermediary post type. You must query the intermediary post type in order to specify your own custom sort order, which must be managed in a custom number field in the intermediary post type. Use the Query Filter to filter by post relationship, where the intermediary post type is related to the post being displayed. Use the Ordering panel to order by the custom order field in the intermediary post type. Display information about the related Ingredient post and the corresponding quantity in the loop of the View.
Relevant Documentation:
https://toolset.com/course-lesson/what-are-post-relationships-and-how-they-work/
https://toolset.com/course-lesson/how-to-set-up-post-relationships-in-wordpress/
https://toolset.com/course-lesson/many-to-many-post-relationships/
https://toolset.com/course-lesson/displaying-related-posts/
This is the technical support forum for Toolset - a suite of plugins for developing WordPress sites without writing PHP.
Everyone can read this forum, but only Toolset clients can post in it. Toolset support works 6 days per week, 19 hours per day.
| Sun | Mon | Tue | Wed | Thu | Fri | Sat |
|---|---|---|---|---|---|---|
| 8:00 – 12:00 | 8:00 – 12:00 | 8:00 – 12:00 | 8:00 – 12:00 | 8:00 – 12:00 | - | - |
| 13:00 – 17:00 | 13:00 – 17:00 | 13:00 – 17:00 | 13:00 – 17:00 | 13:00 – 17:00 | - | - |
Supporter timezone: America/New_York (GMT-04:00)
This topic contains 7 replies, has 2 voices.
Last updated by jillT 2 years, 11 months ago.
Assisted by: Christian Cox.
In the single custom template for Recipes, I want the ingredients list to be displayed as bullet points, but that doesn't seem to be a possible option when creating a view.
Hi, one of the options for the loop style should be an unordered list, which would be rendered as bullet points. When you select the View Loop block, this option should be available in the sidebar (see loop-style.png). If you use the Block Navigation menu at the top of the screen to select the View, you should be able to see the View Loop block appear in the Block Navigation menu (see block-navigation.png).
(1) the field 'quantity' is not showing.
What type of field is the 'quantity' field? If you output the raw value, like the syntax here, does anything appear?
[types field='quantity' output='raw' item='@recipes-ingredients.intermediary'][/types]
If not, can you confirm the relationship slug is accurate by editing this relationship in Toolset > Relationships? Double-check the spelling to be sure the slug is recipes-ingredients, as indicated in your shortcode.
(2) How/where can I add the <ul class="myclass"> and ?
When you choose the unordered list loop style, the ul will be automatically inserted, and each result will be automatically enclosed in a li tag. You can add a class to the View Loop in the same sidebar where you select the loop style, in the Advanced panel. Type the classname and then press return to accept the classname in the input. It will be displayed in a gray pill format once accepted.
(3) I want it to display the list in the order I entered them into the recipe, but it seems to be just random or the choice of title or quantity alphabetical. How can I get my own custom order?
To display the front-end results in a custom sort order, I think you would need a custom numeric field in the intermediary post to hold a sort order value. Then the View would have to be based on the intermediary post type instead of the Ingredients post type, in order to sort by that field. When you create a View based on the intermediary post type, you no longer need the item attribute in your custom field shortcode, since the context is now based on that intermediary post type.
(4) When looking at the output there is <p></p> between each item, creating a space - how do I remove that?
Let's see if this is still an issue when you select the unordered list loop style, and we can address it then.
ul.ingredient-list li
ul.ingredient-list li input[type=checkbox]:checked+span
It looks like these are CSS selectors, not classes. It looks like "ingredient-list" is the only class here. I did a quick test to try this out, and it turns out it's not simple to add a CSS class directly to the UL item generated by an unordered list loop. Instead, you can add a CSS class to the top-level View block and use that class to target descendant elements in your CSS code. So you would add the "ingredient-list" class to the top-level View block in the Block Editor, then you would target these elements in your CSS code like this:
.ingredient-list ul li {
/* your styles here for li elements */
}
.ingredient-list ul li input[type=checkbox]:checked+span {
/* your styles here for the checked checkbox span elements */
}
I hope this helps clarify, sorry for the misinformation about adding a class to the UL element.
(2) To display in custom order I added a number field as you suggested. Must say I'm finding it a very cumbersome system. It appears you can't edit to simply add a number in the new field but have to disconnect and then add the item again
The Quick Edit feature (hover over the related post title to see this link) will allow you to edit each intermediary field directly from the post relationships panel. That's probably the fastest way to edit the intermediary fields here.
In the back end it does sort it into the number order, however, on the front end it doesn't do anything and it is still displayed in some random order.
Okay the View's ordering system is managed independently of the sort order you choose in the post relationships editor panel, so you would need to adjust the View's Ordering settings to see this sorting order enforced on the front-end. In the Block Editor for this template, select the top-level View block. Then in the sidebar, you will find an Ordering panel. You can choose to order the View based on the new number custom field from the intermediary post type. Screenshot attached here. Are you saying that after sorting based on this new field, the list of ingredients still appears in random order?
Regarding the order of ingredients; I changed the order for the view, and it broke! Won't display any of them. I tried a different field and if I sort by title it works, it just won't sort on either of the intermediary fields.
Right, the View must be reconfigured to query the intermediary post type, not the Ingredients post type, since you want to sort by a field in the intermediary post type. I've made that change in the View configurations (see the screenshot) and modified the results of the View to display the quantity from the intermediary post, and the related ingredient post title. See below.
I added 'ingredient-list' to the view and changed my style sheet, but that doesn't work. It should remove the bullet point and add a check-box; when checkbox is clicked it changes font-style to strike. It removes the bullet point but doesn't add the check box
Check now, I added the checkbox input field that you mentioned in your earlier comment. It was not included in the loop code, so I added it like so:
<label><input type="checkbox" name="" value="1"> <span>[types field='quantity'][/types] [wpv-post-title item="@recipe-ingredient.child"]</span></label>
You may need to adjust that to fit your needs, but the checkbox appears as expected and the strikethrough effect seems to work.
