How To Create Widget Area In WordPress Theme
A WordPress widget is a little square that plays out a particular capacity. Regularly, every widget is put in a widget territory called sidebar. Every point contains the zone of the widget region.
But it is very useful for you to learn how to create a custom widgets area in wordpress. So you can create your own widgets area where you want or according to the needs of your customers.
You can also use a widget outside the sidebar. Read our article How to use Widget outside the sidebar.
Let’s start and create a custom widget area.
1. Register a custom widget area
To save a widget area, paste the following code in the functions.php file for your theme.
function smallenvelop_widgets_init() {
register_sidebar( array(
‘name’ => __( ‘Header Sidebar’, ‘smallenvelop’ ),
‘id’ => ‘header-sidebar’,
‘before_widget’ => ‘<div>’,
‘after_widget’ => ‘</div>’,
‘before_title’ => ‘<h1>’,
‘after_title’ => ‘</h1>’,
) );
}
add_action( ‘widgets_init’, ‘smallenvelop_widgets_init’ );
2. Display the widget area
To display the widgets area, paste the following code in the desired location in the theme file. Here I insert this code in the header.php of your theme.
<?php if ( !function_exists(‘dynamic_sidebar’) || !dynamic_sidebar(‘header-sidebar’) ) :
endif; ?>
Everything is done, so we created a new area of widgets! To preview the newly created widgets area, go to Appearance> Widgets. There must be a widget area called "Header Sidebar".
The above code allows you to save multiple areas of widgets.
The above code allows you to save multiple areas of widgets.
Just use a different identifier for each widget area.
Add classes and HTML tags to the area of custom widgets.
If you want to format these widgets that appear in your new custom widgets area, simply add HTML code or classes as follows
register_sidebar( array(
‘name’ => __( ‘Main Sidebar’, ‘bharat’ ),
‘id’ => ‘sidebar-1’,
‘description’ => __( ‘Appears on posts and pages except the optional Front Page template, which has its own widgets’, ‘bharat’ ),
‘before_widget’ => ‘<aside id=”%1$s” class=”widget %2$s”>’,
‘after_widget’ => ‘</aside>’,
‘before_title’ => ‘<h5 class=”widget-title”>’,
‘after_title’ => ‘</h5>’,
) );
In the above code, we have included and HTML tag called ‘aside’ with a class ‘gadget’.
We have additionally wrapped gadget title with ‘h5’ with a class ‘gadget title’.
Presently you can apply some custom CSS with the assistance of those classes and markups.
On the off chance that you would prefer not to add codes to your WordPress topic, there are some free modules which will do these assignments for yours.