Home » Blog » Looper Magic in Cornerstone

Looper Magic in Cornerstone

One of the best features about Cornerstone (the visual builder by Themeco) is that its built by people who think like WordPress developers. When we dig into the Looper feature, its very easy to build a familiar WP_Query with their “Query Builder”. The downside of using Cornerstone as a WordPress developer is that you’re not writing actual code. With the refresh of Kingdom One Academy’s main pages, we essentially had to create x number of sliders that display course previews, but we wanted to power the sliders dynamically. In order to pull this off, we had to solve a couple of things:

  1. How do we use Course Taxonomies to our advantage?
  2. How do we loop through course taxonomies when we aren’t writing code?

At a code level, this is a pretty simple ask.

  1. Write a WP_Query that gets all the posts of type course and that have course_cat set to “whatever category” (for the homepage sliders).
  2. Write a WP_Query that gets the current post’s terms (both course_cat and course_tag) and creates new sliders with courses associated with those terms.

The homepage sliders are straightforward (#1), but the single-course sliders were a bit more complex (#2). Each course should (probably) have a category and some tags. We need to get these terms, get courses associated with these terms, and then display them.

Immediate Consumption

The first looper on the single-course “layout” (how Themeco calls “single” or “archive” template pages) was pretty simple. We turn on the Looper provider to “Current Post Terms” and set the taxonomy to Course Categories.

A screenshot of the first looper' settings

The trick is to immediately consume the provider’s content. This sets up the interior components to start using the actual terms of the taxonomy. Essentially, this starts a second loop, because the Looper Provider is returning an array of terms, even if it’s only one term (as is often the case with categories but is seldom the case with tags).

Cornerstone has these magic commands that allow you dynamically set strings like {{dc:post:title}} or {{dc:term:title}} (dc stands for “dynamic content” ). The last argument is a key that helps Cornerstone find the string its injecting. If we don’t immediately consume the looper provider, Cornerstone tries to inject an array into a string position.

// Looper Provider: Course Categories
$categories = array('Human Resources');
// Without consuming
{{dc:term:title}} = array('Human Resources');

So, if we try to ues these magic commands in a Headline string, Cornerstone would be trying to render “More in array('Human Resources')” and not “More in Human Resources.”

The Second Looper

In order to get the string out of the array and (to surface new posts), we need a second looper. This is where the magic comes in: a second looper (essentially, a forEach loop) loops through the array of terms provided by the first looper and helps us do something. For this project, “doing something” means getting associated posts, so we need to consume the terms dynamically in a new WP_Query.

This second query is pretty simple: we either need to get course_cat or course_tag (depending on Categories/Tags) and stick the term name as the parameter. After that, we consume the Loop and build our sliders. The only things to watch out for are doing this looper trick high enough that the Slide component is the final Looper Consumer.

So that’s it! Easy enough once you figure out that immediate-first-looper-consumer trick!


Comments

Leave a Reply

Your email address will not be published. Required fields are marked *