Already have a website design somewhere else - built with an AI design tool, or hand-coded as static HTML, CSS and JavaScript? The site importer brings it into WordPress in one upload: drop a single .zip of the exported files, and NitroShock creates a real, published WordPress page for every page in the export, installs your header, footer and stylesheet, and keeps your navigation working. No AI credits are used - this is a direct import of files you already have.
What You Need
The NitroShock theme - active on your site. The importer is part of the theme's Build My Site screen, so it works whether or not the NitroShock Page Builder plugin is installed.
A static export. Only HTML, CSS and JavaScript sites are supported - the kind an AI design tool exports, or a hand-coded static site. There's no server-side rendering, so a WordPress export, a PHP application, or a site that needs a build step won't work here.
The NitroShock Page Builder plugin (optional, but recommended). Pages import and publish without it. With it active, each page's own extra stylesheet or script (for example a contact form's styles) and any page-specific schema (structured data) also show up on the live page - without the plugin, that per-page CSS/JS/schema is stored but not output. Your shared header, footer and site-wide stylesheet work either way.
Preparing Your Export
Zip your exported site with this layout:
index.html Full home page: <head> + <header> + <main> + <footer> inlined
partials/
header.html Shared header, identical to the one in index.html
footer.html Shared footer
main/
about-us.html One file per interior page - just its <main>...</main> block
services.html
contact.html
css/
styles.css Shared - loaded on every page
contact.css Page-specific - attached only to the page that uses it
js/
main.js Shared - loaded on every page
contact.js Page-specific
A single wrapping folder (for example export/) is fine - the importer finds the files inside it. Only .html, .css and .js files are read; anything else in the zip (images, README files, notes) is ignored.
| In your export |
Becomes, in WordPress |
index.html's <main> |
Your home page's content |
partials/header.html / footer.html |
Your site's header and footer, shown on every page |
main/<name>.html |
A published page |
css/styles.css, js/main.js |
Loaded on every page |
| A CSS or JS file used by only one page |
Loaded only on that page |
A page's own <script type="application/ld+json"> |
That page's schema (structured data) |
Upload a .zip, not loose files. On the import screen you can also drag individual files or use "choose a folder," but those only bring in a single header and footer - to import every page, zip the export first and upload the .zip.
Two Rules for a Complete Import
The importer is forgiving - it will guess a page's web address from its filename, its title from the page's <title> tag, and which stylesheet or script belongs to it. Two things it can't reliably guess, so follow these and nothing is left for you to fix by hand afterward:
Name each file after its menu link. If your navigation links to /about-us/, the file is main/about-us.html - not about.html. A mismatch leaves that one navigation link pointing at the old address; the import summary lists any it couldn't match so you can rename and re-import.
Give each page a short directive comment, and use live schema tags. Start every file in main/ with a comment naming its address, its parent page (for a nested address like /services/consulting/), its title, and its description, then its actual <script type="application/ld+json"> tag if it has one - not a note describing what the schema should be:
<!-- ns:page slug="consulting" parent="services"
title="Business Consulting | Example Co"
description="One-on-one consulting for growing businesses." -->
<script type="application/ld+json">
{"@context":"https://schema.org","@type":"Service","name":"Business Consulting"}
</script>
<main>
...
</main>
A Prompt for Your AI Design Tool
If you're exporting from an AI design tool, give it this prompt so the export already matches the layout above. You don't need to copy it from here - on the import screen (NitroShock → Build My Site → Import a site you already built), click Download the export prompt to get the current version as a .txt file:
Export the finished site as a static hand-off package with this exact structure -
HTML, CSS, and JS only (no build step, no framework runtime):
index.html full home page: <head> + <header> + <main> + <footer> inlined
partials/header.html the shared <header>...</header>, identical to the home page's
partials/footer.html the shared <footer>...</footer>
main/<slug>.html one file per interior page - ONLY that page's <main>...</main>
css/styles.css one shared stylesheet, loaded on every page
css/<name>.css any page-specific styles (kept separate)
js/main.js one shared script, loaded on every page
js/<name>.js any page-specific scripts
Rules:
1. Use semantic, class-based HTML. Refactor inline styles into reusable classes in
styles.css. No inline <style> or <script> blocks in the page files.
2. Name each main/ file exactly the last segment of its nav link - if the menu
links to /about-us/, the file is main/about-us.html.
3. Begin every main/<slug>.html with, in order: a directive comment
(<!-- ns:page slug="..." parent="..." title="..." description="..." -->),
the page's own live <script type="application/ld+json"> schema block(s),
then the <main>...</main> block. Nothing else.
4. The home page keeps a full <head> with title, meta description, canonical,
and its JSON-LD.
5. Every page has a unique title and meta description.
6. Navigation lives in partials/header.html with clean slugs (/about-us/,
/services/consulting/). Keep the same markup in index.html.
7. Deliver the whole thing zipped.
Running an Import
- Go to NitroShock → Build My Site in your WordPress admin.
- Choose Import a site you already built.
- Drop your
.zip on the upload area, or use "Browse for a .zip or .html."
- The importer detects whether it's a full multi-page site or just a header and footer, and builds accordingly. This runs immediately - there's no review step before pages are created.
- Read the results panel (below) and decide whether to keep the import or roll it back.
What Happens During Import
For a full-site .zip, NitroShock:
- Creates a published WordPress page for each file in
main/, plus your home page from index.html, and sets it as your site's front page.
- Installs your header, footer and shared stylesheet/script so they load on every page.
- Keeps your own navigation exactly as designed, rewriting its links to point at the pages it just created.
- Carries over each page's schema (structured data), keeping only the parts not already covered by your site-wide schema, so nothing is duplicated.
- Switches your site to Imported design mode (when the Page Builder plugin is active), so NitroShock's own design styles step aside and your stylesheet controls the look.
Importing over an existing site. If a page in the zip has the same address as a page you already have, that page is updated in place - same web address, same page, so menus, links and search rankings aren't disturbed. A page at a new address is created fresh. Re-importing the same site more than once (for example after fixing something and re-exporting) never creates duplicate "-2" pages.
Reviewing the Result
After an import, a summary shows exactly what happened - a count of new pages and pages updated in place, and two lists you can act on immediately: every new page and every updated page, each with a Live or Draft badge and its own View and Edit links. Below that: any files that were skipped, any navigation links that couldn't be matched to a page, and how many pages carried over schema. Nothing is summarized away - every page the import touched is listed and one click from being opened.
Undoing an Import
Before your first import changes anything, NitroShock quietly saves the page you're about to overwrite - not a copy every time, just once, so the backup always holds your true original even if you import the same zip five times while you're refining it. A brand-new page it creates has no prior version to save; undoing removes it instead.
Right after an import finishes, the results panel offers two choices:
- Roll back this import - restores every changed page to exactly what it was before, moves any page the import created to the Trash, and puts your header, footer, stylesheet and home page back the way they were.
- Keep changes - clears the saved backup. Use this once you're happy with the result; your next import will start a fresh backup of whatever is live at that point.
You'll also see a reminder with the same two choices at the top of Build My Site until you decide - so leaving that screen without choosing doesn't lose the option.
Navigation & Menus
By default, NitroShock keeps the navigation exactly as it was designed in your header - dropdowns, mobile menu and all - and only rewrites its links to point at the pages it created. If you'd rather manage the menu from WordPress instead (Appearance → Menus), add this comment to your header before zipping it:
<!-- ns:menu -->
Wherever that comment appears, NitroShock shows your site's own WordPress menu in its place instead of the design's built-in navigation.
Requirements & Limits
- You need to be logged in as an administrator to import a site.
.zip upload needs the PHP zip extension on your server (standard on virtually all WordPress hosting). If it's missing, use "choose files" to select the .html with its .css/.js instead - that imports a header and footer only.- A zip can contain up to 400 files, and each file can be up to 2 MB.
- Only
.html, .htm, .css, .js and .mjs files inside the zip are read.
Troubleshooting
It only imported one page, not my whole site. You likely dragged loose files or used "choose a folder" instead of uploading a .zip. Zip the export folder and upload that file.
"No .html file was found in that .zip." The zip doesn't contain any recognizable HTML files at its root or inside main//partials/. Double-check the folder layout above.
A navigation link still points to the old address. Its file in main/ is named differently from the address the menu links to. Rename the file to match (see "Two Rules" above) and re-import - the results panel lists exactly which links didn't match.
A page's own stylesheet, script, or schema isn't showing on the live page. The NitroShock Page Builder plugin isn't active. Page content and your shared header/footer/stylesheet still work without it, but a page's own extra CSS, JS and schema need the plugin active to output on the front end.
"ZIP import needs the PHP zip extension." Your host's PHP build doesn't include it. Use "choose files" to select the .html file with its .css/.js instead, or ask your host to enable the zip extension.
FAQ
Does importing a site use my AI credits?
No. This is a direct file import, not AI generation - no credits are used.
Do I need the Page Builder plugin?
No, not to import and publish pages. You do need it active for a page's own extra stylesheet/script and its schema to actually appear on the front end - otherwise they're saved but not shown.
Will importing the same site twice create duplicate pages?
No. Pages are matched by web address - the same address updates the existing page in place rather than creating a new one.
I hand-edited an imported page in WordPress, then re-imported. What happens to my edit?
Re-importing overwrites that page's content with the zip's version. The page you're about to overwrite is backed up automatically before the very first import touches it, and WordPress also keeps its own revision history for every save, so your prior version is recoverable either way.
Can I undo an import?
Yes. The results panel shown right after an import finishes has a "Roll back this import" option that restores everything to how it was before.
Can I use my site's own WordPress menu instead of the design's navigation?
Yes. Add the comment <!-- ns:menu --> to your header before zipping it, and NitroShock shows your WordPress menu there instead.
