How to Connect Hostinger, WordPress, and Vercel

The Backend (admin.yourwebsite.com): This is your private workspace on Hostinger. You log in here to type your text and upload images. The public never sees this link.

1. The Frontend (yourwebsite.com): This is your public display on Vercel. This is the link you share with the world. It grabs the data from your private admin link and shows it to visitors.

Your website lives on one URL (yourwebsite.com). To make it headless, you need to cut it in half:

Step 1: Create the Private Admin Link

Before touching your main site, you need to build the hidden space for your workspace.

1. Log in to Hostinger.
2. Go to Websites > Dashboard for your domain.

• On the left sidebar click on domains, and click on Subdomains.

• In the “Subdomain” box, type the word admin.

• Click Create. (You will now see admin.yourwebsite.com in your list).

• Now click on Website on the left sidebar right below the ‘Domains’ bar and search for Auto Installer. Or you can type Auto Installer on the search bar.

• Select WordPress.

• Crucial Setup: In the popup, click Advanced. Under “Installation Path,” select your new admin subdomain.

• Finish the installation. Your workspace is now at admin.yourwebsite.com/wp-admin.

Step 2: Connect with Vercel

You must tell admin site WordPress to send its data to Vercel.

1. In your New hidden dashboard, go to Plugins > Add New.

• Search for WPGraphQL and WPGraphQL for ACF. Install and Activate it.

• Click GraphQL > Settings in the left menu.
• Copy the GraphQL Endpoint link (it looks like https://admin.yourwebsite.com/graphql). Save this.

In this image, I have done with the Vercel deployment and domain transfer which we will discuss later, that is why is changed otherwise it must show the domain name like thus https://admin.wpfedev.com/graphql).

Step 3: Set Up Vercel & GitHub

Now we give your main URL to Vercel so it can show your content.

1. Log in to Vercel. Click Add New… and select Project.

• Under “Clone a Template,” go to “Browse All” (Clear out all filters from filter templates) and search for WordPress.

• Select the Next.js Starter with WordPress template and click Deploy.
• Vercel will ask to create a Vercel Team. Give it a name and click Continue.

Buy a pro version or use free version (hobby).

• On the next screen, on the left bar, go to setting find Environment Variables.

• In the box named WORDPRESS_API_URL, paste the link you copied GraphQL Endpoint link.
• Click Deploy. Vercel is now building your site.

The Security Vault (Environment Variables)

Before Vercel builds the site, you must securely lock your credentials in the dashboard so they are never exposed in your code.

1. On the deployment screen, find the Environment Variables section.
2. Add these four core variables one by one:
   1. Key: WORDPRESS_API_URL | Value: Your GraphQL Endpoint
   2. Key: NEXT_PUBLIC_WORDPRESS_API_URL | Value: The exact same GraphQL Endpoint
   3. Key: WP_USERNAME | Value: Your WordPress admin username
   4. Key: WP_APP_PASSWORD | Value: Your 24-character WordPress Application Password

How to Generate Your Application Password

You have to create this password inside your WordPress dashboard. Here are the exact steps:

1. Go to your WordPress admin dashboard (admin.wpfedev.com/wp-admin) using your normal username and normal login password.
2. On the left-hand menu, click on Users, then click Profile.
3. Scroll almost all the way to the bottom of the page until you see a section called Application Passwords.
4.  In the “New Application Password Name” box, type a name so you remember what this is for (e.g., type Vercel NextJS Portfolio).
5. Click the Add New Application Password button.
6. WordPress will instantly generate a 24-character password that looks like this: xxxx xxxx xxxx xxxx xxxx xxxx.

If the Application Passwords section is missing from your Profile, follow these three quick steps:

• Ensure your site is loading via https://. WordPress automatically hides this feature on insecure connections.
• Temporarily deactivate any security plugins (e.g., Wordfence) or hosting-specific tools (e.g., Hostinger Tools) that often block this feature for “hardening.”
• Perform a hard refresh of the Profile page. The section will appear at the very bottom, below the “Account Management” area.

CRITICAL WARNING: WordPress will only show you this password ONE TIME. Once you leave that page, you can never view it again.

Copy that 24-character password and paste it directly into the WP_APP_PASSWORD box in your Vercel settings!

Deploy the Site

1. Once all four variables are added, click the blue Deploy button.
2. Vercel will now securely pull your configuration, connect to Hostinger, and build your live website.

Step 4: Syncing the Domain

To sync your domain, follow these concise steps to point your Original (Main) website to Vercel while keeping your Admin site on Hostinger.

1. Which Website?

• Target: Apply these changes ONLY to your Original/Main Domain not the admin one.

2. What to Replace (DNS Settings)

In your Hostinger DNS dashboard (as seen in your screenshot):

• Find the A Record: Look for the row where the Type is A and the Name is @.
• The Action: Click Edit on that row.
• The Value: Replace the current Content with the Vercel IP Address.
• The CNAME: If you have a www record, ensure it points to vercel address.