Adding Custom Widget Areas to WordPress Theme

Posted on 18th June 2023

In this article we will walk through the process of adding custom widget areas to a WordPress theme. Widget areas can be very useful when developing themes, as they allow for greater flexibility and customization. By default, WordPress comes with a handful of built-in widget areas such as the sidebar, header, and footer. However, sometimes these default widget areas are not enough. This is where custom widget areas come in handy.

Creating a Custom Widget Area

The first thing we need to do is register our custom widget area. We can do this by adding the following code to our theme’s functions.php file:

function my_theme_widgets_init() {


register_sidebar( array(
'name' => __( 'Main Sidebar', 'my-theme' ),
'id' => 'sidebar-1',
'description' => __( 'This is the main sidebar.', 'my-theme' ),
'before_widget' => '<div id="%1$s" class="widget %2$s">',
'after_widget' => '</div>',
'before_title' => '<h3 class="widget-title">',
'after_title' => '</h3>',
) );
}

add_action( 'widgets_init', 'my_theme_widgets_init' );

In the code above, we are using the register_sidebar() function to register our custom widget area. This function allows us to specify a number of options for our widget area, such as its name, id, and description. We are also using the before_widget, after_widget, before_title, and after_title options to specify the HTML that should be displayed before and after our widget area and its title.

Once our custom widget area is registered, we can then add it to our theme. We can do this by adding the following code to our theme’s template files:

<?php if ( is_active_sidebar( 'sidebar-1' ) ) : ?>


<div id="secondary" class="widget-area" role="complementary">
<?php dynamic_sidebar( 'sidebar-1' ); ?>
</div>

<?php endif; ?>

In the code above, we are using the is_active_sidebar() function to check if our custom widget area is active. If it is, we then use the dynamic_sidebar() function to output our widget area. We can also use this function to output other built-in widget areas such as the sidebar, header, and footer.

Adding Widgets to Our Custom Widget Area

Now that we have our custom widget area set up, we can start adding widgets to it. Widgets can be added via the Appearance > Widgets page in the WordPress admin. Simply drag and drop the widgets you want to add into your custom widget area.

And that’s it! You should now have a fully functioning custom widget area in your WordPress theme.

In the following steps we will be adding a custom widget area to the WordPress Twenty Seventeen theme. This can be done in any theme but the method may be slightly different.

1. Open your child theme’s functions.php file and add the following code:

// Register Custom Sidebar
function my_custom_sidebar() {

$args = array(
‘id’ => ‘my_custom_sidebar’,
‘class’ => ‘my_custom_sidebar’,
‘name’ => __( ‘My Custom Sidebar’, ‘text_domain’ ),
‘description’ => __( ‘This is my custom sidebar.’, ‘text_domain’ ),
‘before_title’ => ‘

‘,
‘before_widget’ => ‘

‘,
);
register_sidebar( $args );

}
add_action( ‘widgets_init’, ‘my_custom_sidebar’ );

2. The code above will register a new sidebar called “My Custom Sidebar”.

3. Now we need to add some code to our template files to display the sidebar.

Open the header.php file and find the code that looks like this: