Bits of .NET

📦 Drag-and-Drop Everywhere

Widgets only in sidebar? Not anymore. register_sidebar() creates widget areas anywhere: header, footer, after content, before comments.

📝 Register Sidebars

// functions.php
function custom_widget_areas() {
    // Footer widget area
    register_sidebar(array(
        'name' => 'Footer Widget Area',
        'id' => 'footer-widgets',
        'description' => 'Appears at the bottom of every page',
        'before_widget' => '
',
        'after_widget' => '
',
        'before_title' => '
',
        'after_title' => '
',
    ));
    
    // After post widget area
    register_sidebar(array(
        'name' => 'After Post',
        'id' => 'after-post',
        'description' => 'Shows after each blog post',
        'before_widget' => '
',
        'after_widget' => '
',
    ));
    
    // Homepage hero area
    register_sidebar(array(
        'name' => 'Hero Section',
        'id' => 'hero-area',
        'description' => 'Full-width hero on homepage',
        'before_widget' => '
',
        'after_widget' => '
',
    ));
}
add_action('widgets_init', 'custom_widget_areas');

🎯 Display Widget Area

// footer.php
if (is_active_sidebar('footer-widgets')) {
    echo '
';
    dynamic_sidebar('footer-widgets');
    echo '
';
}

// single.php (after post content)
if (is_single() && is_active_sidebar('after-post')) {
    echo '
';
    dynamic_sidebar('after-post');
    echo '
';
}

// front-page.php (hero area)
if (is_front_page() && is_active_sidebar('hero-area')) {
    dynamic_sidebar('hero-area');
}

✅ Multiple Widget Areas

• Footer: 4 column widgets (register 4 sidebars)
• Header: Top bar, logo area, navigation
• Sidebar: Primary, secondary, sticky
• Product pages: Custom widget area for related products
• Landing pages: Modular content blocks

💡 Pro Tips

• Use unique, descriptive IDs (e.g., ‘footer-col-1’)
• CSS grid: .footer-widgets { display: grid; grid-template-columns: repeat(4, 1fr); }
• Check is_active_sidebar() before dynamic_sidebar() to avoid empty markup
• Widgets support: Text, Image, Custom HTML, Navigation Menu