rikidaniel.
Back to Blog

How to Get Markdown Response from WordPress API

How to Get Markdown Response from WordPress API

Introduction

WordPress is a powerful CMS, but its REST API returns raw HTML by default. If you're building a modern frontend with React or Next.js, using Markdown provides significant advantages including better styling control, smaller payload sizes, and higher protection against XSS vulnerabilities.

Step 1: Understanding WordPress REST API Structure

The default WordPress API endpoint is accessible at:

GET /wp-json/wp/v2/posts

The standard response contains a content.rendered property with compiled HTML. To convert this to Markdown, you can register a custom field in your theme's functions.php.

Step 2: Registering a Custom REST Field

Add the following snippet to your WordPress theme's functions.php file:

add_action('rest_api_init', function () {
    register_rest_field('post', 'content_markdown', array(
        'get_callback' => function ($post_arr) {
            $content = $post_arr['content']['raw'] ?? '';
            return apply_filters('the_content_markdown', $content);
        },
        'schema' => null,
    ));
});

Step 3: Fetching Data in Next.js

Once your endpoint is configured, fetch data directly inside your Next.js Server Components:

interface WordPressPost {
  id: number;
  slug: string;
  title: { rendered: string };
  content_markdown: string;
}

export async function getPostBySlug(slug: string): Promise<WordPressPost | null> {
  const res = await fetch(`https://your-wordpress-site.com/wp-json/wp/v2/posts?slug=${slug}`, {
    next: { revalidate: 3600 }
  });
  
  if (!res.ok) return null;
  const posts = await res.json();
  return posts[0] || null;
}

Conclusion

Using Markdown as the bridge between Headless WordPress and Next.js cleans up payload sizes and simplifies custom UI rendering logic.

Related articles