Welcome to an exciting dive into Etch, a promising new WordPress page builder crafted by the innovative team at Digital Gravy. Though still in its early alpha stage (version 0.33.0), Etch is already packed with powerful features that hint at a new way to build dynamic WordPress sites with ease. One standout feature that I’m particularly excited to explore today is the Loop Manager. This tool is designed to revolutionize how you work with data loops, especially when integrating external JSON data sources into your WordPress pages.
In this article, I’ll walk you through the capabilities of Etch’s Loop Manager, demonstrate how to bring in external JSON data — specifically using the fun and quirky Owen Wilson WOW API — and show you how this can empower you to build dynamic, data-driven websites without the need for complex backend setups.
Table of Contents
- Introducing Etch: A Modular WordPress Page Builder
- Using External JSON Data: The Owen Wilson WOW API Example
- Creating a Loop in Etch with External JSON
- ), text paragraph, and an image element.
- Best Practices When Editing Loop Data
- Styling Your Loop Cards
- What’s Next for Etch and Loop Manager?
- Summary
- Frequently Asked Questions (FAQ)
Introducing Etch: A Modular WordPress Page Builder
Etch positions itself as more than just a page builder; it aims to be a full-fledged CMS experience inside WordPress. The interface is modular and intuitive, allowing you to drag and resize elements seamlessly. Whether you’re editing custom posts or regular posts, Etch provides a unified environment to manage your content visually and efficiently.
One of the key advantages of Etch is its clean, tabbed layout, which helps you jump between different content types and settings quickly. This modular design makes it easier to stay organized and focus on building beautiful pages without getting bogged down in complex menus.
The Loop Manager: What Makes It Special?
At the heart of Etch’s dynamic content capabilities is the Loop Manager. Loops in WordPress traditionally revolve around querying and displaying posts or custom post types, but Etch’s Loop Manager is built to be more flexible. It allows you to create loops not only from WordPress content but also from external JSON data sources, opening up exciting possibilities for developers and designers alike.
While full API integration with authentication and GET requests is still under development and expected soon, you can already import raw JSON data directly into the Loop Manager. This means you don’t have to store external data in your WordPress database to display it on your site — you can simply paste JSON data and loop through it visually.
Using External JSON Data: The Owen Wilson WOW API Example
To illustrate how this works, let’s take a look at a fun example using the Owen Wilson WOW API. This quirky API tracks every time actor Owen Wilson says “wow” in his movies. It returns JSON data containing details like the movie title, the year it was released, the exact line where “wow” was said, and even the movie poster.
This API provides an array of JSON objects, each representing a “wow” moment in a movie. Here’s a glimpse of the kind of data it returns:
- Movie title (e.g., “The Haunting”)
- Year of release
- Release date
- Poster image URL
- Line of dialogue including “wow”
Instead of pulling this data from the API live (which is not yet supported in Etch), you can simply copy the JSON response and paste it into the Loop Manager as static data. This is a great way to prototype or build sites that display external data without needing a dedicated backend or database integration.
How to Get Your JSON Data Ready
To get started, I visited the Owen Wilson WOW API website and fetched a batch of “wow” results — in this case, 20 entries to have a rich dataset to work with. The API response is a neatly structured JSON array, which you can pretty-print in your browser for easier reading.
If your browser doesn’t support pretty-printing JSON natively, there are many extensions and alternative browsers that can help you visualize JSON data in a readable format.
Creating a Loop in Etch with External JSON
Now, let’s bring this data into Etch’s Loop Manager and create a dynamic loop display on a WordPress page.
- Create a New Loop: In the Loop Manager, click “Add New Loop” and give it a meaningful name, such as OwenWilson (using camel case for clarity).
- Change Data Source: Switch the loop’s data source from the default WordPress content to JSON data.
- Paste Your JSON: Paste the copied JSON data from the Owen Wilson API directly into the input field.
- Save Your Loop: Make sure to save your loop so it’s available for use in the page builder.
Once saved, you can return to the page editor and start building your loop display.
Building the Loop Display
Here’s how you can structure your loop output visually:
- Add a container element and set its display to flex.
- Apply a CSS class like
grid-auto-3to create a responsive three-column grid layout. - Inside the container, add elements such as a heading (
), text paragraph, and an image element. - Wrap these elements inside a “card” div to style each item individually.
- Assign the loop to this card container so that it repeats for each JSON item.
When setting the text and image content, you use dot notation to access the JSON keys. For example, to display the movie title, you bind the heading to item.movie. Similarly, the poster image source is bound to item.poster, and the movie line text to item.full_line.
This approach allows you to dynamically render each JSON object’s data in a beautifully styled card format — all without touching the WordPress database or writing any backend code.
Best Practices When Editing Loop Data
While working inside Etch, it’s easy to get lost when editing loop content because clicking directly on text elements can sometimes cause you to lose your place in the loop editor. To avoid this, I recommend keeping the loop container selected while editing so you always have context on your data fields.
You can keep the editor panels side by side, toggling between the loop structure and the data fields, ensuring you’re always aware of what JSON keys you’re binding to your elements.
Styling Your Loop Cards
After your loop is set up and data-bound, the next step is styling. Etch supports utility classes which you can apply directly to your elements for spacing, alignment, borders, and more. While I applied some utility classes somewhat casually, you can customize your cards extensively to match your site’s branding and aesthetic.
For example, you might add padding, shadows, hover effects, or responsive tweaks to make your loop cards more visually engaging and user-friendly.
What’s Next for Etch and Loop Manager?
Currently, Etch’s Loop Manager supports pasting in JSON data directly, which is a fantastic start. However, the developers are actively working on API integration features that will allow you to authenticate, make live GET requests, and pull external data dynamically into your loops.
This upcoming functionality will unlock a whole new level of power for WordPress sites, enabling you to build fully dynamic, data-driven web applications without custom backend development. Imagine looping over live product feeds, social media posts, or any API data source directly within your WordPress page builder.
Additionally, the ability to convert loops into reusable components will help you supercharge your workflow and build complex client projects faster and more efficiently.
Summary
Etch is shaping up to be a game-changer in the WordPress ecosystem, especially with its innovative Loop Manager feature. Even in this early alpha release, the ability to loop over external JSON data without database imports is incredibly useful for prototyping and building unique, dynamic content.
Using the quirky Owen Wilson WOW API as an example, we’ve seen how to:
- Fetch and prepare external JSON data
- Create a new loop in Etch using JSON as the data source
- Bind JSON data fields to visual elements like headings, text, and images
- Style loop output using utility classes and grid layouts
As Etch continues to evolve with full API integration and authentication features, the possibilities for dynamic WordPress sites will expand dramatically. Whether you’re a developer, designer, or site owner, keeping an eye on Etch’s progress could be well worth your time.
Frequently Asked Questions (FAQ)
What is the Etch Loop Manager?
The Loop Manager is a feature in the Etch WordPress page builder that allows you to create loops to display dynamic content. Unlike traditional WordPress loops that query posts, Etch can loop over custom JSON data, including external sources.
Can I use live API data in Etch loops?
Not yet. Currently, you can paste static JSON data directly into the Loop Manager. Full API integration with authentication and live GET requests is planned for an upcoming release.
Do I need to import external data into my WordPress database to use it in Etch?
No. You can use external JSON data directly in the Loop Manager without importing it into your WordPress database, which simplifies the process and keeps your site lightweight.
How do I bind JSON data fields to elements in Etch?
You use dot notation to reference JSON keys within your loop, such as item.movie for the movie title or item.poster for an image URL. This binds the data dynamically to your page elements.
Is Etch suitable for building complex, client websites?
Yes. With its modular interface, loop capabilities, and upcoming API features, Etch is designed to help you build highly dynamic and complex WordPress sites efficiently.
Where can I learn more or get support for Etch?
Keep an eye on updates from the Digital Gravy team and communities around Etch. Engaging with the community and following official channels will keep you informed on new features and best practices.
If you’re looking to push the boundaries of what WordPress can do with dynamic data, Etch’s Loop Manager is definitely a tool to watch.
