soneetechsolutions.com

README.md

Team Showcase Assignment

Author: Soni Singh Version: 1.4.0
WordPress Version: 6.0+
PHP Version: 7.4+

1. Overview

This project is a complete “Team Showcase” solution built for the WordPress Developer Assignment. It consists of a custom plugin and theme template overrides that allow users to manage team members via a Custom Post Type (CPT), display them in a responsive grid, and access data via a custom REST API.

2. Setup Instructions

Plugin Installation
  1. Navigate to the plugins folder in this repository.
  2. Compress the 2creative-team-showcase folder into a ZIP file (or use the provided ZIP).
  3. Go to your WordPress Admin: Plugins > Add New > Upload Plugin.
  4. Upload and Activate “2Creative Team Showcase”.
Theme Integration

The solution supports both Classic Themes (e.g., Twenty Twenty-One) and Block Themes (e.g., Twenty Twenty-Four).

  1. For Block Themes (Twenty Twenty-Four):
    • Copy templates/single-team_member.html from the provided files.
    • Paste it into your child theme’s templates/ folder:
      /wp-content/themes/twentytwentyfour-child/templates/single-team_member.html
  2. For Classic Themes:
    • Copy single-team_member.php from the provided files.
    • Paste it into your child theme’s root folder:
      /wp-content/themes/your-child-theme/single-team_member.php

3. Explanation of Approach

The plugin follows a modular, Object-Oriented Programming (OOP) architecture to ensure separation of concerns and maintainability.

  • TS_Plugin (Singleton): The main entry point that initializes the plugin.
  • TS_CPT: Registers the team_member Custom Post Type.
  • TS_Meta: Handles custom fields (Role, Short Bio) using add_meta_box and proper sanitization/security.
  • TS_Shortcode: Renders the frontend grid and filter logic. It also provides a helper shortcode  for Block Themes to render protected meta keys safely.
  • TS_REST: Registers the custom API endpoints.
  • TS_Block: Registers a native Gutenberg block.

Design Decisions:

  • Mobile-First CSS: The grid uses minmax() and Flexbox to be fully responsive without heavy media queries.
  • Security: All inputs are sanitized (sanitize_text_field, wp_kses_post) and outputs are escaped (esc_html, esc_attr). Nonces are used for saving meta box data.
  • Performance: Scripts and styles are enqueued conditionally (only when needed).

4. REST API Documentation

A custom namespace 2creative/v1 was created to expose team member data to third-party applications.

Base URL: https://soneetechsolutions.com/wp-json/2creative/v1

Endpoints

1. Get All Team Members

  • Route: GET /team-members
  • Description: Returns a list of all published team members.
  • Example: https://soneetechsolutions.com/wp-json/2creative/v1/team-members

2. Get Single Team Member

  • Route: GET /team-members/{id}
  • Description: Returns details for a specific team member by ID.
  • Example: https://soneetechsolutions.com/wp-json/2creative/v1/team-members/12

Response Format (JSON)

{
  "id": 6,
  "name": "Aarav Mehta",
  "role": "Lead Web Developer",
  "short_bio": "Aarav leads full-stack development with a focus on performance, security, and scalable WordPress solutions.",
  "full_bio": "Aarav Mehta is a Lead Web Developer with over 8 years of experience building high-performance web applications and custom WordPress solutions. He specializes in theme and plugin development, REST API integrations, and performance optimization.\n\n\n\nAt 2Creative, Aarav is responsible for designing clean architectures, mentoring developers, and ensuring best coding practices across projects. He works closely with designers and stakeholders to translate business requirements into reliable, scalable digital products.",
  "photo_url": "https://soneetechsolutions.com/wp-content/uploads/2026/02/team-1.png",
  "permalink": "https://soneetechsolutions.com/team/aarav-mehta/"
}