# Custom Elementor Widget: Notice Box

> Adds a simple "Notice Box" widget to Elementor with a title, text and four styles (info, success, warning, error), in its own "Site Widgets" panel category.

- Type: PHP
- Runs: Run everywhere
- Category: [Page Builders & Themes](https://wpide.com/library/category/page-builders/)
- Tags: elementor, widget, notice
- Author: WPIDE Team
- Installs: 0
- Updated: 2026-10-28
- Page: https://wpide.com/library/elementor-notice-box-widget/

## Code

```php
add_action( 'elementor/elements/categories_registered', function ( $elements_manager ) {
    $elements_manager->add_category( 'wpide-site', array(
        'title' => 'Site Widgets',
        'icon'  => 'eicon-plug',
    ) );
} );

add_action( 'elementor/widgets/register', function ( $widgets_manager ) {
    if ( ! class_exists( '\Elementor\Widget_Base' ) ) {
        return;
    }

    if ( ! class_exists( 'WPIDE_Elementor_Notice_Widget' ) ) {
        class WPIDE_Elementor_Notice_Widget extends \Elementor\Widget_Base {
            public function get_name() {
                return 'wpide-notice';
            }

            public function get_title() {
                return 'Notice Box';
            }

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

            public function get_categories() {
                return array( 'wpide-site' );
            }

            protected function register_controls() {
                $this->start_controls_section( 'content', array( 'label' => 'Notice' ) );
                $this->add_control( 'type', array(
                    'label'   => 'Style',
                    'type'    => \Elementor\Controls_Manager::SELECT,
                    'default' => 'info',
                    'options' => array( 'info' => 'Info', 'success' => 'Success', 'warning' => 'Warning', 'error' => 'Error' ),
                ) );
                $this->add_control( 'title', array( 'label' => 'Title', 'type' => \Elementor\Controls_Manager::TEXT, 'default' => 'Good to know' ) );
                $this->add_control( 'text', array( 'label' => 'Text', 'type' => \Elementor\Controls_Manager::TEXTAREA, 'default' => 'Write your message here.' ) );
                $this->end_controls_section();
            }

            protected function render() {
                $s      = $this->get_settings_for_display();
                $colors = array( 'info' => '#2271b1', 'success' => '#00a32a', 'warning' => '#dba617', 'error' => '#d63638' );
                $color  = isset( $colors[ $s['type'] ] ) ? $colors[ $s['type'] ] : $colors['info'];

                printf(
                    '<div class="wpide-notice wpide-notice--%1$s" role="note" style="border-left:4px solid %2$s;background:color-mix(in srgb,%2$s 8%%,transparent);padding:1em 1.25em;border-radius:4px;"><strong style="display:block;margin-bottom:.25em;">%3$s</strong>%4$s</div>',
                    esc_attr( $s['type'] ),
                    esc_attr( $color ),
                    esc_html( $s['title'] ),
                    wp_kses_post( wpautop( $s['text'] ) )
                );
            }
        }
    }

    $widgets_manager->register( new WPIDE_Elementor_Notice_Widget() );
} );
```

## Notes

Use this as a starting point for your own widgets: add controls in register_controls() and print them in render().

## How to use it

Install the free WPIDE plugin (https://wordpress.org/plugins/wpide/), find "Custom Elementor Widget: Notice Box" in its snippet library and add it in one click; or create a new PHP snippet in WPIDE (or any code snippets plugin) and paste the code above. More snippets: https://wpide.com/library/