Creating Post Loops in Pinegrow Web Editor

Loops are one of the core building blocks of WordPress, and they go by all sorts of names depending on the product you use. Inside WordPress or most other tools, they are simply called Loops, Post Loops, or Query Loops. Oxygen likes to be different by calling them Repeaters, but at the end of the day, they’re all still the same thing.

Loops can be as simple as a list of blog posts or as complicated as you want to make them, with all sorts of options, filters, and even nested queries. Pinegrow has a fantastic loop builder that gives you tons of flexibility with a simple interface. Or, if you want, you can dive into the weeds and write your own queries that it’ll apply for you. The sky really is the limit, and I have yet to find a loop that Pinegrow can’t handle.

Let’s take a look at how you can use Pinegrow’s tools to build a query loop.

You can see here that I have a very basic page laid out inside Pinegrow. I’m using an early beta of the WordPress plugin version, but the Desktop product looks and works the same way. This page has a header, a hero section, and a footer. I want to add a section below the hero that shows the three most recent blog posts.

Rather than spend time here creating and styling the card, I’m just going to grab one of the pre-made blocks that Pinegrow has available. If you want a complete tutorial on how to build cards, check out one of my other videos, “Creating an Accessible HTML and CSS Biography Card.” I’ll drop a link to that video below.

To get to the pre-made blocks, just click on the insert menu, select blocks, and choose the type of Block you want. I’ll select Blog Posts. Then I’ll grab Post Block 2 and drag and drop the block right onto my page or tree. Keep in mind that these pre-made blocks only work for Tailwind and Bootstrap projects, so if you have a plain HTML project, you’ll have to create and style your own.

You can see that it created a pretty decent-looking post grid section for me, but we’re not done yet. That block we dropped only has the HTML and Tailwind classes to look like a blog grid. It doesn’t actually have the smarts to do anything yet.

The next thing we are going to do is to define the Post Loop. To do that, we’ll come to the WordPress actions panel, expand the Post Smart Actions, and find the Show Posts action. We want to add this action to the wrapper element around the individual items that are going to be repeated. This will usually be a div with a flex layout or a grid layout. I’ll select the div that holds my card items in the tree; then, I’ll click on the Show Posts Smart Action to add it.

In the Smart Action Properties, we see a bunch of options for our loop. At the top, we see that the Loop Type is set to “The Main Loop.” This is a default query in WordPress, but it’s pretty useless for our purposes today because I’m displaying this on a singular page type. Let’s click on the dropdown, and you can see that we have more options available to us. Custom Query, Relationships, and Block. We are going to use the Custom Query.

Before I start changing options, I’m going to click on this Code Preview button so we can see what’s going on under the hood in real-time. If you are familiar with WordPress functions, you’ll notice that all of this is pretty standard stuff except for a few helper functions that let you do relationship queries, skip shown posts, or do a few other things that we’d otherwise need to write custom functions to achieve.  I’ll leave this code view up for now, just for grins.

Back in our Custom Query Options, under post type, we’ll leave this as the default, which is Post. We can give this query a name if we want, but I’ll leave it alone. If we wanted to load specific posts or run a function to get the posts, we can do that here, but again we’ll leave the default. Under Order By, I’ll change that to “created date – down” so it shows the most recent posts in descending order. I’m not going to filter the posts by tag or category, but we can do that here if we want.

The next thing I’m going to change will be the posts per page. This controls how many results are returned by the query. In most cases, you probably don’t need to set this unless your query is going to return hundreds or thousands of results. In my case, though, I know that I only want three results, so I’ll just put that here rather than let it continue pulling all my posts even though they’ll never be displayed.

I can choose whether to paginate my results; I’ll change this to “no” since I only want these three, and I can choose how I want sticky posts to behave. These last two checkboxes add some cool options. I can choose to skip posts that have already been shown and load the next set if I want. And I can also filter by a meta field and value.

That’s a lot of options in the interface, and it covers most use cases for a typical website. If you do need to get funky and add your own wp_query arguments, Pinegrow does let you craft your own arguments array. I’ll link to the forum post with the instructions below, and I’ll probably create a video about this sometime soon.

Now, we come down to the display options for the query. I don’t need the first item to have a special class, so I’ll leave that alone. I do want to change the range of items to show. This will limit the number of items that get displayed, regardless of how many the query returns. In our example, we are already limiting it to three results. Since I like wearing belts and suspenders, I’ll fill out this field as well. Keep in mind that the counting here starts from zero, so to show the first three items, I’ll need to enter the range 0-2. I’ll leave these other two attributes alone.

The last thing we need to do for our Show Posts Smart Action is to tell it which items will be repeated. At the bottom of the settings panel, you’ll find the items container setting. By default, that’s set to the current item, which is perfect since it’s the one we added the action to. And then, we have the repeated loop element. Clicking on that lets me directly select the loop item, or I can write my own selector if I need to for some reason. I’ll just select this first item’s div. We have other options if we want to define a range of elements to be repeated or if we want to show a special element if no posts are found. I’ll leave both of these alone, though.

That was a lot of options that I just walked you through, but you can see that I only actually changed five things. And, if I didn’t care about limiting my query, I could have gotten away with only changing three settings.

But wait… there’s more!

We’ve now told Pinegrow how we want the loop to function, but we haven’t told it anything about how we want the elements to behave. That’s the part we’ll tackle next.

The first thing I’m going to do is tell Pinegrow to ignore all except the first card item in this grid. I’ll select the ones we aren’t going to use and add the WordPress action “Don’t Export.” That’s because we’ve told Pinegrow to use the first item as the repeated template, and these other two are just here as placeholders while we create our design.

Next, I’ll select the card we are going to work on, and I’ll hit the “expand all” button so we can see everything. Now, pay attention because this part is going to go by fast.

At the top, we have an anchor element that wraps around our image. I’ll add a “Post Link” action to it, so it’s replaced with a link to the post in our query. Then, I’ll select the image element and add the “Featured Image” smart action. I can tell it which image size I want to use, or I can have Pinegrow generate responsive sizes for me using the page’s breakpoints. I’ll do that one.

Next, we have another anchor for the title of the post. That gets another Post Link action. And the heading element gets the Post Title smart action. Our H4 element is for the post date, so I’ll Select the “Post Date” smart action. If I want the modified date or if I want to format the date, I can choose one of these other date actions below. Again though, I’ll leave this one as the default. And the last thing I’m going to do is add the “Post Excerpt” smart action to the paragraph element.

Now, all we have to do is export the theme and check it out on the front end.  We now have the three most recent posts with the correct information and links pulled from each one.

As you can see, this was pretty simple. And the hardest part was probably just listening to me explain each of the fields. In practice, adding a loop and the smart actions to a real page template or a WordPress block only takes a few minutes.

As always, if you found this video helpful, please like and subscribe or leave a comment down below, and I’ll see you next time.