Turn a static HTML page into a WordPress page
You already built the page by hand. This tutorial makes it editable, dynamic and publishable, without rewriting the markup you were happy with.
1. Prepare the markup
Shilpi stores body-only HTML. Open your static file and take everything between the opening and closing body tags, no doctype, no head. Shilpi supplies those on render.
Two things need to leave the markup before you paste: inline style attributes, and style blocks. Move both into the page CSS field, or better, into global classes. This is not bureaucracy, it is the reason a single change can later reach every page that uses the same class.
<section style="padding:80px 0;background:#f5f1e9">
<h1 style="font-size:64px">Quiet work</h1>
</section><section class="section clay">
<h1 class="heading-display">Quiet work</h1>
</section>2. Paste it into Shilpi
- Create a WordPress page and choose Edit with Shilpi.
- Open Page code from the toolbar.
- Paste your markup into the HTML field, and your extracted CSS into Page CSS.
- Close the panel. The canvas renders it immediately.
Nothing has been converted, wrapped or transformed. What you pasted is what will ship.
3. Make it editable
Click any element on the canvas. The inspector opens on that exact node, and the breadcrumb at the bottom of the screen shows where you are, main › section.hero › h1.
Switch to the Structure tab to see the whole document as a tree of real tags and class names. Drag to reorder, or select a nested node that is hard to hit on the canvas.
.card once rather than styling three cards individually, and the fourth card you add next month is already correct.4. Promote the hardcoded bits to variables
Open Variables and add the values your page repeats, the accent colour, the section spacing, the display size. Then replace the literals in your CSS with var(--name).
Give --pad-x a Tablet and a Mobile value while you are there. Every class reading it becomes responsive in one move, which is considerably less tedious than writing three media queries by hand.
5. Swap hardcoded content for dynamic tokens
A static page has the title typed into it. A WordPress page should read it from WordPress. Replace the literals with tokens:
<h1 class="heading-display">Turn a static HTML page into a WordPress page</h1>
<p class="lead">Home / Tutorials / Lesson 1 Lesson 1 Basics 18 min Turn a static HTML page into a WordPress page You already built the page by hand. This tutorial makes it editable, dynamic and publishable, without rewriting the markup you were happy with. What you end up with A WordPress page that renders your original […]</p>
<img class="image-fluid"
src="data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2216%22%20height%3D%229%22%3E%3Crect%20width%3D%2216%22%20height%3D%229%22%20fill%3D%22%23e8e9ea%22%2F%3E%3C%2Fsvg%3E"
alt="">Now the client can change the page title in the WordPress editor they already know, and your layout follows. If a post has no featured image, the placeholder you set in Settings fills the gap, no broken image icon ever reaches a visitor.
6. Check the three views, then publish
Use the device switcher in the toolbar to check Desktop, Tablet and Mobile. Fix what you find at the variable level where you can, and only at the class level where you must.
Then press Save. Until you do, the live page is untouched, autosave has been writing revisions every minute, but only to the revision list.
Where this leaves you
You converted a static page without a rewrite, and the result is still readable HTML. That is the whole trick, and it is also the reason the next developer will not curse your name.