Introduction
Download the Clutch Plugin
Install the Plugin in WordPress
Install the Clutch plugin:
- Open WordPress Admin Panel (
mysite.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.
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. (
mysite.com)
- 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.
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.
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.,
mysite.com)
- 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!
Bind Data from WordPress to Clutch
Now that your Clutch page is linked to WordPress, you can dynamically display WordPress content by binding data.
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.
Bind the Subheading
- Select the subheading text.
- Click the green lightning bolt (⚡) in the Properties Panel.
- Under getCustomPostBySlug, select Content.
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.