bricks-elements

Create Bricks Builder custom elements by extending Bricks\Element.

14|1|Updated Mar 30, 2026
One-click install
npx skills add https://github.com/wpgaurav/WordPress-skills --skill bricks-elements
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: bricks-elements
Source: https://github.com/wpgaurav/WordPress-skills/tree/main/skills/wordpress/bricks/bricks-elements
Command: npx skills add https://github.com/wpgaurav/WordPress-skills --skill bricks-elements

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Developers need a repeatable pattern to build Bricks Builder custom elements that extend the Bricks\Element base class, ensuring consistency, proper rendering, and builder integration across WordPress projects.

Core Features & Use Cases

  • Element architecture and namespace: extend Bricks\Element and place the class under includes/elements to centralize behavior.
  • Registration and discovery: two common methods to register: via the braces filter and via direct registration, enabling clean integration in themes or plugins.
  • Rendering and customization: define labels, controls, render logic, and a builder preview to generate production-ready UI components.
  • Use case: create a feature box, a post-grid item, or a custom widget that can be reused across pages.

Quick Start

Define a new PHP class that extends Bricks\Element, implements required properties (category, name, tag, etc.), and register it with the Bricks elements flow.

Frequently Asked Questions about bricks-elements

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I create a custom element in Bricks Builder for WordPress?

To create a Bricks Builder custom element, extend the Bricks\Element base class under the includes/elements directory, define required properties like category and name, then register it using the Bricks filter or direct registration method.

What is the correct architecture for a custom Bricks Builder element?

The correct architecture for a custom Bricks Builder element involves extending the Bricks\Element base class, encapsulating rendering logic, control definitions, and builder-preview support, while maintaining namespace discipline and safe output escaping.

How do I register a custom UI component with Bricks Builder?

You register a custom UI component with Bricks Builder by using either the braces filter or direct registration method, enabling clean integration and discovery of your custom elements within WordPress themes or plugins.

Can I define custom controls and settings for Bricks Builder elements?

Yes, you define custom controls and settings for Bricks Builder elements by implementing control definitions within your extended Bricks\Element class, enabling attribute management and dynamic data rendering for modular UI components.

Does Bricks Builder support dynamic data rendering in custom elements?

Yes, Bricks Builder supports dynamic data rendering in custom elements by applying attribute management and configuration via control definitions, allowing developers to generate production-ready, modular UI components like feature boxes or post-grid items.

What are the requirements for safe output escaping in Bricks custom elements?

Safe output escaping in Bricks custom elements requires satisfying namespace discipline, ensuring unique element naming, and properly sanitizing dynamic data during the rendering phase to maintain secure WordPress output.