classic-theme-sidebars-widgets

Classic Theme Sidebars and Widgets

Use this when adding or reviewing widget areas in a classic PHP theme: blog sidebars, footer columns, header widget areas, shop sidebars, or template-specific widget regions.

In WordPress naming, "sidebar" means a registered widget area. It does not have to appear visually at the side of the layout.

When to Use This Skill

• Registering widget areas with register_sidebar().
• Creating sidebar.php or sidebar-{name}.php.
• Rendering dynamic_sidebar().
• Checking empty widget area behavior.
• Migrating hardcoded footer/header content to user-manageable widget areas.
• Reviewing widget markup semantics and REST exposure.

Register Widget Areas

Register widget areas on widgets_init.

add_action( 'widgets_init', 'mytheme_register_sidebars' );

function mytheme_register_sidebars() {
	register_sidebar(
		array(
			'name'          => __( 'Primary sidebar', 'textdomain' ),
			'id'            => 'sidebar-1',
			'description'   => __( 'Widgets shown beside the main content.', 'textdomain' ),
			'before_widget' => '<aside id="%1$s" class="widget %2$s">',
			'after_widget'  => '</aside>',
			'before_title'  => '<h2 class="widget-title">',
			'after_title'   => '</h2>',
			'show_in_rest'  => false,
		)
	);
}

Rules:

• Always provide an explicit id.
• Treat IDs as persistent storage keys. Changing an ID after release can orphan assigned widgets.
• Keep %1$s and %2$s in before_widget; core substitutes widget ID and classes.
• Choose semantic wrappers: aside for side content, section for content regions, div only when no semantic element fits.
• Use translated name and description.
• register_sidebar() adds theme support for widgets.

Multiple Areas

Use predictable IDs for repeated footer columns.

for ( $i = 1; $i <= 4; $i++ ) {
	register_sidebar(
		array(
			'name'          => sprintf(
				/* translators: %d: Footer column number. */
				__( 'Footer column %d', 'textdomain' ),
				$i
			),
			'id'            => 'footer-' . $i,
			'before_widget' => '<section id="%1$s" class="widget %2$s">',
			'after_widget'  => '</section>',
			'before_title'  => '<h2 class="widget-title">',
			'after_title'   => '</h2>',
		)
	);
}