#11 Module 11 – Custom Widgets & Sidebars Integration next, using the same glowing interactive format

🧩 Module 11 – Custom Widgets & Sidebars Integration

In this module, we’ll create a custom widget that displays a personalized message, and we’ll register a new sidebar where this widget can be placed.

---

Step 1 — Create the Plugin File

Create a new folder: my-custom-widget Then inside, create my-custom-widget.php:

<?php
/**
 * Plugin Name: My Custom Widget
 * Description: Adds a simple custom widget and a sidebar to WordPress.
 * Version: 1.0
 * Author: Your Name
 */

if ( ! defined( 'ABSPATH' ) ) exit;

class My_Custom_Widget extends WP_Widget {

    function __construct() {
        parent::__construct(
            'my_custom_widget',
            __( 'My Custom Widget', 'text_domain' ),
            array( 'description' => __( 'Displays a custom message', 'text_domain' ) )
        );
    }

    // Widget front-end display
    public function widget( $args, $instance ) {
        echo $args['before_widget'];
        echo $args['before_title'] . apply_filters( 'widget_title', $instance['title'] ) . $args['after_title'];
        echo '<p style="color:#00ffa3;">' . esc_html( $instance['message'] ) . '</p>';
        echo $args['after_widget'];
    }

    // Widget backend form
    public function form( $instance ) {
        $title = !empty( $instance['title'] ) ? $instance['title'] : __( 'My Widget', 'text_domain' );
        $message = !empty( $instance['message'] ) ? $instance['message'] : __( 'Hello, World!', 'text_domain' );
        ?>
        <p>
            <label>Title:</label>
            <input class="widefat" name="<?php echo $this->get_field_name('title'); ?>" type="text" value="<?php echo esc_attr( $title ); ?>" />
        </p>
        <p>
            <label>Message:</label>
            <input class="widefat" name="<?php echo $this->get_field_name('message'); ?>" type="text" value="<?php echo esc_attr( $message ); ?>" />
        </p>
        <?php
    }

    // Save widget form values
    public function update( $new_instance, $old_instance ) {
        $instance = array();
        $instance['title'] = sanitize_text_field( $new_instance['title'] );
        $instance['message'] = sanitize_text_field( $new_instance['message'] );
        return $instance;
    }
}

// Register the widget
function register_my_custom_widget() {
    register_widget( 'My_Custom_Widget' );
}
add_action( 'widgets_init', 'register_my_custom_widget' );

// Register a custom sidebar
function my_custom_sidebar() {
    register_sidebar( array(
        'name' => __( 'Custom Sidebar', 'text_domain' ),
        'id' => 'custom_sidebar',
        'before_widget' => '<div class="widget-container">',
        'after_widget'  => '</div>',
        'before_title'  => '<h3 class="widget-title">',
        'after_title'   => '</h3>',
    ) );
}
add_action( 'widgets_init', 'my_custom_sidebar' );
?>

---

Step 2 — Activate and Test

1. Place the folder my-custom-widget inside wp-content/plugins/.
2. Go to Plugins → Activate "My Custom Widget".
3. Go to Appearance → Widgets (or the block-based widget editor in newer WP).
4. Find “My Custom Widget” and drag it into “Custom Sidebar.”
5. Set your custom title and message, then save.
6. To display sidebar in your theme, add this to sidebar.php or similar:

<?php if ( is_active_sidebar( 'custom_sidebar' ) ) : ?>
    <aside id="secondary">
        <?php dynamic_sidebar( 'custom_sidebar' ); ?>
    </aside>
<?php endif; ?>

---

✅ Output

When placed in the sidebar, your widget will show:

• Widget Title (editable from admin)
• Custom message (editable)
• Styled automatically by your theme

---

💡 Notes

• Widgets are great for dynamic content areas (sidebars, footers, etc.).
• You can register multiple widgets using the same structure.
• Widgets can include forms, data from APIs, or even shortcodes.