Displaying post cards by category with section headings

Loops & Logic
1

I’m trying to recreate a restaurant menu with one L&L template that I’d done previously by outputting multiple post modules in Beaver Builder.

The menu is a custom post type called “all_day_menu” – then each menu section has it’s own unique category, i.e. “salsas”, “antojitos”, “especiales”, etc. – Goal is to Display each category as a section - category title as section heading, then all the post cards in that category under it, then the next category section, etc.

Here’s the Beaver Builder version I’m trying to replicate:
https://bkhdevelopment.wpengine.com/menu/

Here’s the L&L version that I’m stuck on… Instead of displaying all post cards together under one category heading, it’s repeating category heading for each post card… know this is some loop within loop thing but I can’t seem to grasp it.

https://bkhdevelopment.wpengine.com/menu-test

Here’s my current L&L template:

<Loop type=all_day_menu taxonomy=category orderby=category>
    <h2><Field category /></h2>
<section class="evg__menu-item__container">

      <If loop type=taxonomy_term taxonomy=category>

        <section class="evg__menu-item__item">
            <div class="menu--heading__flex">
                <div>
                    <h3 class="menu__item__name menu--heading__item">
                        <Field title />
                    </h3>
                </div>
                <div class="menu__item__price menu--heading__item">
                    <Field item_price></Field>
                </div>
            </div>
            <div class="menu__item__description">
                <Field description></Field>
            </div>
            <If loop acf_checkbox=indications>
                <section class="evg__menu-indications__container">

                    <Loop>

                        <div class="menu__add-on__price menu__add-on__indications evg__menu-indications__item">
                            <Field />
                        </div>

                    </Loop>

                </section>
            </If>

            <If loop exists acf_repeater=add-on_item>
              <Loop>
                <div class="menu__add-on__description">-
                    <Field add-ons />
                       
                    <If loop acf_checkbox=add-on_indications>
                        <section class="evg__menu-indications__container">
        
                            <Loop>
        
                                <div class="menu__add-on__price menu__add-on__indications evg__menu-indications__item">
                                    <Field />
                                </div>
        
                            </Loop>
        
                        </section>
                    </If>
                  <If exists field=add-on_price>
                    <span class="menu__add-on__price">
                        &nbsp;<span class="menu__add-on__price-plus">+</span>
                        <Field add-on_price /></span>
                  </If>
                </div>
            </Loop>
</If>

        </section>
      </If>

</section>
</Loop>```
2

Hey Brian, welcome to the community! Your post actually brings up two really common points of confusion for people that are new to working with query loops.

#1: The entire loop will repeat once for every piece of content that matches the loop’s query parameters

So here’s an important point about how loops work which is taken from the first article in the “Getting started with Loops & Logic” section in the documentation (which you might want to read through here if you haven’t already):

The inner content of the Loop tag (that is, everything written between the opening <Loop> tag and the closing </Loop> tag) runs once for each item in the loop.

This means that if your loop is supposed to show three posts, the entire inner content of that loop will render itself three times. In your example, you’ve written <Field category /> inside your loop which means that the current post’s category is going to display once for each item in the post loop. This is why you’re noticing that “it’s repeating category heading for each post card.”

#2: It’s important to think through the structure of your loop(s) based on what data you want to display

When you’re using the Loop tag to display some data from your site, it’s super important to think through which data you’re actually trying to display. You’ve already perfectly described what you’re trying to achieve:

Goal is to Display each category as a section - category title as section heading, then all the post cards in that category under it, then the next category section, etc.

The L&L markup you’ve written in your template will just loop through all your posts and then display the category title for each post. It won’t group posts into each category. What you’ve described in the quote above is that you actually want to first loop through all your categories and then for each category, you want to loop through all the posts that belong to that category. So for that, you’d need an outer taxonomy term loop and then inside that taxonomy term loop, you’d display the term title and then nest another post loop that displays all the posts within that taxonomy term. This example in the documentation is actually pretty close to what you’re trying to do, so you might want to use that as inspiration.

I hope that’s all helpful! Let me know if you run into any other snags and I’d be happy to clarify things.

1 Like