Browsing WordPress Data

Once you've connected WordPress, you can browse all your content directly in the PhantomWP IDE. The Data Panel shows posts, pages, media, and more.

Opening the Data Panel

The WordPress data appears in the right panel of the IDE:

1. Make sure WordPress is connected (WordPress icon should be green)
2. Click the Data tab in the right panel
3. Browse available content

Available Data Types

Posts

View all your blog posts with:

• Title and excerpt
• Publication date
• Categories and tags
• Featured image thumbnail
• Post status

Click a post to see full details and available fields.

Pages

Browse your site pages:

• Page title
• Parent page (for hierarchies)
• Featured image
• Custom fields

Media

Access your entire media library:

• Image thumbnails
• File names and sizes
• Multiple size versions (thumbnail, medium, large, full)
• Alt text and captions

Categories & Tags

View your taxonomies:

• Category names and slugs
• Tag names and counts
• Hierarchical category relationships

Inserting Content

Insert a Data Reference

When editing an Astro file, click any piece of data to insert it:

1. Position your cursor where you want the data
2. Click on a field in the Data Panel
3. The appropriate code is inserted

For example, clicking a post title might insert:

{post.title}

Insert an Image

1. Browse to Media in the Data Panel
2. Click on an image
3. Choose the size you want
4. The image path is inserted

<img src="/images/imported/my-image.jpg" alt="Description" />

Insert Multiple Items

For lists of posts or pages:

1. Select the content type
2. Click Insert Loop
3. A template loop is added to your code

{posts.map((post) => (
  <article>
    <h2>{post.title}</h2>
    <p>{post.excerpt}</p>
  </article>
))}

Filtering and Searching

Search

Use the search box to find specific content:

• Search by title
• Search by content
• Search by slug

Filters

Narrow down results by:

• Category — Filter posts by category
• Tag — Filter posts by tag
• Date — Filter by publication date
• Status — Show published, draft, or all

Data Preview

Click on any item to see a detailed preview:

Post Preview Shows:

• Full title
• Publication date
• Author
• Categories and tags
• Excerpt
• Featured image
• All custom fields
• Raw HTML content

Media Preview Shows:

• Image preview (for images)
• File information
• All available sizes with dimensions
• Alt text and caption
• Upload date

Using Data in Templates

Accessing Post Data

When you've set up content collections, access data like this:

---
const { post } = Astro.props;
---

<article>
  <h1>{post.data.title}</h1>
  <time>{post.data.pubDate}</time>
  <img src={post.data.image} alt={post.data.title} />
  <div set:html={post.body} />
</article>

Accessing Media

Reference imported media in your templates:

<img 
  src="/images/imported/my-photo.jpg" 
  alt="Photo description"
  className="rounded-lg shadow-md"
/>

Dynamic Data (API Mode)

If using WordPress as a live API:

---
const response = await fetch('https://yoursite.com/wp-json/wp/v2/posts');
const posts = await response.json();
---

{posts.map((post) => (
  <article>
    <h2 set:html={post.title.rendered} />
    <div set:html={post.excerpt.rendered} />
  </article>
))}

Custom Fields

If your WordPress site uses ACF or other custom field plugins:

1. Make sure fields are exposed to the REST API
2. They'll appear in the Data Panel under each item
3. Click to insert the field reference

Common custom field plugins:

• ACF — Appears under acf or custom field groups
• Pods — Appears under the pod name
• Meta Box — Appears under meta fields

Refreshing Data

If you've added new content to WordPress:

1. Click the Refresh button in the Data Panel
2. Or disconnect and reconnect WordPress
3. New content will appear

Data is cached for performance. Refresh when you need the latest content.

Tips

Organize Content First

Before importing, organize your WordPress content:

• Clean up draft posts
• Update categories and tags
• Add missing featured images
• Fill in missing alt text

Use Consistent Naming

Keep file names and slugs consistent between WordPress and Astro for easier SEO migration.

Check Custom Fields

If custom fields aren't showing:

1. Verify they're registered for REST API access
2. Check plugin settings (ACF has a REST API toggle)
3. Test the API directly: /wp-json/wp/v2/posts?_embed

Next Steps

• Importing Content — Import all content at once
• Security — Hide WordPress from public access