Convert this HTML page into a working WordPress theme in the `mydemosite` theme folder, preserving its existing design and mobile layout.
Before making changes, inspect the existing WordPress installation and theme folder and follow its existing structure where appropriate.
GOAL
I want this theme to demonstrate two ways of creating pages:
1. BLOCK PAGE
A page whose content can be maintained and edited inside WordPress using the block editor.
2. STATIC DEMO
A custom PHP page template whose layout and content are controlled directly by the theme code.
Both must use the same global design system and clearly belong to the same website.
Do not make Static Demo the site’s front page.
BLOCK PAGE
Convert the supplied HTML design into a WordPress implementation that preserves the design as closely as possible while allowing the main page content to be edited through WordPress.
Use native WordPress blocks, patterns, template parts or other appropriate WordPress functionality rather than hard-coding content that somebody is likely to want to edit later.
The purpose is to create a real website page that can be maintained inside WordPress without needing to edit code every time the copy, images or content changes.
Do not automatically make this page the site’s front page unless it is already configured that way.
STATIC DEMO
Also create one custom PHP page template called:
Static Demo
Use the same design system as the Block Page.
This page exists to demonstrate the alternative approach: a page whose layout and content are controlled directly by its PHP template rather than WordPress blocks.
Preserve the same typography, colours, spacing, buttons, links, forms and overall visual language.
Make Static Demo available as a selectable WordPress page template.
Do not make Static Demo the site’s front page.
GLOBAL DESIGN SYSTEM
Use the supplied HTML and existing web system as the source of truth for the design.
Create global theme styles for:
– typography
– colours
– spacing
– content widths
– headings
– paragraphs
– buttons
– links
– forms
– images
– lists
– common content elements
The goal is that a brand-new standard WordPress page should already look like it belongs to this website without needing a custom template.
Where the existing web system defines a value, rule or component, preserve it rather than inventing a replacement.
NAVIGATION
Use editable WordPress navigation for the primary header navigation and footer navigation.
Do not hard-code page URLs where WordPress should manage them.
Preserve the existing navigation design and responsive/mobile behaviour.
REUSABILITY
Use reusable templates, template parts, patterns and components where appropriate.
Do not unnecessarily duplicate shared elements.
Keep global elements such as the header, footer and shared styling consistent between Block Pages, normal WordPress content and Static Demo.
ACCESSIBILITY
Generate semantic, accessible HTML.
Include:
– appropriate landmarks
– logical heading hierarchy
– labelled form controls
– meaningful link and button markup
– keyboard-accessible navigation
– visible focus states
– appropriate image alt handling
Follow WordPress conventions.
DO NOT
Do not modify WordPress core files.
Do not add unnecessary plugins.
Do not add frameworks or external dependencies unless the existing theme already requires them.
Do not redesign the supplied page.
Do not replace the established design system with your own preferences.
Do not add functionality that is not required for this conversion.
Do not over-engineer this.
This is a straightforward WordPress website that should remain easy to understand, edit and maintain.
SENSE-CHECK THE DESIGN SYSTEM
Before finishing, compare the completed WordPress theme against the supplied web system and brand board.
Do not redesign anything.
Check that the global design rules have actually been carried into the WordPress theme, including:
– typography
– font families
– font weights
– type scale
– colours
– spacing
– content widths
– buttons
– links
– forms
– inputs
– borders
– radii
– section treatments
– image treatments
– responsive behaviour
– light and dark treatments where defined
Check both the Block Page and Static Demo.
Also inspect a normal WordPress page and confirm that its standard headings, paragraphs, links, lists, buttons and form elements inherit the shared visual system correctly.
Where the WordPress implementation differs from the approved web system, correct the implementation to match the web system.
Do not introduce new design decisions.
QUICK SMOKE TEST
Before you finish, run a quick technical smoke test of the theme.
Check for obvious problems including:
– PHP syntax errors
– missing or broken file references
– missing functions or includes
– WordPress hooks or functions being called incorrectly
– template or template-part errors
– broken asset paths
– obvious HTML structure problems
– obvious JavaScript errors
– anything that would prevent the theme or pages from loading correctly
Fix any problems you find.
Keep this quick.
Do not perform an exhaustive browser or visual QA pass.
Do not spend time testing every viewport, browser or interaction.
I will browser-test the finished site myself.
WHEN YOU ARE FINISHED
Check the implementation in the target WordPress installation.
Confirm that:
1. The Block Page preserves the supplied design and responsive structure.
2. Its content can be maintained through WordPress.
3. A normal WordPress page inherits the global theme styles.
4. Static Demo works as a selectable PHP page template.
5. Static Demo uses the same visual system as the Block Page.
6. Header and footer navigation can be managed through WordPress.
7. Nothing has modified WordPress core.
8. The implementation has been sense-checked against the web system.
9. The theme passes the quick technical smoke test without obvious errors.
Then briefly tell me:
– what you created
– which files you changed
– where I edit the Block Page
– where the Static Demo template lives
– where the global styles live
– whether the smoke test passed
– anything you fixed during the smoke test
– anything you think I should check manually in the browser
Keep the final report concise.