{"id":48798,"date":"2022-03-21T08:32:09","date_gmt":"2022-03-21T08:32:09","guid":{"rendered":"\/tutorials\/?p=48798"},"modified":"2026-09-17T01:47:08","modified_gmt":"2026-09-17T01:47:08","slug":"wordpress-react","status":"publish","type":"post","link":"\/au\/tutorials\/wordpress-react\/","title":{"rendered":"How to use React with WordPress"},"content":{"rendered":"

To use React with WordPress, keep WordPress as your content management system (CMS), then use its REST API to fetch and display your content in a separate React front end<\/strong>.<\/p>

In this WordPress-React setup, you build the front end on your computer using Next.js as the React framework, then deploy it to your web app hosting provider.<\/p>

Here are eight steps to integrate WordPress with React:<\/p>

    \n
  1. Prepare WordPress as a content back end<\/strong>. Set your permalinks and confirm that the built-in REST API returns your published posts.<\/li>\n\n\n\n
  2. Create your Next.js project<\/strong>. Generate the app, run it locally, and store your WordPress REST API URL in an environment variable.<\/li>\n\n\n\n
  3. Fetch and display WordPress posts<\/strong>. Request your published posts through the REST API and show their titles and excerpts on your Next.js home page.<\/li>\n\n\n\n
  4. Add individual post pages<\/strong>. Create dynamic routes that use each WordPress post slug to fetch and display the matching post.<\/li>\n\n\n\n
  5. Display images and custom content<\/strong>. Add featured images and expose the custom post types or custom fields your Next.js app needs.<\/li>\n\n\n\n
  6. Add authentication for protected content<\/strong>. Use a WordPress Application Password when your app needs drafts, private posts, or write access.<\/li>\n\n\n\n
  7. Add SEO metadata and a sitemap<\/strong>. Create page titles and meta descriptions for your posts, then generate a sitemap for your public URLs.<\/li>\n\n\n\n
  8. Deploy your Next.js app<\/strong>. Publish the app to a web app hosting, connect your domain, and configure its environment variables.<\/li>\n<\/ol>

    <\/p>

    How does React integrate with WordPress?<\/h2>

    React integrates with WordPress in three main ways: as a separate headless front end, inside Gutenberg blocks and plugins, or as React components inside a traditional WordPress theme<\/strong>.<\/p>

    With a headless WordPress setup<\/a>, you keep managing content in WordPress while Next.js retrieves that content through an API and renders your public site.<\/p>

    WordPress provides a built-in REST API, a set of web addresses that return your posts, pages, and media as plain data instead of finished pages, so you don’t need an extra plugin to connect it to Next.js.<\/p>

    You handle navigation, page templates, metadata, and previews in your Next.js app because it replaces your WordPress theme. Plugins that depend on theme output won’t automatically carry over to your front end.<\/p>

    Alternatively, use React inside WordPress for custom Gutenberg blocks, editor interfaces, or plugin screens when you don’t need a separate front end. WordPress continues to handle your theme, URLs, public pages, and most plugin behavior.<\/p>

    You can also keep your traditional WordPress theme and add React only to the parts that need more interactivity. This approach works well for advanced filters, calculators, dashboards, and search tools.<\/p>

    Approach<\/strong><\/td>How it works<\/strong><\/td>Front-end speed<\/strong><\/td>Development effort<\/strong><\/td>SEO handling<\/strong><\/td>Plugin compatibility<\/strong><\/td><\/tr>
    Headless WordPress<\/td>Your Next.js app gets content from WordPress through an API<\/td>High, depending on how you render and cache pages<\/td>High<\/td>You handle rendering and metadata in Next.js<\/td>Low, especially for plugins that depend on theme output<\/td><\/tr>
    Gutenberg and plugins<\/td>You use React inside the WordPress editor or plugin interfaces<\/td>Depends on your WordPress theme<\/td>Medium<\/td>WordPress handles your public pages<\/td>High<\/td><\/tr>
    React in a theme<\/td>You add React components to PHP-rendered WordPress pages<\/td>Depends on your theme and React code<\/td>Medium<\/td>WordPress handles most SEO output<\/td>Generally high<\/td><\/tr><\/tbody><\/table><\/figure>

    This tutorial uses the headless WordPress approach, with Next.js as the front end and the built-in REST API connecting it to your WordPress content.<\/p>

    What to prepare before integrating React with WordPress<\/h2>

    Before integrating React with WordPress, prepare your WordPress site, hosting for your Next.js app, Node.js with npm, and a code editor<\/strong>.<\/p>

    Start with a running WordPress site and publish at least one post<\/a> with a featured image. You’ll use this content to test the Next.js app later.<\/p>

    You can keep WordPress on your current hosting provider, but you’ll need a separate web app hosting plan<\/a> for your Next.js app. Get one from Hostinger or another provider that supports Node.js apps.<\/p>

    Next, install Node.js 20.9 or newer on your computer from its official website<\/a>. npm comes bundled with Node.js, so you don’t need to add it separately.<\/p>

    You’ll also need a code editor such as Visual Studio Code (VS Code) to develop your Next.js front end.<\/p>

    \"Hostinger<\/a><\/figure>

    1. Set up WordPress as a headless content back end<\/h2>

    Set up WordPress as a headless content back end by switching your permalinks to Post name<\/strong> and confirming that the WordPress REST API<\/a> returns your published posts.<\/p>

    To do this, open your WordPress dashboard and go to Settings → Permalinks<\/strong>. Under Permalink structure<\/strong>, choose Post name<\/strong>, then hit Save Changes<\/strong>.<\/p>

    \"WordPress