How to Register Custom Sidebars Area in WordPress Themes

You can use the default_wp_template_part_areas filter hook to register a custom template part area for sidebars in your WordPress block theme. This allows you to define specific areas for template parts, such as sidebars, headers, or footers. Here’s how you can register a custom template part area for sidebars:

Table of Contents

Sidebars Area Code Snippet

Add the following code to the functions.php file of your theme and replace the word mytheme in the code with your theme slug (folder name of your theme):

/**
 * Registering a custom template part area for sidebars.
 *
 * @param array $areas The template part areas.
 */
function alvandwp_template_part_areas( array $areas ) {
	$areas[] = array(
		'area'        => 'sidebar', // Unique identifier for the area.
		'area_tag'    => 'aside',
		'label'       => esc_html__( 'Sidebar', 'mytheme' ), // Human-readable label.
		'description' => esc_html__( 'A template part area for sidebars.', 'mytheme' ), // Description of the area.
		'icon'        => 'sidebar',
	);

	return $areas;
}
add_filter( 'default_wp_template_part_areas', 'alvandwp_template_part_areas' );

This post can help you if you encounter an issue: How to Edit functions.php File on WordPress Themes

Explanation of Parameters

  1. Unique Identifier ('sidebar'):
    This is the area slug used to identify the template part area programmatically.
  2. Label ('Sidebar'):
    A human-readable label for the area appears in the WordPress editor.
  3. Description:
    A brief description of the purpose of the area to help users understand its use.

Use Sidebars Area in Your Theme

After registering the template part area, you can create and use sidebar template parts in your theme by including them in your templates:

Via Your Favorite Code Editor

  1. Creating a Template Part:
    Create a file in your theme’s parts/ directory (e.g., your_theme_root_folder/parts/sidebar.html).
  2. Referencing the Template Part:
    Use the template-part block in your templates to include it:
    <!-- wp:template-part {"slug":"sidebar","area":"sidebar"} /-->

Via the WordPress Site Editor

First, assign a specific template part to the registered Sidebar area in the Site Editor when creating a new template part. To do so, log in to WordPress (Admin Dashboard) and follow the steps below.

Next, go to the templates section, select the template of choice, and use the block inserter to add the template part you created.

Work on Our Theme

If you follow my previous lessons on WordPress theme design, you know we are working on a theme named Alvand Blog. Here is the newest version of it: Alvand Blog v1.3.0

The important changes are below:

  1. I added the functions.php file in the root of the theme’s folder with the codes for the sidebar template part area.
  2. Change the area of the home-sidebar.html template part in the theme.json file and index.html template to “sidebar”.

Conclusion

This approach helps organize your theme’s structure and provides flexibility in managing different layout sections.

All Parts of This Series

  1. WordPress Theme Design: A Beginner Simple Overview
  2. WordPress Themes: How to Design Header & Footer
  3. How to Design Sidebars in WordPress Block Themes
  4. How to Register Custom Sidebars Area in WordPress Themes

Published on:

Updated on:

Rate this post and help us improve our content to better serve you.

Help us spread the word! Click the share buttons below to share this post with your followers.

We’d love to hear your thoughts on this topic. Feel free to leave a comment below.

Leave a Reply

Your email address will not be published. Required fields are marked *

2 × two =