How to Add Custom Widget Areas to WordPress

One of the issues every website owner or creator faces is how to make their website more visually engaging and improve user retention. The benefits are quite clear, the longer a visitor stays on the site, the higher the chance of newsletter subscriptions, sales, or ads revenue. You can spark visitors’ interest by making useful and engaging content, but you can also include carefully picked widgets to captivate the visitors and keep them on your site longer. However, you also need to find just the right number of widgets to use, as having either too few or too many can backfire on you. This is, in part, why theme developers have created default widget areas. These areas let users drag and drop different widgets in them. The same widget areas can target different pages or parts of the content. The number of default widget areas can range quite substantially depending on the theme. But, no matter how many are present, having the option to add more custom widget areas that would be tailored to your needs can be quite useful. As such, we decided to make this comprehensive guide explaining how to create additional widget areas. Using the steps outlined in this article, you can make a stunning website that grabs the attention of its visitors and keeps them engaged.

If you’d like to skip to any specific part of the article, just click on one of the links below:

How to add widget areas in WordPress

Before we delve into the process of adding custom widget areas, we need to mention that this is an advanced topic. Therefore, depending on your previous WordPress knowledge, you might need to conduct some additional research or even hire professional assistance. However, if you choose to proceed, we advise you to make a site backup first. We have broken the process down into smaller steps that you should follow carefully. These steps are accompanied by thorough explanations and paired with some helpful tips and examples near the end of the article. So, without further ado, let us begin.

Using theme-specific options to add widget areas

The easiest way of adding custom widget areas is by using the in-built theme options if your theme has them. All of our premium WordPress themes, for example, have such an option. You can investigate whether your theme has the same features by navigating to Appearance > Widgets. Check if there is an option or field for creating/adding custom widget areas. In the screenshots below, we used the Manon theme as an example for adding custom widget areas using the theme’s options. Within it, the section you need is simply named Custom Widget Area and is located near the bottom right part of the screen.

In that case, all you need to do to add a custom widget area is insert the name of your new widget area and press the Add Widget Area button. Then an empty widget area will appear at the end of the existing widget areas list.

Custom widget areas are very similar to the default ones. The main thing that differentiates them, is the option to delete your custom area by pressing on the X in the right corner. After you create a widget area, you can add widgets from the Available Widgets section on the left by dragging and dropping them normally.

When your new widget area and its contents are ready, the only thing that remains is to make it show in your desired location. Depending on where that is, you need to modify different options within the theme. For example, if you want to use your newly created widget area as a sidebar on your blog categories and tags, you can do so by adjusting the appropriate options in Theme Options > Blog > Blog Lists section. You can manually choose a custom widget area as your sidebar on archive pages (categories and tags) using the dropdown, as shown in the screenshot below.

Similarly, you can adjust the layout of the sidebar, meaning its position and width, by adjusting the Sidebar Layout for Archive Pages option, which is highlighted on the screenshot as well. You can also set a custom widget area as a sidebar on a single blog post. To do so, you need to locate and open your chosen post, then find the set of options, equivalent to those above, that belong to it. Following the same logic as earlier, those options will be located in the Theme Post section (in our case, the Edge Post section). There you will find the sidebar and sidebar layout options that apply to the specific post you opened.

Before proceeding to the next section, we should clarify one thing—the difference between a sidebar and a widget area. The short explanation is that there is no difference and that those two terms can be used interchangeably. The reason for that is that in the early years of WordPress, only the sidebar existed. But, as the WordPress code developed, the option to add widgets into the header, footer, or other theme-defined areas became possible. Thus, the term widget area was born, referring to all the areas where you can insert widgets. Even though the new term is prevalent today, you might also encounter the use of the term sidebars for all those areas, especially among developers.

Creating custom code to add widget areas

If your theme lacks the options described previously or you simply want more flexibility, custom coding to create additional widget areas is the way to go. As the topic is somewhat coding-intensive, we suggest finding additional developer assistance if you aren’t familiar with coding. Whatever you choose to do, we have divided the process into three easy steps so it is easier to follow. Those steps are: registering the widget area, inserting widgets, and showing the widget area on the website. We also included some additional tips in the section after this one.

The first step to adding widget areas to your WordPress website is the registration. Every widget area must be first registered using the register_sidebar function. This requires inserting a code which is similar to the one given below inside the functions.php file of your theme.

function register_custom_widget_area() {
register_sidebar(
array(
'id' => 'new-widget-area',
'name' => esc_html__( 'My new widget area', 'theme-domain' ),
'description' => esc_html__( 'A new widget area made for testing purposes', 'theme-domain' ),
'before_widget' => '<div id="%1$s" class="widget %2$s">',
'after_widget' => '</div>',
'before_title' => '<div class="widget-title-holder"><h3 class="widget-title">',
'after_title' => '</h3></div>'
)
);
}
add_action( 'widgets_init', 'register_custom_widget_area' );

Editing your theme’s functions.php file requires the use of FTP, so you might want to read up on that before proceeding. When you’re ready, you can examine the list of arguments that a register_sidebar function could have along with their explanations.

Those are the following:

After registration, the second step should be very familiar to any WordPress user. It involves dragging and dropping widgets inside the newly created widget area. To do this, navigate to Appearance > Widgets, locate the widget area you created and add the widgets you want to it.

However, even after you register the widget area and make sure it isn’t empty, it still won’t automatically show on your site. For it to appear, you need to add additional code that “calls” the specific sidebar, i.e. widget area, that you created. The code you need to insert is similar to this one:

<?php if ( is_active_sidebar( 'new-widget-area' ) ) : ?>
<div id="secondary-sidebar" class="new-widget-area">
<?php dynamic_sidebar( 'new-widget-area' ); ?>
</div>
<?php endif; ?>

You need to place this code inside one of the theme’s template files. Which file you use depends entirely on where you wish your new widget area to show. The most common choices are sidebar.php, header.php, or footer.php files. Once you pick the file you’ll be using, you can consider the components of the code that you need to insert.

The function dynamic_sidebar is the one responsible for showing the widget area. It accepts a previously registered name or id of a widget area as valid parameters. Wrapping the widget area with a div tag isn’t necessary, but we recommend it as it makes the HTML of your pages more structured. Furthermore, you can also add ids or classes to those divs. This will make stylizing that content much easier afterward. Finally, by further wrapping the code with the is_active_sidebar conditional tag, we are making sure the widget area is only shown if it has widgets inserted.

Additional tips

Using the steps described above, you should now have a custom widget area with basic functionality. However, if you want to, you have the option to improve on some things. The two most obvious points you might want to address are limiting the visibility of the added widget area and improving its stylization. We will cover both below.

Using conditional tags

Some widget areas can be used on every page, while others only on a selected few. For example, you might want to show a specific sidebar only on a certain type of page (e.g. post categories). These settings and functionalities are usually achieved through the use of theme options in case of the default widget area. However, to achieve the same for the widget areas you created using code, you need to employ conditional tags and statements. We will show you the steps as well as a few examples of conditional tags using the Cevian theme.

Examples:

if ( is_single( array( '831', '1193') ) && is_active_sidebar( 'new-widget-area' ) ) { ?>
<div id="secondary-sidebar" class="new-widget-area">
<?php dynamic_sidebar( 'new-widget-area' ); ?>
</div>
<?php }

The code above shows the new widget area you created if it has widgets inserted. And the widget area is set to show only on posts whose IDs are 831 and 1193. You can find out our post IDs using the post’s URL. When you’re editing a single post, the part of the URL directly after “post=” will show the post’s ID.

You can place this same code in the sidebar.php file, right before the code that shows the default theme sidebar. In that case, you could have a two-part sidebar and the result would look similar to the screenshot below.

function portfolio_after_content_widget_area() {
if ( is_singular( 'portfolio-item' ) && is_active_sidebar( 'new-widget-area' ) ) { ?>
<div id="secondary-sidebar" class="new-widget-area">
<?php dynamic_sidebar( 'new-widget-area' ); ?>
</div>
<?php }
}
add_action( 'cevian_select_action_portfolio_page_after_content', 'portfolio_after_content_widget_area' );

The purpose of this code is to show the previously created widget area only on portfolio items if it has widgets inside it. In this case, a portfolio item serves as a custom post type that a theme might have. However, this code is different from the earlier examples in that you should insert it inside the functions.php of your theme. That is because the function that was written—portfolio_after_content_widget_area “hooks” onto an action hook belonging to the Cevian theme called cevian_select_action_portfolio_page_after_content. Using hooks and filters is the recommended, developer-friendly way of adding custom functionalities to the theme you are using. Generally, as this is quite an advanced topic, we suggest conducting additional research before proceeding. Furthermore, apart from using theme-specific hooks, you can also make use of one of the default WordPress hooks. Nevertheless, if you plan on using the code given in the example, don’t forget to replace the cevian_select_action_portfolio_page_after_content action hook with the hook best suited to your needs, whether it’s a default WordPress hook or one specific to the theme you are using.

Here’s an example of how the result might look:

Stylizing the created widget areas using CSS

Depending on the widgets you put inside the new widget area or its position on the page, there might still be things you need to address. These issues are mostly stylistic. Adjusting the paddings or margins, text alignment, or some typography settings are the first things that come to mind. And all of these can be resolved using CSS. To create that CSS, you need to inspect the page where your new widget area’s content can be found. You can do it by right-clicking somewhere on the page (ideally, on one of the widgets you added) and then choosing the Inspect option from the menu that opens.

In the window that opens, from the Elements tab, you need to find the widget area you added. Then write the CSS for the widgets there. Generally speaking, the CSS you write should have the following format:

your-css-selector{
// CSS rules go here
}

The difficult part is finding the right CSS selector. This is why wrapping the widget area code with divs that have a certain custom class or id is recommended. It makes the task of finding a suitable CSS selector much easier. Using our example code above, we can simply start our CSS selector either with #secondary-sidebar or .new-widget-area. This will ensure that either the whole custom widget area or some of the widgets within it are affected.

In case you weren’t able to follow the last section of this article or you simply want to brush up on your CSS knowledge, you can learn more about CSS selectors and the use of CSS in general before customizing your new widget area. This will be well worth the time you invested, as small CSS tweaks will let you modify the look of any widget area you create to give it that special something that will wow your site’s visitors.

Final Thoughts

Widget areas are a very important part of every WordPress site, as they are used both to enrich the site’s design as well as to catch the visitors’ attention and interact with them. Even though every theme has its default widget areas, adding a custom widget area can make your site stand out from the crowd. With the steps and tips given in our carefully written article, you will hopefully find the task of adding custom widget areas much easier. Now all you have to do is decide where you want to put your new widget area and which widgets you want to add to it to get the best results. Throw in a dash of custom CSS to stylize it, and you will be well on the way to making a breathtaking website.