Headless WordPress CMS with Vanilla JavaScript

A simple HTML/CSS/JavaScript implementation demonstrating headless WordPress integration for retail product display.

Overview

This project demonstrates the concept of headless CMS by separating:

• Content Management: WordPress stores and manages product content
• Content Presentation: HTML/CSS/JS frontend displays the content

You'll build a simple product display page that fetches content from WordPress through its REST API.

Prerequisites

• LocalWP installed on your computer
• A text editor (VS Code recommended)
• Basic knowledge of HTML, CSS, and JavaScript
• Basic understanding of REST APIs

Getting Started

1. Set Up WordPress in LocalWP

1. Create a new WordPress site in LocalWP
2. Name it "Headless Demo" (or any name you prefer)
3. After installation, add some sample "products" as standard WordPress posts:
   • Create at least 3-5 posts
   • Add a title (product name)
   • Add content (product description)
   • Add a featured image
   • Write a short excerpt
   • Publish each post

2. Test WordPress REST API

Verify your WordPress REST API is working by visiting:

http://your-local-site.local/wp-json/wp/v2/posts

You should see JSON data representing your posts.

3. Project Structure

This repository contains the starter files for your project:

• index.html - Basic structure with container for products
• styles.css - Minimal styling (you'll enhance this)
• app.js - JavaScript file with scaffolding for API connection

4. Implementation Tasks

You need to implement the following functionality:

1. Connect to WordPress API: Complete the fetchProducts() function to retrieve posts from WordPress
2. Display Products: Process the API response and create visual product cards
3. Style the UI: Enhance the provided CSS to create an attractive product display
4. Handle Errors: Implement proper error handling for API requests

5. CORS Configuration

If you encounter CORS errors (visible in browser console), you'll need to enable CORS in your WordPress installation:

1. Install a CORS plugin (search for "WP CORS" in the WordPress plugin directory)
2. Configure it to allow requests from your local file (or use * for testing)

Understanding Headless CMS

As you implement this project, consider the following:

• How does this differ from traditional WordPress themes?
• What advantages does separating content and presentation provide?
• How would this approach scale for a larger retail website?
• What other frontend technologies could consume the same WordPress API?

Resources

• WordPress REST API Handbook
• Fetch API Documentation
• What is a Headless CMS?

Extension Challenges

Once you've completed the basic implementation, try these enhancements:

1. Add category filtering
2. Implement a simple search feature
3. Create a product detail view
4. Add a loading spinner while content is being fetched

Submission

Submit your completed project including:

1. Working code files
2. A screenshot of your final product display
3. Brief reflection on the advantages of the headless CMS approach