Structure View
PHP 7.4+
Register Sidebar Area
Create widget areas for your theme footer or sidebar. Visualize the HTML wrappers to prevent broken layouts during theme development.
Sidebar Settings
HTML Wrappers
Frontend HTML Structure
Live Preview
// Generated HTML Output:
<div id="recent-posts" class="widget widget_recent_entries">
<h2 class="widget-title">
Recent Posts
</h2>
<ul>
<li>Hello World</li>
<li>Sample Page</li>
<li>A third post title</li>
</ul>
</div>
Rendered Output
<div id="%1$s" class="widget %2$s">
<h2 class="widget-title">
Recent Posts
</h2>
- Hello World
- Sample Page
- A third post title
</div>
Widget Wrapper
Title Wrapper
•
HTML structure updates in real-time
Why Wrappers Matter
WordPress outputs widgets dynamically. If you don't define before_widget and after_widget, WordPress defaults to simple <li> tags, which can break your CSS grid or flexbox layouts.
Displaying your Sidebar
After registering, use this PHP function in your theme files (e.g. sidebar.php or footer.php) to display the widgets:
<?php dynamic_sidebar( 'main-sidebar' ); ?>