WordPress Widgets
A widget is a small piece of content or feature which you can place in a widget area of your theme, like the sidebar or footer. Search box, recent posts, categories list, calendar and a text box are well known examples. The widget areas are also called sidebars in WordPress code.
Block widgets
Since WordPress 5.8 the widget screen uses blocks. Every block can work as a widget, so you can add a paragraph, an image or a button to the sidebar in the same way as in a post. The old widgets are still available as the blocks (Search, Latest Posts, Archives and more) and in the Legacy Widget block.
Where are widgets managed?
| Theme type | Where to manage widget areas |
|---|---|
| Classic theme | Appearance > Widgets (or the Customizer) |
| Block theme | Appearance > Editor. Add blocks to the header, footer or any template part, there is no Widgets screen |
Try widgets with a classic theme
Twenty Twenty-One is a classic theme, so it has widget areas. Install and activate it, and look at the sidebars:
$ wp theme install twentytwentyone –activate
Installing Twenty Twenty-One (2.9)
Downloading installation package from https://downloads.wordpress.org/theme/twentytwentyone.2.9.zip…
Using cached file '/tmp/wpcache/theme/twentytwentyone-2.9.zip'…
Unpacking the package…
Installing the theme…
Theme installed successfully.
Activating 'twentytwentyone'…
Success: Switched to 'Twenty Twenty-One' theme.
Success: Installed 1 of 1 themes.
$ wp sidebar list –fields=name,id
name id
Footer sidebar-1
Inactive Widgets wp_inactive_widgets
$ wp widget list sidebar-1 –fields=name,id,position
name id position
block block-2 1
block block-3 2
block block-4 3
block block-5 4
block block-6 5
Now we add a Search widget and a Recent Posts widget to the footer widget area (sidebar-1) and check the front page:
$ wp widget add search sidebar-1 1 –title="Find something"
Success: Added widget to sidebar.
$ wp widget add recent-posts sidebar-1 2 –title="Latest posts" –number=3
Success: Added widget to sidebar.
$ wp widget list sidebar-1 –fields=name,id,position
name id position
search search-1 1
recent-posts recent-posts-1 2
block block-2 3
block block-3 4
block block-4 5
block block-5 6
block block-6 7
$ curl -s http://example.com/ | grep -o 'widget-title">[^<]*' | head
widget-title">Find something
widget-title">Latest posts
Register a sidebar in your theme
Developers create widget areas in functions.php. You will learn it in WordPress Register Sidebar.
| Exercises & Assignments |
|---|
| No Content Found. |
| Interview Questions & Answers |
|---|
| No Content Found. |