Sorry, your browser does not support inline SVG.

Documentation

Importing WordPress Sites

Convert your WordPress site to a modern Laravel application

Import your WordPress site and rebuild it as a modern Laravel application with Vue components.

Quick Start with the Import Skill

For a guided import experience, add the WordPress import skill to your project:

Step 1: Create the skill file at .claude/skills/wordpress-import/SKILL.md:

mkdir -p .claude/skills/wordpress-import
curl -o .claude/skills/wordpress-import/SKILL.md https://raw.githubusercontent.com/Stellify-Software-Ltd/stellify-mcp/main/skills/wordpress-import.md

Step 2: Add the skill to your CLAUDE.md (create the file if it doesn't exist):

## Skills

- wordpress-import: Use this skill when importing WordPress sites into Stellify. Invoke with /wordpress-import to start the guided workflow.

Step 3: Type /wordpress-import in your editor to start the guided workflow.

Alternatively, follow the manual steps below.

Overview

WordPress sites can be imported into Stellify by converting:

  • Posts & Pages → Eloquent models + Vue templates
  • Custom Post Types → Full resource scaffolds (model, controller, migration)
  • Templates → Vue single-file components
  • Plugins → Native Laravel/Vue equivalents
  • Menus → Vue navigation components
  • Widgets → Reusable Vue components

Before You Start

Export Your WordPress Data

You'll need to export content from WordPress. The AI can work with several formats:

Option 1: WordPress XML Export (easiest)

In WordPress admin: Tools → Export → All content → Download Export File

Option 2: WP-CLI (most complete)

# Export all content
wp export --dir=./export

# Export specific post types
wp export --post_type=post,page,product

Option 3: REST API

# Export posts
curl "https://yoursite.com/wp-json/wp/v2/posts?per_page=100" > posts.json

# Export pages
curl "https://yoursite.com/wp-json/wp/v2/pages?per_page=100" > pages.json

Gather Your Theme Files

Copy your theme folder locally. The AI will read:

  • header.php, footer.php - Global layout
  • index.php, single.php, page.php - Templates
  • functions.php - Custom functionality
  • Template parts in /template-parts/

Note Your Active Plugins

List plugins that add functionality you want to preserve:

  • Forms (Contact Form 7, Gravity Forms, WPForms)
  • SEO (Yoast, RankMath)
  • E-commerce (WooCommerce)
  • Custom fields (ACF, Meta Box)
  • Page builders (Elementor, Beaver Builder)

Importing Your Site

Basic Import

Open your WordPress export folder in your editor and ask:

Import this WordPress site into Stellify

The AI will analyze your content and theme, then create the equivalent structures in Stellify.

Step-by-Step Import

For more control, import in stages:

First, analyze this WordPress site and tell me what you find

The AI will report:

  • Post types and content counts
  • Theme structure and templates
  • Active plugins and their purposes
  • Custom fields and taxonomies

Then import selectively:

Create the Post and Category models with their relationships

Convert the header.php template to a Vue Header component

Import all pages as routes

WordPress to Stellify Mapping

Content Types

WordPress Stellify How to Import
Posts Post model + API create_resources with fields
Pages Routes + elements create_route + html_to_elements
Custom Post Types Full resource create_resources with schema
Categories/Tags Taxonomy models create_resources with belongsToMany
Media Storage + URLs Direct URL references

Templates

WordPress Template Stellify Equivalent
header.php Header.vue component
footer.php Footer.vue component
single.php SinglePost.vue component
page.php Page layout or per-page elements
archive.php PostList.vue component
sidebar.php Sidebar.vue component
front-page.php Home route with elements

Common Functions

WordPress Function Stellify Equivalent
the_title() {{ post.title }}
the_content() <div v-html="post.content">
the_excerpt() {{ post.excerpt }}
get_the_date() {{ post.published_at }}
the_post_thumbnail() <img :src="post.featured_image">
have_posts() / the_post() v-for="post in posts"
WP_Query Http.get('/api/posts')
get_permalink() Route helper or slug
wp_nav_menu() Menu component with Collection

Plugin Equivalents

Contact Forms

WordPress plugins like Contact Form 7 become Stellify Form components:

WordPress:

\[contact-form-7 id="123" title="Contact"\]

Stellify:

import { Form, Http } from 'stellify-framework'

const form = Form.create({
  name: '',
  email: '',
  message: ''
}).rules({
  name: 'required|min:2',
  email: 'required|email',
  message: 'required|min:10'
})

async function submit() {
  if (await form.validate()) {
    await Http.post('/api/contact', form.data())
  }
}

Ask the AI:

Convert my Contact Form 7 forms to Stellify Form components

Custom Fields (ACF)

ACF field groups become model fields and migrations:

WordPress ACF:

Field Group: Hero Section
- hero_title (text)
- hero_image (image)
- hero_cta (link)

Stellify:

Ask the AI:

Import my ACF field groups as model fields

The AI will add fields to your model migration and create appropriate casts.

WooCommerce

WooCommerce products become a full resource:

Create a Product model with WooCommerce-style fields: name, slug, description, price, sale_price, sku, stock_quantity, images, categories

The AI will scaffold:

  • Product model with all fields
  • ProductController with CRUD
  • Migration with proper column types
  • API routes for the catalog

SEO Plugins

Yoast/RankMath meta becomes model fields:

Add SEO fields to my Post model: meta_title, meta_description, og_image

Converting Templates

PHP Template to Vue Component

Give the AI your template:

Convert this WordPress template to a Vue component:

<?php get_header(); ?>
<main class="content">
  <?php while (have_posts()): the_post(); ?>
    <article>
      <h1><?php the_title(); ?></h1>
      <?php the_post_thumbnail('large'); ?>
      <div class="entry-content">
        <?php the_content(); ?>
      </div>
    </article>
  <?php endwhile; ?>
</main>
<?php get_footer(); ?>

The AI will create a Vue component with:

  • Header/Footer component imports
  • Data fetching with Http composable
  • Proper Vue template syntax
  • Tailwind classes (or your preferred styling)

Shortcodes

WordPress shortcodes become Vue components:

Shortcode Vue Component
\[gallery ids="1,2,3"\] <Gallery :ids="[1,2,3]" />
\[button url="/contact"\] <Button href="/contact" />
\[testimonials count="3"\] <Testimonials :count="3" />

Ask the AI:

Convert my shortcodes to Vue components. Here are the shortcodes I use: [list them]

Widgets to Components

Sidebar widgets become Vue components with props:

Convert my Recent Posts widget to a Vue component that accepts a count prop

Result:

<RecentPosts :count="5" />

Navigation Menus

Export your WordPress menu structure and ask:

Create a navigation component from this menu:

  • Home (/)
  • About (/about)
    • Team (/about/team)
    • History (/about/history)
  • Blog (/blog)
  • Contact (/contact)

The AI will create a Menu component with:

  • Recursive rendering for dropdowns
  • Active state highlighting
  • Mobile responsive toggle

Content Migration

Posts and Pages

For dynamic content, the AI creates seeders:

Create a seeder to import these WordPress posts: [paste JSON]

The seeder will:

  • Map WordPress fields to Eloquent models
  • Handle relationships (author, categories, tags)
  • Parse and store content

Media Files

For images and files:

  1. Upload media to your hosting/CDN
  2. Update URLs in content
  3. Or ask the AI to create a media migration script

Create a script to update image URLs from wp-content/uploads to my new storage path

Example Import Session

You: I have a WordPress blog with posts, categories, and a custom "Portfolio" post type. Import it into Stellify.

AI: I'll analyze your WordPress export and create the Stellify structure. Let me read the files.

AI reads wp-export.xml and theme files

AI: I found:

  • 45 Posts with categories and tags
  • 12 Pages
  • 8 Portfolio items (custom post type with fields: client, url, gallery)
  • Theme with header, footer, and 5 templates

I'll create:

  1. Post model with Category and Tag relationships
  2. Portfolio model with custom fields
  3. Vue components for your templates
  4. Routes for all pages

Should I proceed?

You: Yes, start with the models

AI: Creating models...

AI calls create_resources for Post, Category, Tag, Portfolio

AI: Models created:

  • Post (title, slug, content, excerpt, featured_image, published_at)
  • Category (name, slug, description)
  • Tag (name, slug)
  • Portfolio (title, slug, description, client, url, gallery, featured_image)

Relationships configured:

  • Post belongsToMany Category
  • Post belongsToMany Tag
  • Post belongsTo User (author)

Ready to create the Vue templates?

URL Redirects

After importing, set up redirects from old WordPress URLs:

Create redirects from WordPress URL patterns to my new routes:

  • /2024/01/post-slug → /blog/post-slug
  • /category/news → /categories/news
  • /?p=123 → lookup by ID

Tips for Success

  1. Export everything first - Have your XML export, theme files, and plugin settings ready
  2. Import models before templates - The AI needs models to exist for data fetching
  3. Describe custom functionality - Tell the AI about unique features in your theme
  4. Check ACF fields - List your custom field groups so they're properly migrated
  5. Test incrementally - Import and verify each section before moving on

Troubleshooting

Content not displaying correctly

  • Check that v-html is used for WordPress content (it contains HTML)
  • Verify API endpoints return the expected data
  • Ensure relationships are loaded (eager loading)

Shortcodes appearing as text

  • Shortcodes need to be converted to Vue components
  • Ask the AI to identify and convert remaining shortcodes

Styling differences

  • WordPress themes use different CSS frameworks
  • Ask the AI to match styles with Tailwind equivalents
  • Or import your custom CSS

Missing functionality

  • Some plugins have complex features that need custom implementation
  • Describe what the plugin does and ask for a Stellify equivalent
Next
Exporting Code