HTML to WordPress

What should you prepare before you convert HTML to WordPress?

A conversion goes faster when the agent can see the whole page at once and knows which parts matter. Collect the files first, decide what the WordPress version has to do, and set up a place where a mistake costs nothing.

Before you start

• A staging copy or a fresh WordPress install, never your live site
• The page's HTML file plus every CSS file it loads
• The images, logos and font files the page uses, gathered in one folder
• A note of every form, embed or script on the page
• A recent backup of the WordPress site you are building on

If the page came from a site builder export, open the HTML file in a browser and check that it still renders on your own machine. Broken relative paths are much easier to fix before the agent starts than halfway through the rebuild.

How does each part of an HTML page map to WordPress blocks?

Most static pages are assembled from a small set of patterns, and nearly every one of them has a native block that does the same job. Knowing the mapping helps you read the draft the agent produces and spot the places where it had to guess.

Sections that fit none of these rows, such as a pricing toggle or an image carousel, are the ones the agent should flag for you instead of faking with a pile of nested groups.

How do you keep your design when the CSS moves into WordPress?

The most common mistake in an HTML to WordPress conversion is pasting the old stylesheet into a custom CSS box and calling the job done. It looks right on day one, then breaks the first time someone adds a block that the old selectors never knew about.

The cleaner route is to move the design decisions instead of the selectors. Ask the agent to read your CSS and pull out the colors, font families, font sizes and spacing values, then save them as the site's global styles in the Site Editor. Blocks inherit those values automatically, so new content matches the old design without extra code.

What usually needs a manual touch

Custom breakpoints, complex hover effects and CSS animations rarely have a matching global style setting. Keep a short list as the agent finds them, and decide for each one whether it deserves a small block style or whether the page reads perfectly well without it.

How do you move images, fonts and other files?

An HTML page usually loads images from relative paths such as images/hero.jpg. WordPress cannot find those, so every image has to go into the Media Library and every block has to point at the new address. Ask the agent to upload each image, write alt text from the surrounding content, and swap the old paths while it builds.

Fonts need the same care. If your page loads a font from a hosted service, the WordPress Font Library can register the same family so the Site Editor offers it everywhere. If you were serving font files yourself, upload them through the Font Library instead of linking to the old folder.

Favicons, downloadable PDFs and video files are easy to forget. Add them to your file list, upload them to the Media Library, and check every link that pointed at them.

What should you paste into the chat?

Give the agent one page at a time. A focused request with the source attached produces a cleaner draft than an instruction to convert a whole folder in one go.

A first prompt that works

"Here is the HTML and CSS of our About page. Rebuild it on a new draft page called About using native blocks only, with no Custom HTML block. Move colors, fonts and spacing into global styles first. Upload the images from the attached folder to the Media Library. When you finish, list anything you could not convert."

Follow-up prompts for the second pass

"The three team cards stack in the wrong order on mobile. Put each photo above the name." Or: "The hero heading is hard to read over the photo. Add a dark overlay to the Cover block at about half opacity." Short, specific corrections like these land faster than asking for a full rebuild.

How do you convert a multi-page HTML site?

Start with the page that holds the most shared parts, usually the home page, and let the agent build the header, footer and global styles from it. Every page after that reuses those pieces, so the second and third conversions take far less effort than the first.

Once the shared parts exist, convert the remaining pages in order of traffic or importance. Ask the agent to keep a running list of the internal links it finds, so menu items and links inside the text can be pointed at the new WordPress addresses after every page exists.

If your source is a live website rather than a folder of files, the live URL to WordPress guide covers fetching the pages first. Designs that only exist in a design file are covered in Figma to WordPress, and sites leaving a hosted builder have their own route in Squarespace to WordPress.

How do you check the result before you publish?

Treat the draft as a first version, not a finished page. Open it in the editor and on the front end, then work through this order:

• Compare it side by side with the original at desktop width
• Resize to phone width and check that every section stacks sensibly
• Click every link and button, including the ones in the footer
• Confirm that each image has alt text and comes from the Media Library
• Run the page through a speed test and compare it with the old version

Anything that fails goes back to the agent as one short, specific request. Keep revisions switched on, so you can step back if a fix makes something else worse.

How do you replace an old static site without losing visitors?

If the HTML site is already live and indexed, its old addresses carry search traffic. Before you point the domain at WordPress, list every old URL, such as about.html, and set a 301 redirect to the matching WordPress page. A redirect plugin or your host's redirect rules both do the job.

Copy the old title tags and meta descriptions into your SEO plugin as a starting point, then improve them. After launch, watch for 404 errors for a few weeks and add redirects for anything you missed.

When the site is stable, the converters directory lists the other sources you can bring into WordPress, and the guide on letting an AI agent work on WordPress safely is worth reading before you hand the agent more of the site. The connection used in every step above comes from NibWP, the plugin that lets your AI client work directly on your WordPress install.