How to Add Widget Areas to WordPress (Block & Classic Themes)

container.

  • before_widget and after_widget — Same as above but for any widget that appears in this area.

There are other parameters you can use with register_sidebar(). You can learn more about them in the documentation. However, for our purpose, the above is enough.

Once present in functions.php and with the file saved, the widget area will already show up in the WordPress back end.

2. Outputting Widget Areas in Your WordPress Theme

While you can already see the widget area in the dashboard, currently putting any blocks or widgets in there will have no effect. That’s because there is not yet any markup that tells the theme to output whatever you add to it.

This happens via the dynamic_sidebar() function. For example, to output the widget area that you created above anywhere in your theme, you can use this function:

Note how the code contains the same id as the widget area created earlier in order to display it.

While the above works, it often makes sense to use a slightly more complex snippet:


		

The code above first checks if the widget area in question has any widgets in it and adds it to the page only if that is the case. It also contains some more markup like HTML classes and ids to make it easier to customize the output via CSS.

That only leaves the questions, where do you put this markup?

The answer: Anywhere in your theme files where you want the widget area to appear. Typically that is inside page template files like page.php or single.php. However, you can also add it to something like header.php or footer.php. To make a decision, it helps if you know the template hierarchy and understand how themes work.

In this case, for the Twenty Twenty-One theme, we place it inside header.php right after the opening of the page.

code to display widget area in header file

With the code in place, when we now put a widget inside the newly created area, it will show up on the website in the intended place.

widget content on page

Alternative: Use WordPress Hooks to Display Widget Areas

Instead of adding the code snippet directly to your page templates and theme files, you can also achieve the same output using WordPress Hooks.

These are little pieces of code placed in strategic locations inside the aforementioned files that you can use to tell WordPress to execute functions in that very place without physically placing the code there. Instead, you can place the functions in question inside functions.php. Doing so has the benefit that it’s possible to manage all your widgetized areas from a single place.

What would that look like for our case?

Here’s how to place a widget area using a WordPress hook:

function ns_output_top_banner_widget() {
	
	if ( is_active_sidebar( 'top-bar-widgets' ) ) :
		dynamic_sidebar( 'top-bar-widgets' );
	endif;
}

add_action( 'wp_body_open', 'ns_output_top_banner_widget' );

The Twenty Twenty-One theme has a hook named wp_body_open() insider its header file. By hooking into it, we can display the widget area in the same place without modifying the file itself.

As mentioned, the code snippet goes inside your (child) theme’s functions.php. This method is especially suitable for themes that contain a lot of hooks, like the Genesis Framework.

How to Add Widgets in Block Themes

So far, we have only talked about how to create widget areas in classic themes. However, what about block themes, which – after all – will likely become the de-facto standard for WordPress themes.

Here, because the Site Editor works very differently, you don’t really have widget areas. You will also notice that the Appearance > Widgets menu does not exist.

missing widgets menu with block theme active

However, you can still add widgets, content, and other elements to your theme using similar principles as above.

Enter Page Templates and Template Parts

The first thing to notice here is that you are a lot less constrained in your placement of widgets with the block editor. Since you are not limited to pre-configured widget areas, you can place any page element pretty much where you desire.

However, you can still use blocks like widgets in classic themes by using page templates and template parts. Access them in your block via menu in the Site Editor on the left (click on the WordPress logo in the upper left corner to open it).

templates and template parts in wordpress site editor

This gives you a list of available page templates on your site. They usually range from page over archive templates to the 404 page.

available page templates in site editor

It’s similar to what you would find if you had a look at the theme files in a classic theme.

Under Template Parts, on the other hand, you find templates for parts of your website like the header, footer, or comment section.

available template parts in wordpress site editor

Click on any of them to open in the editor. Alternatively, you can also make changes to your templates and template parts via the Template Editor. That is a slightly reduced version of the Site Editor that you can open via the normal page editor. Just open your desired page, click on the template name under Template, and then Edit template.

edit wordpress page template from template editor

You can also pick another template from the drop-down editor.

Adding New Elements/Widgets

If you know how page templates work, you probably understand that any changes you make here will affect not just a single page but every single piece of content on your website that uses the page template or template part. Therefore, any page elements that you add to them will appear everywhere on your site where those are active.

For example, you can add a latest post widget to the footer template part.

add latest posts widget to footer template part

If you do, and save, it also appears on the front end of the website for every page where this template part is present.

new widget in footer on website front end

If you think about it, that’s not very different from how classic widget areas work. They are also simply a way to add page elements and content so that they are reproduced in the same place across your entire website.

The only difference here is that there is no need to edit files. Instead, you can do all of it in the visual editor, WordPress creates and modifies the files for you.

Creating New “Widget Areas” in WordPress Block Themes

So, how do you create new widget areas in block themes?

The answer is: You don’t really. However, the closest equivalent to it is creating new page templates and template parts. Doing so allows you to add content that will show up only in limited parts of your website.

Let’s go over an example to make things clearer. Say you want to do the same thing we did manually on top. In the past, you would have to register a widget area and then add the code to output it. With the Site Editor, you can achieve the same thing. Only in this case, it’s much easier.

One possibility is to create a new template part. For that, under the Template Parts menu in the editor, click the plus icon at the top.

add new template part in wordpress site editor

In the menu that appears, give it a name (for example, “Header with top bar”) and choose the type (in this case, Header, of course), then start editing. Populate it with any page elements, widgets, and content you need or desire.

new template part with custom content

When you are done, you still need to assign it to the page template that you want it to appear in.

For that, go to that template (in this case, Home) and find the existing header. Click on it, then on the three dots to open its menu, and choose Replace header.

replace header template part in site editor

This will open a menu with available template parts and patterns on your site.

insert custom template part into page template

Pick the one you just created to input it, then save the page template. If you now go back to your website’s front end, you see your newly created header live on the page (and only there).

new widget visible on website front end

How to add New Widgets/Blocks

The final question that remains when talking about how to create widgets and widget areas in block themes is how to add more widget choices. After all, by default, you are only limited to a handful of options. Luckily, there are different ways to add more.

For one, you can install Gutenberg block plugins, many of which contain different widget blocks such as forms, maps, or carousels.

In addition, you also have the possibility to install singular blocks with widget functionality. For that, first click on the block inserter inside the WordPress Site Editor.

open block inserter in wordpress site editor

Once open, enter a search term for the kind of block you are looking for in the field at the top. Besides any options already present on your site, the editor will also search the WordPress block directory and show fitting options.

custom block search results

If something sounds like what you are looking for, simply click on the block in question to install it on your site and insert it into the page in the current position. Place it in the page template or template part where you want it to appear and save. Then, admire it on the front end of your site.

By the way, you can always remove singular blocks that you installed in the Plugins menu in case you don’t need them anymore.

deactivate deinstall wordpress block

Widgetizing WordPress Themes is Not That Hard

Adding widgets and widget areas in WordPress is an important skill to display a wide array of features and information on your site. They help to make your site more interactive, informative, and usable.

In classic themes, the approach to creating widget areas is a little more technical. You need a rudimentary understanding of WordPress file architecture and feel comfortable with a code editor and making adjustments to PHP code. In block themes, on the other hand, you can do the same with just your mouse cursor.

What’s important to keep in mind is that the principles are the same, only the implementation differs. Now that you know how it’s done, use this knowledge to improve your site!

What is a must-have widget that you like to place on your websites? Are you using a classic or block theme to implement it? Let us know in the comments!

Related articles

Interaction to Next Paint (INP): WordPress Optimization Guide

Interaction to Next Paint or INP is the latest...

7 Must-Have Pages Every Website Needs (+ 11 Optional Ones)

What are must-have, essential pages for every website?Every website...

How to Improve First Input Delay (FID) on Your WordPress Site

We recently started off a new series on Google’s...

Real-Time Collaboration in WordPress: Here’s What to Expect

Bringing real-time collaboration or collaborative editing to WordPress will...

Case Studies

Finance and Budgeting Blog

Easy Extra Dollar is your trusted source for valuable insights into finance, budgeting, and investing. The platform is dedicated to helping individuals and families...

Marketing Gamut – Marketing Blog

Marketing Gamut is the ultimate platform for marketing enthusiasts, offering valuable insights, engaging content, and thought-provoking discussions on all things marketing. The client needed...

Business and Marketing Insights Blog

Business Analysis is a platform dedicated to decoding the complexities of business and marketing through comprehensive data analysis and strategic planning. The client required...