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
-
State of the art conception. An essential plugin.
Custom Content Shortcode is THE way to go to take control of your WordPress installation if you cannot modify the source code, either because you cannot access it (eg. if your site is hosted on WordPress.com), or because you simply don’t want to.
These shortcodes are perfectly well thought and designed, they are just coherent and consistent all the way. It just feels like they are a native feature of WordPress.
Combine with custom post type plugins like WCK and ACF to unlock the full power of WP, without the need to modify a single source file.
-
Love it
A very useful plugin. Thanks for making it.
-
Genius
Thank you Eliot Akira for this wonderful plugin. Please consider to make this commercial so that:
a) you get paid for your efforts
b) people use it with inner peace. -
An amazingly powerful plugin, with excellent support
This plugin is amazing and can do incredible things. It can just about do anything you want it to, there are just so many options. Loops & Logic is definitely a plugin you should consider having in your WordPress arsenal.
-
Recommend for every WP install.
Loops & Logic is a secret weapon for developers who need to work with block-based systems and page builders where conditionals are either poorly supported, or not supported at all.
This is a great tool.
-
Fantastic plugin with great support
Love this plugin, it’s made some trickier parts of my dev process really simple. The support is incredibly helpful.
-
Superb! Saved my day with custom post types.
I created a custom post type to separate a specific kind of post (with custom fields) from the regular blog posts. But I was struggling to find a way to list the available custom post entries in a sidebar and had not found any plugins with the flexibility and formatting control that I needed.
With this plug-in I was able to create 8-10 lines of shortcoding in a custom HTML widget that listed the most recent posts, showed the date/author of each in a smaller font than the title and finished up with a pagination control allowing the user to scroll through all available posts.
Superb!
<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;
}