Using the WordPress REST API in a Headless Setup to Display Posts

If you're running a headless WordPress setup — where WordPress manages your content but a separate frontend handles the display — the REST API is what connects the two.

It gives you structured access to both posts and pages via JSON, so you can build completely custom frontends using React, Vue, Next.js — or even no-code/AI tools like Loveable.dev and Bolt.new. These platforms now let you ask the AI directly to connect to your WordPress REST API and build interfaces that display your content with minimal setup.


Fetching Blog Posts

You can test this right now using your own WordPress site. Just visit this URL in your browser (replace yourdomain.com with your actual domain):

https://yourdomain.com/wp-json/wp/v2/posts

It will return a list of your latest published blog posts in JSON format.

You can also filter the results using query parameters like:

  • ?per_page=5 — limit how many posts are returned
  • ?categories=3 — show only posts from a specific category
  • ?slug=my-post — fetch a specific post by its slug

Fetching Pages

You can also fetch static page content, which is great for things like your homepage, About page, or Contact page.

To get a list of all published pages:

https://yourdomain.com/wp-json/wp/v2/pages

Or to fetch a specific page by its slug (recommended for routing in headless setups):

https://yourdomain.com/wp-json/wp/v2/pages?slug=about

Each page object includes:

  • title.rendered — the page title
  • content.rendered — the full HTML content
  • slug — useful for frontend routing
  • excerpt.rendered — if you're using excerpts

Do You Need to Set Anything Up in WordPress?

For most sites: nothing.

The WordPress REST API is enabled by default, and public posts and pages are available with no authentication. That said, make sure:

  • Posts and pages are published (drafts and private content won’t show)
  • The /wp-json/ route is not blocked by security plugins or firewalls
  • Any custom post types are registered with show_in_rest => true if you want to access them via the API

You Can Build the Frontend with AI Tools Like Loveable.dev or Bolt.new

If you’d rather not hand-code your frontend, tools like Loveable.dev and Bolt.new now let you describe what you want — and the AI will generate the frontend for you.

For example, you can say:

“Show the latest blog posts from my WordPress site using the REST API”

…and it will create the layout, fetch the data, and display it — all within minutes. It’s a fast and flexible way to build headless experiences without needing a full dev team.


What About WooCommerce?

You can also use the REST API to access WooCommerce data — like products, categories, orders, and more — but Woo requires a little extra setup.

Here’s how to enable it:

  1. Go to WooCommerce → Settings → Advanced → REST API
  2. Click "Add Key" to generate a consumer key and secret
  3. Use those credentials to authenticate requests to endpoints like:
https://yourdomain.com/wp-json/wc/v3/products

Once that’s done, you can pull product data into your frontend just like you would with posts or pages — perfect for building a custom storefront or product display with full control over layout and UX.


Final Thoughts

The WordPress REST API gives you total flexibility when building headless websites. Whether you’re hand-coding a frontend in React, or using AI tools like Loveable.dev and Bolt.new, it’s easier than ever to fetch and display your WordPress content anywhere.

And if you’re running WooCommerce, you can go headless there too — just enable the API and start building.


Comments

Leave a Reply

Your email address will not be published. Required fields are marked *