WordPress Development
WordPress Custom Widgets: How to Create, Register, and Use Widget Areas
Custom WordPress widgets add dynamic functionality to sidebars, footers, and any widget area. Here is how to build them correctly for classic and block themes.
WordPress widgets have evolved from simple sidebar elements to versatile UI components used in headers, footers, block template parts, and anywhere in a page template. Understanding how to create custom widgets — and when to use them versus alternatives — is a valuable WordPress development skill.
Widgets in the WordPress ecosystem — 2026 context
WordPress widgets have a complicated recent history. The classic Widget system (registered sidebar areas, individual widget instances with settings) still works in classic themes. Block themes replaced classic widgets with blocks — in FSE themes, there are no sidebars or widget areas; everything is blocks placed in templates.
| WordPress setup | Widget system | Where to add dynamic content |
|---|---|---|
| Classic theme (Astra, GeneratePress) | Classic widget system — Appearance › Widgets | Register custom WP_Widget class |
| Classic theme + Elementor Pro | Elementor widgets + classic widget fallback | Elementor widget development or classic widgets |
| Block theme (Twenty Twenty-Four) | No classic widgets — all blocks | Register custom Gutenberg block |
| Classic theme + Gutenberg | Block widgets in classic widget areas | Block registration or WP_Widget class |
Creating a classic custom widget
Custom widgets in classic WordPress themes extend the WP_Widget class. A complete custom widget requires four methods:
Your widget class extends WP_Widget. The constructor calls parent::__construct() with a widget ID, name, and description. Register the widget by hooking add_action on widgets_init.
This method outputs the widget HTML on the frontend. It receives $args (before_widget, after_widget, before_title, after_title from the sidebar registration) and $instance (saved widget settings). Always use $args for wrapper HTML to maintain theme compatibility.
This method outputs the widget settings form in the admin Widgets screen. Use get_field_id() and get_field_name() to generate consistent field IDs and names. Include all configurable options your widget supports.
This method sanitises and saves widget settings when the admin form is submitted. Sanitise every input appropriate to its type (sanitize_text_field, absint, wp_kses_post). Return the sanitised instance array.
Practical custom widget examples
Recent posts with thumbnail
WordPress’s built-in Recent Posts widget shows titles only. A custom widget showing recent posts with thumbnail images and excerpt adds significant visual value to sidebars. The widget() method queries WP_Query for recent posts and outputs structured HTML for each post with its featured image.
Social media follow buttons
A custom widget with fields for each social platform URL outputs a row of social follow buttons styled with your theme. More flexible than third-party social widget plugins which add unnecessary scripts.
Business hours widget
A widget with fields for each day’s opening and closing time, plus a field for special closures, outputs a formatted business hours table. Hook a filter to automatically show ‘Open now’ or ‘Closed’ based on current time.
Contact details widget
A simple widget with fields for phone, email, address, and business hours that outputs a consistent contact block in the sidebar or footer. Simpler and more maintainable than hardcoded footer HTML.
Registering block widgets for FSE themes
For Full Site Editing themes, the equivalent of a custom widget is a custom Gutenberg block. Custom blocks are registered using register_block_type() and built with JavaScript (React) for the editor interface and PHP or JavaScript for the frontend output.
The block registration workflow is more complex than classic widgets but provides:
- Visual preview in the Gutenberg editor while configuring
- Integration with the global styles system (colours, fonts from theme.json)
- Compatibility with the Site Editor for placement anywhere in templates
- The InspectorControls API for a settings panel that matches Gutenberg design patterns
Widget area registration
Custom widgets are only useful if there are widget areas (sidebars) registered for them to appear in. Register custom widget areas using register_sidebar() in your plugin or child theme’s functions.php, hooked to widgets_init.
Parameters include: id (unique slug), name (display name in admin), description (admin hint), before_widget/after_widget (HTML wrapper for each widget instance), before_title/after_title (HTML wrapper for widget title). The HTML wrapper classes allow CSS styling of widget instances consistently.
For any new WordPress project in 2026, evaluate whether a custom Gutenberg block better serves your needs than a classic widget. Custom blocks have better editor UX (visual preview, drag-and-drop positioning) and work in both classic themes and FSE themes. Classic custom widgets are appropriate when maintaining an existing classic theme or working with themes that specifically use the classic widget system.
Need custom WordPress widgets or blocks developed for your site?
Simple Automation Solutions develops custom WordPress widgets, blocks, and plugin functionality for businesses worldwide.
Frequently asked questions
Why have my classic widgets disappeared after updating WordPress?+
Classic widgets were removed from FSE (block) themes in WordPress 5.8+, replaced by the block widget editor. If you are using a classic theme, your widgets should still be available at Appearance › Widgets. If the Widgets menu item is missing, your theme may have declared FSE support without fully supporting it. The Classic Widgets plugin restores the classic widget interface for sites that need it. Alternatively, verify that your theme is a classic theme and has registered sidebar areas properly.
Can I use custom widget shortcodes in pages and posts?+
Classic widgets are designed for sidebar and footer widget areas, not for embedding in post content. To display widget-like content inside posts, use shortcodes instead — register a shortcode that outputs the same HTML your widget would. Alternatively, create a Gutenberg block that provides the same functionality in a post-embeddable format. Some widget plugins do include shortcodes for embedding widget content in posts, but this is not native WordPress widget functionality.
What is the difference between a widget area and a sidebar?+
In WordPress terminology, they are the same thing. A sidebar is a widget area — a registered slot in a theme template where widgets can be placed. Despite being called a sidebar, widget areas can be placed anywhere in a theme: the actual sidebar, the footer, the header, before or after content, or any other location the theme developer registers. The name reflects historical usage when all widget areas were literally sidebar columns; modern themes register widget areas for headers, footers, and multiple content positions.
