25
Jun
2025
Import HTML Pages from Claude Artefacts to WordPress
In this guide, you will learn how to import an HTML page generated by a third-party tool like Claude AI into your WordPress environment using the Live HTML Editor (LHE) plugin.
Table of Contents
1. About Live HTML Editor (LHE)
Live HTML Editor (LHE) is a WordPress plugin that lets you create and display standalone HTML pages within your WordPress site. It supports full HTML, CSS, and JavaScript integration, making it easy to embed complete custom pages.
In addition to its core function, Live HTML Editor (LHE) also offers:
- Support for integrating external CSS, JavaScript, and font resources
- An optional feature to capture screenshots of your HTML content and export them as PNG images
Live HTML Editor (LHE) is especially useful for embedding third-party HTML pages, such as landing pages or prototypes, into your WordPress environment.
2. Prepare Your HTML Page
In this example, we will use Claude AI to generate a landing page as an Artefact.
- Log in to the Claude platform.
- Prompt the AI to generate an HTML page.
- Wait for the code generation to complete.
- (Optional) Click “Publish” in the top right to get a public preview link.
3. Create a New HTML Element in WordPress
We will now use Live HTML Editor (LHE) to create a new HTML element.
In your WordPress Dashboard, go to: Resources > HTML
Click Add New HTML Element. and name your element.
You’ll see an editor with three inline code fields:
- Element HTML
- Element CSS
- Element JS
You can also assign external resources from:
- CSS Libraries
- JS Libraries
- Font Libraries
Once the element is created, Live HTML Editor (LHE) generates a shortcode you can embed in any WordPress page or post.
There are three methods to import external HTML contents:
- Manually imported
- Using the importer
- Using a bulk function
4. Manually Import the HTML, CSS & JS
We will focus on the manual method to understand how to structure your import properly.
4.1 Add Remotely Loaded CSS Libraries
Look for this pattern in your HTML:
<link href="https://cdnjs.cloudflare.com/.../bootstrap.min.css" rel="stylesheet">- Copy the URL from
href - In WordPress Dashboard: Resources > CSS > Add New
- Paste the URL into the Remote URL field.
- Check “Load Remotely” for testing.
- Once validated, you can uncheck “Load Remotely” to serve locally
- Optionally wrap with a unique class (but cannot wrap & load remotely at the same time)
- Avoid duplicates: if your theme already loads this library, check “Skip local pages”.
- Click Update, then attach the library in your HTML Element.
Parent Library: If this library depends on another, specify its parent CSS library.
4.2 Add Remotely Loaded JS Libraries
Look for this pattern:
<script src="https://cdnjs.cloudflare.com/.../bootstrap.bundle.min.js"></script>- Copy the URL from
src. - In WordPress Dashboard: Resources > JS > Add New
- Paste into the Remote URL field.
- Enable “Load Remotely” for testing.
- Optionally serve locally after testing.
- Use “Skip local pages” if the script is already included.
- Update and add it to your HTML Element.
Parent Library: Set a parent JS library if this one depends on another.
4.3 Add Font Libraries
Look for this pattern:
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Plus+Jakarta..." />- Copy the URL from
href - In Dashboard: Resources > Fonts > Add New
- Paste it into Font URL.
- Add the Font Family name (e.g., Plus Jakarta Sans).
- Use “Skip local pages” if it’s already loaded.
- Save and link it to your HTML Element.
4.4 Add Inline CSS and JS
Add inline CSS:
- Copy styles inside
<style>...</style> - In Element Editor, click Edit CSS Code.
- Paste styles without the
<style>tags.
Add inline JS:
- Copy scripts inside
<script>...</script> - Click Edit JS Code.
- Paste scripts without the
<script>tags.
4.5 Add the HTML Markup
- Locate the content inside
<body>...</body> - Remove any:
<script><style><link>tags (those are handled separately)
- Copy the remaining HTML markup.
- Click Edit HTML Code and paste it without
<body>tags.
5. Preview & Finalize
Click one of the following to test your element:
- Preview Changes
- Open in Editor (for live editing)
To serve the element in production copy the generated shortcode and paste it into a blank post or page.
Tip: You can also choose a layout template for your page:
- Full Width
- Blank Page
Your Claude-generated page is now integrated into your WordPress site!
