Headless WordPress with Webstudio Full Tutorial

Your WP hosting is thinking the request coming from Cloudflare Workers is a bot and is trying to do a human challenge on it

Are you using hostinger by chance?

I host with SiteGround

Ah well apparently they are blocking Cloudflare Workers. Here is the Cloudflare Worker doc about their IP address if you want to coordinate with SiteGround https://developers.cloudflare.com/fundamentals/reference/http-request-headers/#cf-connecting-ip-in-worker-subrequests

I apologise for the late response. I tried it today with another provider and it worked. I also spoke to siteground, they just said I had to save the ip from cloudflare in whitelist. I'll have to see where I can see it 🙂

Thanks for sharing!

It worked great. I have one more question. I have integrated the overview of the blogs under the post. https://codeground-hm1p6.wstd.io/blog/webstudio.

Is it also possible to hide the current blog in the overview under the blog article? I tried here, but couldn't find a command.

On the "Show" toggle, add a binding and make the condition something like



Meaning, if the current page slug equals the current iteration of the collection are the same, hide it (false means turn of show), otherwise show it. Just replace the variables with your actual vars

Thank you very much. I have tried it with the following list. There seems to be an error somewhere. Everything disappears. Have I misunderstood something here?

You're hiding the entire collection so yeah the whole thing is going to hide 🙂 You need to hide just the individual blog posts which are children of the collection "Content Card"

Thank you for your tips. But I think it's beyond my knowledge. I need to study the basics more. I applied it to the card. It hides everything. I tried it on the content card. The same. I asked ChatGPT and used my GraphQL from Wordpress to help it output the exact path (variable). All to no avail 😦

Share what youve done on the card. The expression was probably always failing so it output "false" hiding it

I have also attached the data from the query composer and looked here.

I think both variables are wrong.

First, get the current slug.

you can do this with



Next get the current collection not the entire CMS Data variable.

Each collection outputs a variable by default called Collection Item. This represent the curernt iteration. So if you bind something to collection that has three posts, the Collection Item variable will be the first post on the first box, the second post on the second box etc.

So you need to do something like



I don't know the exact data structure so just use autocomplete to access it.

So card ones test might look like this if the current slug is "hello-world"

hello-world == lorem-ipsum (this statement is false so the toggle will stay on)

hello-world == hello-world (this statement is true, so the toggle will turn off)

hello-world == webstudio (again, false, keep it on)

Thanks. I'll give it a try. It might also be a topic for a YouTube video. 🙂

It worked. Thank you so much.

nailed it! Just move that expression to the link though instead of the card (up one parent)