How to Use WordPress Rest Api to Fetch and Display Custom Post Types

WordPress REST API is a powerful tool that allows developers to access and manipulate website data remotely. One common use case is fetching and displaying custom post types dynamically on your site. This article provides a step-by-step guide to help you use the REST API for this purpose.

Understanding Custom Post Types and REST API

Custom post types (CPTs) extend the default posts and pages in WordPress, enabling you to create different content types such as portfolios, testimonials, or products. The REST API exposes these CPTs, allowing you to fetch data via HTTP requests.

Step 1: Register Your Custom Post Type

Ensure your custom post type is registered with the show_in_rest parameter set to true. This makes your CPT accessible via the REST API.

Example registration code:

function register_custom_post_type() {
  register_post_type('portfolio', array(
    'labels' => array(
      'name' => __('Portfolios'),
      'singular_name' => __('Portfolio'),
    ),
    'public' => true,
    'show_in_rest' => true,
    'has_archive' => true,
  ));
}
add_action('init', 'register_custom_post_type');

Step 2: Fetch Custom Post Types Using REST API

You can fetch your custom post types with a simple GET request. The URL typically looks like this:

https://yourdomain.com/wp-json/wp/v2/portfolio

Replace yourdomain.com with your website’s URL and portfolio with your CPT slug. Use JavaScript fetch API or any HTTP client to retrieve data.

Step 3: Display Data on Your Site

Once you fetch the data, you can dynamically generate HTML to display your custom posts. Here’s a simple example using JavaScript:

fetch('https://yourdomain.com/wp-json/wp/v2/portfolio')
  .then(response => response.json())
  .then(data => {
    const container = document.getElementById('portfolio-container');
    data.forEach(post => {
      const postDiv = document.createElement('div');
      postDiv.className = 'portfolio-item';
      postDiv.innerHTML = `
        
${post.title.rendered}
        
${post.content.rendered}
      `;
      container.appendChild(postDiv);
    });
  });

Make sure to include a container element with the ID portfolio-container in your page where the posts will be inserted.

Additional Tips

• Use authentication if your CPT is private or restricted.
• Customize the REST API request with query parameters for filtering, sorting, or pagination.
• Secure your API endpoints to prevent unauthorized access.

Using the WordPress REST API to fetch and display custom post types enhances your website’s flexibility and interactivity. With these steps, you can integrate dynamic content seamlessly.