How to convert HTML into an editable WordPress theme

Prepare the whole site folder

Keep the HTML pages, stylesheets, scripts, images and fonts together. A ZIP containing only index.html can be missing most of what makes the page look correct. Preserve relative paths inside the archive and remove passwords, private information and unrelated files before submitting it.

If the source is already public, a URL can be easier than a ZIP. Use the ZIP route when you have a template or an offline export. Check that your licence permits the intended use, including any fonts, photographs or third-party components shipped with the template.

• Open the original website and check that its images, fonts and pages load correctly.
• Identify the homepage and any duplicate demonstration pages.
• List reusable sections such as heroes, cards and testimonials.
• Record external services such as forms, maps, bookings and payments.

See a converted website

See Cedar Studio before and after conversion. Compare the design, explore the images and sections you can edit, and download the WordPress theme to try it yourself. Cedar Studio is a fictional demo; the pages and images show the actual conversion result.

Reference: HTML to WordPress conversion example

Decide what your team needs to edit

List the changes your team makes most often, such as updating contact details, publishing articles or adding team members. Check that these changes are straightforward in WordPress. Shared details should stay consistent across pages.

Your converted theme uses the Secure Custom Fields plugin to make content editable. Follow the setup instructions included with the theme, and make sure the people maintaining the site know where to find their content.

Reference: WordPress: working with themes

Example: converting a team section

Suppose the HTML contains six team cards, each with a photograph, name, role and biography. If the cards cannot be edited individually, adding the next hire may require help. A useful conversion gives an editor a way to add a seventh person.

If each person has a profile page, check that adding someone creates a profile and adds them to the team list. If the cards only appear on one page, your team may only need a list they can add to or shorten.

Check menus, forms and connected services

Menus and sliders may look right while a contact form or booking service still needs setup. Try each feature your visitors rely on. Send a test enquiry, check that it arrives and confirm that any booking or payment links reach the right service.

Tracking scripts are removed during conversion so the new site can have its own tracking configuration. Recheck cookie consent and any analytics you intentionally add back. Do not treat the absence of old trackers as evidence that a site’s privacy requirements are fully handled.

Test edits, not just screenshots

After importing the theme and content, change a heading, replace an image and add an item to a repeated section. Inspect the result at phone and desktop widths. Check navigation, deep links, missing images, form submissions and pages that use different layouts.

A working handover should include the theme, required plugins, content, asset licences and notes about any remaining manual work. Before changing a live domain, use the migration SEO checklist to compare URLs and metadata with the original site.