WordPress: Add a new widget area to a WordPress theme

If you're familiar with WordPress themes, you know that many themes come with a widgetized sidebar. This means that you can add, remove, and rearrange widgets on your WordPress website using the "Widgets" section of your WordPress dashboard.

Having a widgetized sidebar is very useful, but you may also want to widgetize other parts of your WordPress theme. It's quite easy to do, and once your theme is modified, it will be simple for you or the WordPress administrator to rearrange this dynamic content area.

We are going to add a widget area in our main template, and ensure that this area only displays on the homepage.

Firstly, we add the call to our sidebar template in the theme's index.php.

if(is_front_page()){
		   get_sidebar('widget-homepage');
}

We check if we are on the homepage, and call our sidebar which we name "widget-homepage".

We then create a template file for our widget. It should be at the root of your theme and named "sidebar-{widget-id}" (here the ID of our widget is "widget-homepage").
In this file, we use the WordPress function "dynamic_sidebar" which creates our zone.

Here is the content of our sidebar-widget-homepage.php file

 <?php dynamic_sidebar( 'widget-homepage' ); ?>

Nothing more, nothing less.

We then need to tell WordPress how this area is going to be managed. And incidentally, let it know that it exists.
In our functions.php file, we are going to add this:

function add_widget_area($id, $name, $description) {
        register_sidebar([
            'name'          => __( $name ),
            'id'            => $id,
            'description'   => $description,
            'class'        => '',
    		'description'   => esc_html__( 'Add widgets here.', 'partitech' ),
    		'before_widget' => '<section id="%1$s" class="widget %2$s">',
    		'after_widget'  => '</section>',
    		'before_title'  => '<h2 class="np-block-title">',
    		'after_title'   => '</h2>',
        ]
        );
  
}

add_widget_area('widget-homepage', 'Homepage widget zone', 'zone widget homepage');

Then simply go to your theme's widget manager or WordPress and add the widgets you want.

Reproduce this customization today

The principle of the hook remains useful, but the administration screens and WordPress APIs have evolved since the publication. Test the code in a staging environment with the exact version of the site's core, theme, and plugins.

• Save the files and the database before making any changes.
• Control user capabilities, nonces, input validation, and output escaping.
• Place customizations in a dedicated plugin or a child theme to preserve updates.

Reference: official WordPress plugin development manual.