Introduction

This guide is a walkthrough using a WordPress to Markdown converter, which is recommended for most use cases where you want to migrate your content from WordPress to Tina.

Other conversion options that are not covered in this guide include:

• Using the WordPress Rest API - best for extracting the pure html for page or post content in JSON format
• Using the WPGraphQL plugin - best for cases where you want to query and extract specific data and content

Prerequisites

• Node.js is installed
• You have set up a Tina starter

Getting Started

Converting WordPress to Markdown

1. Export your Wordpress content by going to https://wordpress.com/export/ and select Export All

💡 Note: Name it **export.xml **to make it easier for you in the next step

Use wordpress-export-to-markdown to convert your WordPress content into Markdown.

1. In the folder where you've saved your exported file export.xml, run:

npx wordpress-export-to-markdown --post-folders=false --include-other-types=true

3. When prompted, make sure the filename is correct, and use the default values for the other prompts.

This creates an output folder that groups your posts and pages into separate folders.

Import data to TinaCMS

Migrating images to TinaCloud

1. In the output folder, drag the image folders output/post/images and output/page/images to your Tina app's public/uploads folder.

💡 Note 1: You can rename the folder before dragging to prevent duplicate image names being replaced

💡 Note 2: You can also set up alternative hosting with your preferred media manager.

Migrating Posts

1. Navigate to your output's posts folder output/post, and run:

ren * *.mdx

Which will convert your files from Markdown to MDX.

1. Drag all the MDX files in output/post to your Tina app's content/posts folder, now your posts have been migrated to Tina!

Migrating Pages

1. Create a new folder in your Tina app's content folder named wp-pages.

2. Create a new file in your Tina app's tina/collection folder named wp-page.ts and use the template below, you can change this later to fit your page's schemas better.

import type { Collection } from "tinacms";

const WpPage: Collection = {
  label: "Migrated WordPress Pages",
  name: "wppage",
  path: "content/wp-pages",
  format: "md",
  fields: [
    {
      type: "string",
      label: "Title",
      name: "title",
      isTitle: true,
      required: true,
    },
    {
      type: "rich-text",
      label: "Body",
      name: "_body",
      isBody: true,
    },
  ],
};

export default WpPage;

3. Import your created collection to the schema in tina/config.tsx

import WpPage from "./collection/wp-page";
...

schema: {
  collections: [Page, Post, ..., WpPage],
},

View and Edit your migrated content

1. At the root of your Tina app, run:

npm run dev

2. Go to localhost:3000/admin

3. Go to the Migrated WordPress Pages and Blog Posts collections, then to the Media Manager. You can now view and edit your migrated posts, pages and images!

Next Steps

• Adding a coverImage field to your post schema to read the image
• Update the image links in the Markdown and MDX files to match how Tina uses them, uploads/image.png
• Making changes to the themes and any missing features from the exporter
• Take advantage of npm packages to replace WordPress plugins functionalities

Last Edited: November 4, 2024