Build a Custom Client Portal in 60 Minutes (No Code!) | WordPress Tutorial

Summary

Tobi Salami demonstrates how to build a WordPress-based client-management portal in roughly an hour by directing an AI coding agent instead of writing the code manually. The finished app uses a custom WordPress theme with a React and TypeScript frontend, and JetEngine Custom Content Types (CCTs) for its data. The agent creates the database structures and demo records, builds the app, and deploys it to the WordPress site.

Portal features

• Responsive desktop and mobile layouts, with a collapsible sidebar and light and dark themes.
• Dashboard, client, project, invoice, payment, and settings pages, with linked records and editable forms.
• Invoice printing to PDF, payment recording, project status updates, and client reminders.
• Search, page navigation, and notifications that the presenter describes as very fast.
• Frontend-editable settings that are reflected in WordPress’s backend.
• Custom icons, a branded login screen, and form drafts saved in the browser.
• Some planned sections marked “Coming soon” and outside the scope of the first version.

Tools and architecture

• Claude Code is the AI agent used to carry out the build.
• Novamira CLI and Novamira Pro connect the agent to the WordPress site and provide capabilities for working with JetEngine, files, and deployment.
• JetEngine CCTs store the portal’s structured data in dedicated database tables. The presenter contrasts this with custom post types, which share WordPress’s main posts table.
• Pen.dev supplies the design file, which the agent can read through its MCP connection.
• The frontend is built with React and TypeScript and communicates with WordPress through REST endpoints.

Tutorial points and analysis

• The presenter distinguishes MCP from a CLI using a restaurant analogy: MCP acts like a waiter relaying requests, while a CLI lets the agent issue commands directly. Both can use platform capabilities.
• Skills provide instructions for how the agent should work; capabilities define and enforce which operations it can perform and the rules it must follow. The presenter argues that these controls help make AI-generated work more consistent, especially when working with WordPress and plugins.
• The agent restricts the CCT REST endpoints to administrators using WordPress’s manage_options permission, and checks that unauthorized users are denied access.
• Deployment includes packaging and uploading the theme, testing PHP before activating it, and checking the site in a browser. After encountering a network-level 403 error, the agent adjusts its deployment process.
• The presenter emphasizes that powerful file and code-execution capabilities should be limited or disabled on production sites. Read-only access is safer when changes are not needed.
• He argues that WordPress can be a useful foundation for custom apps because it already provides content management, user and login features, extensibility, and a plugin ecosystem.
• The result is not presented as flawless: the presenter notices some visual issues, and certain app sections remain unfinished. He says an agent can be asked to refine the layout.

Overall takeaway

The video is both a build tutorial and a product demonstration. It shows how an AI agent can connect a design to WordPress data structures, build a custom frontend, and deploy it, while emphasizing that permissions, testing, and restricted agent access remain important.

Main speakers and sources

• Tobi Salami — presenter and tutorial host.
• Claude Code — AI agent performing the development and deployment tasks.
• Novamira, JetEngine, and Pen.dev — platforms demonstrated as part of the workflow.