Lesson 11: Widgets and Sidebars
Objectives
- Understand what widgets and widget areas (sidebars) are
- Add, configure, and remove widgets
- Know the common widget types
- Understand how widgets fit into modern WordPress
What Are Widgets?
Widgets are small content blocks you can place in designated areas of your site. They add content and features outside of your main page/post content.
Widget Areas (also called "sidebars") are the locations where widgets can be placed. Despite the name "sidebar," widget areas can be anywhere your theme defines them:
- Sidebar (left or right column)
- Footer (one or more footer columns)
- Header area (some themes)
Widget Areas in Hello Elementor
Hello Elementor is minimal and provides limited widget areas by default. Most themes (like Astra) offer more.
When using Elementor for your design, you'll rely less on widgets because Elementor has its own widgets system. However, understanding WordPress widgets is important because:
- Many themes and plugins use them
- Blog sidebars commonly use them
- Footer areas often use them
- You'll encounter them on existing sites
Managing Widgets
Accessing the Widget Editor
There are two ways to manage widgets:
Method 1: Block-based Widget Editor (newer)
- Go to Appearance → Widgets
- You'll see your widget areas with a block-based editor
- Add blocks just like in the post editor
Method 2: Through the Customizer
- Go to Appearance → Customize → Widgets
- Select a widget area
- Add and configure widgets with a live preview
Adding Widgets
- Go to Appearance → Widgets
- Click the "+" button in the widget area where you want to add content
- Search for or browse available widgets/blocks
- Click to add, then configure
Removing Widgets
- Click on the widget in the widget area
- Click the three-dot menu (⋮)
- Select "Remove"
Common Widget Types
| Widget | What It Does |
|---|---|
| Paragraph | Display text |
| Image | Display an image |
| Search | A search bar for your site |
| Recent Posts | List of your latest blog posts |
| Recent Comments | List of latest comments |
| Archives | Monthly/yearly post archives |
| Categories | List or dropdown of post categories |
| Navigation Menu | Display a menu you've created |
| Custom HTML | Add raw HTML code |
| Calendar | A calendar showing posts by date |
| Tag Cloud | Display your tags in a visual cloud |
| RSS | Display feed from another site |
Plugin Widgets
Many plugins add their own widgets:
- WooCommerce: Cart, product search, product categories, filters
- Contact forms: Display a form in the sidebar
- Social media: Social links, feeds, follow buttons
Common Widget Area Uses
Sidebar Widgets (for blogs)
A typical blog sidebar might include:
- Search bar
- About the author (text + image)
- Recent Posts
- Categories
- Social media links
- Newsletter signup
Footer Widgets
A typical footer might include:
- Column 1: About the company + contact info
- Column 2: Quick links (menu widget)
- Column 3: Recent posts or social links
- Column 4: Newsletter signup or business hours
Widgets vs Elementor Widgets
Don't confuse these two:
| WordPress Widgets | Elementor Widgets |
|---|---|
| Go in theme-defined widget areas | Go anywhere in Elementor designs |
| Managed at Appearance → Widgets | Managed in the Elementor editor |
| Limited placement options | Full drag-and-drop freedom |
| Basic styling options | Full styling control |
When using Elementor: You'll mostly use Elementor's own widgets within the page builder. WordPress widgets become relevant mainly for:
- Blog sidebars (if your blog template has a sidebar)
- Areas Elementor doesn't control (depends on your setup)
- Quick additions to footer areas
The Widget Block Editor
Modern WordPress uses the block editor for widgets (same blocks as the post editor). This means you can add:
- Paragraphs, headings, images, lists
- Columns for multi-column layouts within a widget area
- Any block type available in the post editor
Legacy Widget Block
If a plugin provides an old-style widget that doesn't have a block equivalent:
- Add the "Legacy Widget" block
- Select the old-style widget from the dropdown
- Configure it within the block
Exercises
Explore widget areas: Go to Appearance → Widgets and see what widget areas your theme provides.
Add widgets to a sidebar: If your theme has a sidebar widget area, add a Search block, a Recent Posts block, and a Categories block.
Add footer content: If your theme has footer widget areas, add some text, an image, and a navigation menu widget.
Use the Customizer: Go to Appearance → Customize → Widgets and try adding/editing widgets with the live preview.
Remove a widget: Practice removing a widget you added.
Key Takeaways
- Widgets are content blocks placed in widget areas (sidebars, footers)
- Manage them at Appearance → Widgets or through the Customizer
- Modern WordPress uses the block editor for widgets
- Common widgets: Search, Recent Posts, Categories, Navigation Menu, Custom HTML
- When using Elementor, you'll rely less on WordPress widgets and more on Elementor's own widget system
- Plugins often add their own widgets (WooCommerce, contact forms, etc.)
- Widgets are most useful for blog sidebars and footer areas
Next Lesson: Lesson 12 - The Customizer