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
-
Love this plugin
Makes rapid dev of loop-content pages extremely easy and is likewise lightweight. This should really be part of wordpress core. Fantastic!
-
The plugin is great and the support is awesome
The best support I’ve ever had! I’m not even kidding!
-
Absolutely brilliant
I wish I’d found this years ago.
I’ve used this plugin to create detailed, dynamic loops in very complex sites, saving hours on hours of custom programming. It can draw from WordPress loops, ACF fields, you name it. It’s truly fantastic.
But what prompted this review was this morning’s revelation, that it can create “meta shortcodes” – so once you get your complex shortcode-loop structure built, you can create a shortcode out of that, and replace it all with one easy-to-use shortcode. I’m so excited to have found this.
-
One of the best plugin
Seriously! this is a hidden gem for those who understand HTML and CSS.
-
Best Content Shortcode Plugin
Damn, this plugin saved my time so much. Simple concept but magnificent results. I love this plugin. It gives so many possibilities. What ever page you create, this plugin is a time saver and a must have! Thank You Eliot Akira!
-
Just brilliant. Great support too.
As a WordPresser who slings HTML + Tailwind CSS, this plugin has been an absolute godsend. I can do complex queries in the front end, and can go further than any ‘Posts Module/Block/Widget’ UI could ever hope for.
-
Amazing plugin.
At a time when many web sites are implemented on templates (wpbakery, Divi, Elementor) that have huge restrictions, this plugin allows you to bypass these restrictions. This plugin deserves your support.
In combination with ACF, it gives us a lot of possibilities.
<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;
}