Mastering Dynamic Content in Oxygen 6: Your Guide to the New Post Loop Builder (The “Ex-Repeater”)

Are you looking to create dynamic lists of posts, products, or any custom content in Oxygen Builder 6? If you’ve used older versions, you might be looking for the Repeater. But things have evolved! This tutorial dives into the powerful Post Loop Builder, Oxygen 6’s new, more flexible, and optimized solution for crafting custom query loops—effectively the successor to the classic Repeater for this purpose.

The way we handle dynamic content listings has seen a significant upgrade in Oxygen 6. Let’s explore how to leverage this new approach for cleaner, more powerful designs.

🚀 The Big Shift: Why the Old Repeater Evolved in Oxygen 6

A crucial point to understand upfront: the “Repeater” element you might recall from Oxygen Classic for query loops has a new role. As the video tutorial clarifies, “we will not work more with repeater element like we did on oxygen classic.” Instead, Oxygen 6 introduces the Post Loop Builder for these tasks. The new “Repeater” field element is now specifically intended for working with Advanced Custom Fields (ACF) repeater fields—a topic for another day.

For displaying lists of blog posts, products, or any custom post type, the Post Loop Builder is your new go-to tool. It’s engineered for better performance and greater flexibility.

💡 The Component-First Workflow: Your New Foundation for Query Loops

The most fundamental change in methodology with the Post Loop Builder is the emphasis on a component-based workflow. As the instructor puts it: “…the main thing that you need to to have in your mind is that you will need build a component first to after call on your Loop Builder.”

This means before you even add the Post Loop Builder, you first design how a single item in your list will look.

Step 1: Designing Your Repeating Element (The Component)

You’ll start by creating a new Component. This Component will define the structure and style of each individual item in your dynamic list.

• Example: Crafting a “Post Card” Component: The tutorial demonstrates creating a simple component, aptly named “Post Car” (likely meaning “Post Card”). This Component might include:
  • A main container <div>.
  • A heading element for the post title.
  • A text element for the post excerpt.
  • A “View More” link or button.

Step 2: Making Your Component Dynamic

For the Component to display unique information for each item in the loop, its internal elements must be linked to dynamic data sources.

• Within your Component, select an element (e.g., the heading).
• Click the dynamic data icon (often a cylinder or database icon).
• Choose the appropriate data source:
  • For the heading: Post Title
  • For the text: Post Excerpt
  • For the link: Post Permalink

🛠️ Configuring the Post Loop Builder: Bringing Your List to Life

Once your Component is designed and its elements are linked to dynamic data, it’s time to use the Post Loop Builder:

1. Add the Post Loop Builder element to your page or template.
2. In the “Repeated Block” tab of the Post Loop Builder, you’ll select the Component you just created (e.g., your “Post Card”). The tutorial emphasizes: “…you could select a component like I said before you need select a component from your library of component to start to use this element dynamically…”

Defining Your Query

Next, you’ll configure what content the loop should fetch:

• Query Type: You can choose “Archive” (for default WordPress archive pages) or “Custom.” The tutorial uses a “Custom” query.
• Post Type: If using a custom query, select the desired post type (e.g., Post, Product, or your custom post type).
• Posts Per Page: Specify how many items you want to display per page.
• Advanced Options: The Post Loop Builder offers many advanced query options (like ordering, filtering by metadata, etc.), though these might be covered in more advanced tutorials.

Implementing Pagination

If you have more posts than your “Posts Per Page” setting, you’ll want pagination:

• The Post Loop Builder allows you to easily enable and configure pagination (typically with numbers by default).
• You can also style the pagination elements directly within Oxygen’s interface. (The tutorial notes a beta version issue with variables for active pagination styles not working correctly, something to be mindful of depending on your Oxygen version).

Styling Your Loop Container

The “Style” tab of the Post Loop Builder lets you control the appearance of the main container that holds all your repeated components:

• Layout: Choose between Grid or Flex to arrange your items. The example shows setting up a three-column grid for desktop (“front-end landscape”), and adjusting to a single column for tablet and mobile views.
• Spacing: Configure gap or other spacing properties between your grid or flex items.

✨ Advanced Features & Important Considerations

Sneak Peek: The Promising “Filter Bar”

A very exciting feature mentioned is the “Filter bar.” The instructor notes: “…this option like fil call it filter bar it’s very nice because we have a filter that oxygen give us and we can change something on the design and filter by different taxonomies and it’s really nice and change the order…” While detailed setup is for a future video, it’s a powerful built-in filtering capability to look forward to.

Troubleshooting: Navigating Potential Extension Conflicts

The tutorial candidly shows a real-world issue: the heading styles within the Component weren’t applying correctly.

• Problem Identified: A “Breakdance for Oxygen” extension was suspected of injecting global styles that conflicted with the Component’s local styles.
• Solution: The problematic extension was deactivated, and the conflicting part of the Component was recreated. The author stated: “…I found the problem with the heading here was an element from break dance for oxygen… I don’t know why change or or put Global Styles and you cannot edit it for now… so I activated this element and I will do again this part of the component to to works better.” This is a good reminder that third-party extensions can sometimes interact in unexpected ways.

✅ Why Embrace the New Post Loop Builder?

The shift to the Post Loop Builder and its component-centric workflow brings several key benefits:

• Increased Power & Flexibility: More control over your queries and layout.
• Optimized Performance: Designed to be more efficient than older methods.
• Modular Design: Components promote reusability and easier site-wide updates.
• Scalability: A more structured approach makes complex dynamic sites more manageable.

🔥 Take Your Oxygen Builder Skills to the Next Level!

Mastering custom Query Loops with the Post Loop Builder is essential for creating dynamic, content-rich websites with Oxygen Builder 6. It will undoubtedly boost your workflow and allow for more sophisticated and efficient designs.

Don’t hesitate to experiment with these new tools. The more you use them, the more intuitive they’ll become.

---

📌 What are your experiences with the new Post Loop Builder in Oxygen 6? Share your tips or questions in the comments below!

📌 For more deep dives into Oxygen Builder, WordPress strategies, and advanced web development techniques, make sure to subscribe to relevant channels and newsletters.