Creating a Custom Widget in WordPress

Creating a Custom Widget in WordPress

Custom Code Solution

To create a custom widget, you'll need to create a class that extends WP_Widget. Here's a practical implementation:

Place this code in your theme's functions.php file or in a custom plugin file:

Basic widget structure with title and content fields:

class Custom_Content_Widget extends WP_Widget {
    public function __construct() {
        parent::__construct(
            'custom_content_widget',
            'Custom Content Box',
            array('description' => 'A widget that displays custom content')
        );
    }

    public function widget($args, $instance) {
        $title = ! empty($instance['title']) ? apply_filters('widget_title', $instance['title']) : '';
        $content = ! empty($instance['content']) ? $instance['content'] : '';

        echo $args['before_widget'];
        if ($title) {
            echo $args['before_title'] . $title . $args['after_title'];
        }
        echo '<div class="custom-widget-content">';
        echo wpautop($content);
        echo '</div>';
        echo $args['after_widget'];
    }

    public function form($instance) {
        $title = ! empty($instance['title']) ? $instance['title'] : '';
        $content = ! empty($instance['content']) ? $instance['content'] : '';
        ?>
        <p>
            <label for="<?php echo $this->get_field_id('title'); ?>">Title:</label>
            <input class="widefat" id="<?php echo $this->get_field_id('title'); ?>" 
                name="<?php echo $this->get_field_name('title'); ?>" type="text" 
                value="<?php echo esc_attr($title); ?>">
        </p>
        <p>
            <label for="<?php echo $this->get_field_id('content'); ?>">Content:</label>
            <textarea class="widefat" id="<?php echo $this->get_field_id('content'); ?>" 
                name="<?php echo $this->get_field_name('content'); ?>" 
                rows="5"><?php echo esc_textarea($content); ?></textarea>
        </p>
        <?php
    }

    public function update($new_instance, $old_instance) {
        $instance = array();
        $instance['title'] = (!empty($new_instance['title'])) ? strip_tags($new_instance['title']) : '';
        $instance['content'] = (!empty($new_instance['content'])) ? wp_kses_post($new_instance['content']) : '';
        return $instance;
    }
}

Register the widget in WordPress:

function register_custom_content_widget() {
    register_widget('Custom_Content_Widget');
}
add_action('widgets_init', 'register_custom_content_widget');

Add basic styling (optional) - add to your theme's stylesheet:

.custom-widget-content {
    padding: 15px;
    background: #f9f9f9;
    border: 1px solid #ddd;
    border-radius: 4px;
}

How to Use

1. After adding the code, go to Appearance → Widgets in WordPress admin
2. Find "Custom Content Box" in available widgets
3. Drag it to your desired widget area (sidebar/footer)
4. Fill in the title and content fields
5. Save the widget

Plugin Alternative

If you prefer using a plugin, here are reliable options:

1. Custom Sidebars - Creates custom widget areas
2. Content Aware Sidebars - Display different widgets based on context

Features of This Solution

• Supports HTML in content
• Includes title field
• Automatically formats paragraphs
• Sanitizes input data
• Responsive design
• Easy to customize and extend

This widget can be enhanced by adding more fields, styling options, or specific functionality based on your needs.