WordPress Widgets — Block Widgets, Sidebars and Widget Areas Explained

In this tutorial, you'll learn to use WordPress widgets — adding block widgets to sidebars, creating custom widget areas, managing visibility, and understanding the evolution from classic to block widgets.

What You'll Learn

• What widgets are (content blocks in sidebar, footer, and other areas)
• Classic Widgets vs Block Widgets (the transition in WP 5.8)
• Accessing the Widgets screen (Appearance > Widgets)
• Using the block widgets editor (add, arrange, and configure like Gutenberg)
• Available widgets (Search, Recent Posts, Archives, Categories, Meta, Tag Cloud, Custom HTML, Navigation Menu)
• Widget visibility (show/hide on specific pages via plugins or widget_logic filter)
• Creating custom widget areas with register_sidebar() in PHP
• Displaying widget areas with dynamic_sidebar() in templates
• Using the Widget block in FSE themes
• The Classic Widgets plugin for reverting

Why It Matters

Widgets are the traditional way to add content to sidebars, footers, and other widgetized areas without editing template files. With the shift to block widgets in WordPress 5.8, understanding both systems is essential. As a developer, you will need to register custom widget areas for themes and plugins. As a site owner, widgets let you add search bars, recent posts lists, and custom HTML to your site's margins without touching code.

Real-World Use

An online magazine needs a "Popular Posts" sidebar on every article, a "Newsletter Signup" form in the footer, and an "Advertisement" block that only shows on the homepage. Using block widgets, the editor adds these to the Footer and Sidebar widget areas. For the ad visibility rule, a small snippet of PHP using the widget_logic filter hides it on all pages except the front page.

Learning Path

flowchart LR
  A[Theme Anatomy] --> B[Installing Themes]
  B --> C[Full Site Editing]
  C --> D[Customizer]
  D --> E[Widgets]
  E --> F[Menus]
  F --> G[Child Themes]
  G --> H[Template Hierarchy]
  H --> I[CSS Customization]
  style E fill:#4a90d9,color:#fff

What Are Widgets?

Widgets are self-contained content blocks that you place in widget areas (also called sidebars). Widget areas are defined by your theme and typically appear in:

• Sidebar (main content sidebar)
• Footer columns
• Header area
• Below or above content

Think of widgets as lego bricks for your site's margins. Each brick does one thing: display recent posts, show a search bar, list categories, or hold custom HTML.

Classic Widgets vs Block Widgets

In WordPress 5.8 (July 2021), the Widgets screen transitioned from classic widgets to block widgets.

Block widgets use the same block editor as posts and pages. You can add paragraphs, headings, images, buttons, columns, and more to your widget areas.

Accessing the Widgets Screen

The Widgets screen is at Appearance > Widgets in the WordPress admin.

For classic themes, this opens the block widgets editor:

• Left panel: List of available widget areas (defined by the theme)
• Right panel: List of available blocks
• Click a widget area to expand it, then click the + button to add blocks

For block themes (FSE), the Widgets screen shows a message: "WP_Block_Theme_Support_Component". Widget areas are managed within templates using the Site Editor instead.

Using the Block Widgets Editor

Adding a Block Widget

1. Go to Appearance > Widgets.
2. Click on a widget area (e.g., "Sidebar").
3. Click the + (Add Block) button.
4. Search for a block (e.g., "Search", "Latest Posts").
5. Click the block to add it.
6. Configure the block settings in the inspector panel on the right.

Arranging Widgets

• Drag blocks by the handle (six dots icon) to reorder
• Use the block toolbar to move up/down
• Group blocks inside a Group or Columns block for complex layouts

Removing a Widget

Click on the widget block, then click the three dots (Options) and select "Remove Block".

Available Widgets (Blocks)

The block widgets editor includes all core blocks plus these widget-specific blocks:

Beyond these, you can use any block — paragraphs, headings, images, buttons, columns, group, and more.

Widget Visibility

Widget visibility controls where a widget appears (homepage only, specific pages, etc.).

Using a Plugin

The "Widget Visibility" feature was part of Jetpack. You can also use:

• Widget Options plugin — Adds visibility rules (pages, posts, categories, user roles)
• Display Widgets plugin — Simple checkbox visibility
• Content Visibility plugin — Modern block-based visibility

Using the widget_logic Filter

For developers, the widget_logic filter controls widget display with a simple PHP callback:

function my_widget_visibility( $instance, $widget, $args ) {
    // Only show on the front page
    if ( ! is_front_page() ) {
        return false;
    }
    return $instance;
}
add_filter( 'widget_display_callback', 'my_widget_visibility', 10, 3 );

Alternatively, the older widget_logic filter works with a string expression:

// Add "Widget Logic" visibility via a custom field
// Widget Logic plugin provides this, or you can add it manually:
add_filter( 'widget_logic_eval_override', 'my_widget_logic' );
function my_widget_logic( $instance ) {
    return $instance;
}

Creating Custom Widget Areas

Themes register widget areas using register_sidebar() in functions.php:

function my_theme_widgets_init() {
    register_sidebar(
        array(
            'name'          => __( 'Sidebar', 'my-theme' ),
            'id'            => 'sidebar-1',
            'description'   => __( 'Add widgets here.', 'my-theme' ),
            'before_widget' => '<section id="%1$s" class="widget %2$s">',
            'after_widget'  => '</section>',
            'before_title'  => '<h2 class="widget-title">',
            'after_title'   => '</h2>',
        )
    );

    register_sidebar(
        array(
            'name'          => __( 'Footer Widget Area', 'my-theme' ),
            'id'            => 'footer-1',
            'description'   => __( 'Footer widgets appear in three columns.', 'my-theme' ),
            'before_widget' => '<div id="%1$s" class="footer-widget %2$s">',
            'after_widget'  => '</div>',
            'before_title'  => '<h3 class="footer-widget-title">',
            'after_title'   => '</h3>',
        )
    );
}
add_action( 'widgets_init', 'my_theme_widgets_init' );

Parameters Explained

• name — Display name in the admin (users see this)
• id — Unique identifier (use for dynamic_sidebar())
• description — Helpful description in the Widgets screen
• before_widget / after_widget — HTML wrapper around each widget
• before_title / after_title — HTML wrapper around widget titles

The %1$s and %2$s placeholders are replaced with the widget ID and class by WordPress.

Displaying Widget Areas in Templates

To display a registered widget area in a template file:

<?php if ( is_active_sidebar( 'sidebar-1' ) ) : ?>
    <aside id="secondary" class="widget-area">
        <?php dynamic_sidebar( 'sidebar-1' ); ?>
    </aside>
<?php endif; ?>

is_active_sidebar() checks whether any widgets are assigned. dynamic_sidebar() outputs all widgets in that area.

Multiple Footer Columns

<div class="footer-widgets">
    <?php if ( is_active_sidebar( 'footer-1' ) ) : ?>
        <div class="footer-column">
            <?php dynamic_sidebar( 'footer-1' ); ?>
        </div>
    <?php endif; ?>
    <?php if ( is_active_sidebar( 'footer-2' ) ) : ?>
        <div class="footer-column">
            <?php dynamic_sidebar( 'footer-2' ); ?>
        </div>
    <?php endif; ?>
</div>

Register each column as a separate sidebar (footer-1, footer-2, etc.).

Widget Block in FSE Themes

In Full Site Editing themes, widget areas are not defined by register_sidebar(). Instead, you add block content directly into template parts:

1. Open Appearance > Editor.
2. Edit a template (e.g., Index or Singular).
3. Add a "Sidebar" block, "Group" block, or "Widgets" block.
4. Add any blocks inside — Recent Posts, Search, Categories.
5. Save.

This approach gives you all the flexibility of blocks without predefined widget areas.

Classic Widgets Plugin

If you prefer the old widget interface, install the Classic Widgets plugin by the WordPress team. It restores the pre-5.8 widget screen. This is useful for:

• Users who find the block editor overwhelming for widgets
• Sites with many existing classic widgets that need maintenance
• Training environments where you teach classic widget management

Note: Classic Widgets is officially supported until at least 2024. After that, block widgets are the only interface.

Common Mistakes

1. Forgetting to display the widget area in templates — Registering a sidebar in functions.php does nothing unless you also call dynamic_sidebar() in a template file. Both steps are required.

2. Using before_widget/after_widget without HTML classes — The %1$s and %2$s placeholders inject widget ID and class. If you omit them, CSS styling for individual widgets may break.

3. Assuming widgets work in FSE themes — Block themes do not use register_sidebar() widget areas. Widgets are added as blocks directly in template parts.

4. Overlooking is_active_sidebar() — If no widgets are assigned, dynamic_sidebar() outputs nothing, but the wrapper HTML (aside, div) still appears. Always wrap with is_active_sidebar() check.

5. Not using unique sidebar IDs — Each registered sidebar must have a unique id. Duplicate IDs cause one sidebar to overwrite the other silently.

Practice Questions

1. What are the two required PHP functions for creating and displaying a custom widget area in a classic theme?

2. What is the difference between classic widgets and block widgets? Since which WordPress version have block widgets been the default?

3. How do you conditionally display a widget only on the front page using a PHP filter?

Challenge: Create a custom theme (or use an existing classic theme) and register three widget areas: "Sidebar", "Footer Left", and "Footer Right". Assign at least one widget to each. In the theme's footer.php, display the two footer areas side by side using a CSS Grid. Verify widgets appear correctly on the front end.

FAQ

Mini Project

Build a custom widget setup for a classic theme:

1. Install a classic theme (e.g., Twenty Twenty) on a local site.
2. In the theme's functions.php, register three widget areas: "Left Sidebar", "Right Sidebar", "Footer Full".
3. In the theme's template files, display all three areas. Use a two-column layout for the sidebars.
4. In the admin, assign widgets:
   • Left Sidebar: Search + Recent Posts
   • Right Sidebar: Categories + Tag Cloud
   • Footer Full: Custom HTML with a copyright notice
5. Use the widget_display_callback filter to hide the Tag Cloud on the front page.
6. Verify every widget displays correctly. Check that the Tag Cloud is hidden on the homepage but visible on post pages.

What's Next

Now that you understand widgets, master navigation menus to create professional site navigation. Then learn child themes to customize any theme safely. Finally, explore CSS customization for fine-grained styling.