How to Create Custom Bricks Widgets in WordPress

To create custom Bricks widgets in WordPress, you’ll need to create a custom plugin or add the code to your theme’s functions.php file. Bricks is a modern page builder that extends the WordPress block editor with additional features. Here’s a step-by-step guide to creating a custom Bricks widget:

Step 1: Set Up Your Plugin or Theme

First, decide whether you want to create a custom plugin to house your Bricks widget or if you prefer adding the code to your theme directly. For this example, let’s assume you’re creating a custom plugin. Create a new folder in the WordPress plugins directory and give it a suitable name (e.g., custom-bricks-widgets).

Step 2: Create the Main Plugin File

Inside your custom plugin folder, create the main plugin file (e.g., custom-bricks-widgets.php). This file will contain the plugin metadata and initialization code.

Step 3: Define the Plugin Metadata

Open custom-bricks-widgets.php and add the plugin metadata. At a minimum, it should include the plugin name, version, author, and description:

<?php
/*
Plugin Name: Custom Bricks Widgets
Version: 1.0
Author: Your Name
Description: Adds custom Bricks widgets to the Bricks page builder.
*/

Step 4: Define Your Custom Bricks Widget

Now, you’ll create your custom Bricks widget. Bricks uses the concept of “brick classes” to define widgets. Each brick class is a PHP class representing a custom widget.

Inside your custom plugin folder, create a new directory named bricks-widgets (this is where we’ll store our brick classes). In the bricks-widgets directory, create a PHP file for your custom widget (e.g., custom_widget.php).

Here’s an example of a simple custom Bricks widget:

<?php
// custom-bricks-widgets/bricks-widgets/custom_widget.php

// The class name should be unique, camel-cased, and prefixed with "BRICKS_"
class BRICKS_Custom_Widget extends Bricks_Frontend_Brick {

    // The init() method contains the widget configuration
    public function init() {
        // Define your widget's settings here
        $this->add_set('custom_widget_settings', array(
            'title' => array(
                'type' => 'text',
                'label' => 'Widget Title',
            ),
            // Add more settings as needed
        ));
    }

    // The render() method outputs the widget's content
    public function render() {
        $settings = $this->get_settings('custom_widget_settings');
        $title = $settings['title'];

        ob_start();
        ?>
        <div class="custom-bricks-widget">
            <?php if (!empty($title)) : ?>
                <h3><?php echo esc_html($title); ?></h3>
            <?php endif; ?>
            <!-- Add your custom widget content here -->
        </div>
        <?php
        return ob_get_clean();
    }
}

// Register the custom brick class
add_filter('bricks_frontend_brick_classes', function ($bricks) {
    $bricks['BRICKS_Custom_Widget'] = __DIR__ . '/custom_widget.php';
    return $bricks;
});

Step 5: Activate the Plugin

Activate your custom Bricks widgets plugin in the WordPress admin panel (Plugins > Installed Plugins).

Now, your custom Bricks widget is available in the Bricks page builder. When you edit a Bricks page, you should find your widget under the “Custom” category. You can then drag and drop it onto your page to customize its settings and content.

Remember to replace the widget class name, settings, and content with your own specifics to tailor the widget to your requirements. Additionally, you can explore more options and advanced features available in Bricks to create sophisticated custom widgets.