CPT Review Loop with ACF
The reviews on our homepage are saved as a Custom Post Type (reviews) with ACF fields to handle rating and reviewer details.
Preview
-
THE essential Plugin
If you have been using Widgets for years and years and, like me, now discover that the Widget editor has gone crazy, fear not, Tangible Templates have replaced all my Widgets with a much better solution.
If you have been using the plugin Custom Content Shortcode for years and years and, like me, have just found out that it being deprecated, fear not!
I wish I had found this Plugin sooner. Simple functions like <if loop exists …> makes building flexible page layouts so much easier. I am now reviewing all the shortcodes that I have created or used from other plugins to see which can be replaced by Tangible Templates.
Great support from the team and community. I would have appreciated more examples to help me get started, but now I’m off the ground I want to explore what else this plugin can do.
-
Lifesaver
This is no exaggeration. L&L has been a lifesaver to me and saved hundreds of hours of extra work in template building. Really well done, Tangible. “This is the way!”
-
Unlimited possibilities
It opens endless possibilities, especially when working with ACF and custom post types.
-
I LOVE IT! <3
THIS! IS! AMAZING! LOVE IT! <3
-
One of the Top 3 WordPress plugins
This plugin is absolutely awesome and should be one of the TOP 3 WordPress plugins in any category ! A game changer plugin.
-
It’s a Doozy – Love this Plugin
I use this plugin with ACF and it saved me the time to handcode templates and snippets to file by way of Elementor, and it served Relationship field types like a champ.
This allowed me to save the money I would have otherwise had to spend in time (manual coding) and money (buying a paid plugin to serve bidirectional Relationships fields that wasn’t available in standard/pro Elementor).
Thank you VERY much for this gem.
-
Excellent Plugin
Loops & Logic is awesome! Makes it so easy to build out dynamic content and support has been amazing.
<ul class="grid-masonry">
<Note>1</Note>
<Loop type=reviews orderby_field_number=rating order=desc>
<li class="tt-item card {Field post_class}">
<div class="content">
<If field=rating>
<div class="rating">
<Note>2</Note>
<Switch check="{Field acf_radio=rating}">
<When value="5" />★★★★★
<When value="4" />★★★★☆
<When value="3" />★★★☆☆
<When value="2" />★★☆☆☆
<When value="1" />★☆☆☆☆
</Switch>
</div>
</If>
<div class="title"><Field title /></div>
<div class="description"><Field content /></div>
</div>
<div class="footer">
<Note>3</Note>
<Set person_content>
<If field=person_image>
<span class="avatar"><img src="{Field acf_image=person_image field=url}" alt="{Field person_name}" /></span>
</If>
<div>
<div class="name"><Field person_name /></div>
<div class="role"><Field person_role /></div>
</div>
</Set>
<Note>4</Note>
<If field=person_website>
<a class="author" href="{Field person_website}" target="_blank" rel="nofollow noopener">
<Get person_content />
</a>
<Else />
<div class="author">
<Get person_content />
</div>
</If>
</div>
</li>
</Loop>
</ul>
- To open a CPT loop, use the Post Type Slug in the type attribute. You can sort the returned posts by a custom field with
orderby_fieldororderby_field_number - To save a bit of time, you can use Switch/When tags for your logic instead of If/Else. This saves you from having to pass your field to each statement. This rating section could also be written as:
<If check="{Field acf_radio=rating}" value=1>★☆☆☆☆<Else if check="{Field acf_radio=rating}" value=2 />★★☆☆☆etc. - Use Set and Get to save pieces of markup for use elsewhere. In this example it’s being used for the inner author content, so that it can be placed into alternate wrappers depending on whether there’s a website link available
- When using alternate wrappers, it’s usually best to approach things this way instead of wrapping the opening and closing tags each in their own if statement
.grid-masonry {
-moz-column-count: 1;
-webkit-column-count: 1;
column-count: 1;
-moz-column-gap: 1rem;
-webkit-column-gap: 1rem;
column-gap: 1rem;
}
.grid-masonry .tt-item {
break-inside: avoid;
}
.card {
background-color: #fff;
border-radius: 4px;
box-shadow: 0 3px 0 #f0f1f2;
padding: 1rem;
}
