Zack Webster

Custom Elementor Widgets with Fluent Snippets

Creating custom Elementor widgets is typically something developers handle by building custom plugins. But with Fluent Snippets, I’ve found a way to do it quickly, cleanly, and without touching functions.php or building a dedicated plugin.

In this blog, I’ll walk you through how I created a custom Badge widget for Elementor using Fluent Snippets. Something that’s been never done before.

Why Fluent Snippets?

Fluent Snippets is a WordPress plugin that allows you to:

  • Run PHP, CSS, and JS snippets safely with automatic error handling
  • Save snippets in your file system and load natively with zero database queries
  • Avoid editing functions.php directly
  • Scope snippets to admin, front-end, or everywhere

It’s perfect for quick experiments or lightweight customizations without creating a full plugin.

Step 1: Creating the PHP Snippet

Elementor widgets are PHP classes that extend Widget_Base. In Fluent Snippets:

  1. Create a PHP Snippet
  2. Set it to Run Everywhere
  3. Paste this code:
add_action('elementor/widgets/register', function($widgets_manager) {

    class Badge_Widget extends \Elementor\Widget_Base {

        public function get_name() {
            return 'badge_widget';
        }

        public function get_title() {
            return 'Badge';
        }

        public function get_icon() {
            return 'eicon-info';
        }

        public function get_categories() {
            return ['basic'];
        }

        protected function register_controls() {

            // Content Section
            $this->start_controls_section(
                'content_section',
                [
                    'label' => __( 'Content', 'badge-widget' ),
                    'tab' => \Elementor\Controls_Manager::TAB_CONTENT,
                ]
            );

            $this->add_control(
                'badge_text',
                [
                    'label' => __( 'Badge Text', 'badge-widget' ),
                    'type' => \Elementor\Controls_Manager::TEXT,
                    'default' => __( 'Badge', 'badge-widget' ),
                ]
            );

            $this->end_controls_section();

            // Style Section
            $this->start_controls_section(
                'style_section',
                [
                    'label' => __( 'Style', 'badge-widget' ),
                    'tab' => \Elementor\Controls_Manager::TAB_STYLE,
                ]
            );

            $this->add_control(
                'badge_bg_color',
                [
                    'label' => __( 'Background Color', 'badge-widget' ),
                    'type' => \Elementor\Controls_Manager::COLOR,
                    'default' => '#000000',
                    'selectors' => [
                        '{{WRAPPER}} .badge-widget' => 'background-color: {{VALUE}};',
                    ],
                ]
            );

            $this->add_control(
                'badge_border_color',
                [
                    'label' => __( 'Border Color', 'badge-widget' ),
                    'type' => \Elementor\Controls_Manager::COLOR,
                    'default' => '#FFFFFF',
                    'selectors' => [
                        '{{WRAPPER}} .badge-widget' => 'border-color: {{VALUE}};',
                    ],
                ]
            );

            $this->end_controls_section();
        }

        protected function render() {
            $settings = $this->get_settings_for_display();
            echo '<span class="badge-widget">'.esc_html($settings['badge_text']).'</span>';
        }
    }

    $widgets_manager->register( new \Badge_Widget() );

});

Save and activate the snippet. After refreshing Elementor, you’ll see your new Badge widget under the Basic section.

Step 2: Add Default Styles via a CSS Snippet

To keep things DRY and avoid inline styles, I use a CSS Fluent Snippet for defaults:

/* Badge Widget */
.elementor-widget-badge_widget .badge-widget {
    display: inline-block;
    line-height: 1;
    padding: 8px 16px;
    color: #fff;
    border: 1px solid;
    border-radius: 999px;
    white-space: nowrap;
}
  • Dynamic colors (background and border) are controlled by Elementor live.
  • Static styles (padding, border radius, text color) live in CSS.

This keeps the PHP clean and makes your widget more maintainable.

Step 3: Use Your Custom Widget

  1. Open any Elementor page.
  2. Drag Badge into your layout.
  3. Change text, background color, and border color in the widget settings.

Boom! You now have a fully functional, lightweight custom widget—without building a plugin.

Why I Love This Approach

  • No plugin bloat
  • Quick iteration
  • DRY code by separating PHP logic and CSS styling
  • Full Elementor live editing support

For quick and maintainable custom widgets, Fluent Snippets + Elementor is my new favorite combo.