wordpress

WordPress

WordPress is an extensible open-source content management system featuring Full Site Editing (FSE), block-based theming, and headless REST/GraphQL architectures.

When to Use

• Modern Content Management Platforms: Powering blogs, news publications, and enterprise corporate websites.
• Gutenberg Custom Block Development: Developing custom editorial blocks using @wordpress/scripts and React.
• Headless WordPress: Using WordPress as a content backend decoupled from Next.js, Nuxt, or Astro frontends.
• Modern PHP 8.2+ Plugins & Themes: Writing object-oriented, PSR-compliant WordPress code.

Quick Start

<?php
/**
 * Plugin Name: Custom API Endpoint
 * Description: Registers a custom WordPress REST API endpoint.
 * Version: 1.0.0
 */

add_action('rest_api_init', function () {
    register_rest_route('custom/v1', '/latest-posts', [
        'methods' => 'GET',
        'callback' => function () {
            $posts = get_posts(['numberposts' => 5]);
            return new WP_REST_Response($posts, 200);
        },
        'permission_callback' => '__return_true'
    ]);
});

Core Concepts

Gutenberg Custom Block with @wordpress/scripts

Building editorial blocks using React and block.json metadata:

// block.json
{
  "$schema": "https://schemas.wp.org/trunk/block.json",
  "apiVersion": 3,
  "name": "custom/hero-banner",
  "version": "1.0.0",
  "title": "Hero Banner",
  "category": "design",
  "icon": "superhero",
  "attributes": {
    "heading": { "type": "string", "default": "Default Hero" }
  },
  "editorScript": "file:./index.js",
  "render": "file:./render.php"
}

// src/index.js
import { registerBlockType } from "@wordpress/blocks";
import { RichText, useBlockProps } from "@wordpress/block-editor";

registerBlockType("custom/hero-banner", {
  edit: ({ attributes, setAttributes }) => {
    const blockProps = useBlockProps({ className: "custom-hero-editor" });
    return (
      <div {...blockProps}>
        <RichText
          tagName="h1"
          value={attributes.heading}
          onChange={(val) => setAttributes({ heading: val })}
          placeholder="Enter hero title..."
        />
      </div>
    );
  },
  save: () => null, // Dynamic rendering handled by render.php
});