Introduction
This guide walks you through connecting Clutch to WordPress and creating your first page with dynamically bound content.
You will learn how to:
- Connect Clutch to WordPress
- Creating a page in Clutch
- Inserting elements from the insert menu
- Bind WordPress data dynamically
1. Connecting Clutch to WordPress
This guide will walk through installing the Clutch plugin in WordPress and connecting it to your project. This ensures that Clutch can retrieve data from WordPress, allowing you to work with dynamic data from your WordPress backend.
Step 1: Download the Clutch Plugin in WordPress
Get the plugin here - Clutch WordPress Plugin
Step 2: Install the Clutch Plugin in WordPress
Install the Clutch plugin:
- Open WordPress Admin Panel (
your-site.com/wp-admin).
- Navigate to Plugins > Add New.
- Click Upload Plugin at the top.
- Select the provided Clutch plugin (.zip) file and click Install Now.
- Once installed, click Activate Plugin.
Step 3: Connect Clutch to WordPress
- In Clutch, look at the top-right corner—you’ll see a red indicator showing "Not connected to WordPress".
- Click the indicator and enter your WordPress URL.
- Click Submit.
- If successful, the indicator will turn green, confirming the connection.
Local for Development
This guide uses Local. However, LocalWP runs WordPress locally, meaning you won’t be able to publish your project or sync data to a live site.
We recommend using WP Engine’s Headless WordPress to create a production backend. Alternatively, you can connect Clutch to any existing hosted WordPress project.
2. Create and Connect Your First Page
In this step, you'll create a new page in Clutch and link it to a page in WordPress. This process will retrieve WordPress data, to make your site dynamic. You'll be guided through creating a homepage in Clutch and your WordPress backend.
Step 1: Create a New Page in Clutch
- Click Add Page from the left sidebar.
- Name it Home Page.
- In the Properties Panel, set:
- Template →
Pages - Path →
/
Step 2: Add a Section
- Click the Insert (+) button.
- Navigate to Marketing Templates > Heroes.
- Drag the Balanced Hero onto the page.
Step 3: Create a Page in WordPress
- In WordPress, go to Pages > Add New.
- Title it My First Page.
- Add a paragraph: "Welcome to my first page built with Clutch and WordPress!"
- Set a Featured Image.
- Click Publish.
Step 4: Link the Clutch Page to WordPress
- Back in Clutch, open the Page Settings.
- Under Template, select Pages.
- Change Archive to Specific Page.
- Choose My First Page from the dropdown.
In the next step you will select static properties in Clutch and bind them to data from the WordPress backend.
Troubleshooting:
If your WordPress page doesn’t show up in Clutch when selecting a specific page, try these steps:
- Check the Clutch Plugin in WordPress
- Go to WordPress Admin > Plugins and ensure the Clutch plugin is activated.
- Verify the WordPress URL in Clutch
- The URL entered in Clutch should be only the base URL (e.g.,
https://mysite.com) - ❌ Do not include
/adminor/wp-admin.
- If Using LocalWP, Make Sure the Site is Running
- Open LocalWP and check that your WordPress site is running.
- Still Having Issues?
- Join the Clutch Discord Community and ask for help!
3. Bind Data from WordPress to Clutch
Now that your Clutch page is linked to WordPress, you can dynamically display WordPress content by binding data.
Step 1: Bind the Heading Text
- Select the Hero Heading in Clutch.
- In the Properties Panel, hover over the Text Property.
- A green lightning bolt (⚡) will appear—click it to make the input dynamic.
- Expand getCustomPostBySlug under the Page section.
- Select Title—this will now pull the title from WordPress.
Step 2: Repeat the steps for the Subheading
- Select the subheading text.
- Click the green lightning bolt (⚡) in the Properties Panel.
- Under getCustomPostBySlug, select Content.
Step 3: Bind the Featured Image
- Select the Image in the Balanced Hero section.
- In the Properties Panel, find the src (source) field.
- Click the green lightning bolt (⚡).
- Expand getCustomPostBySlug → featured_media → source_url.
You have successfully created your first dynamic section in Clutch using the WordPress Plugin.