How to Create & Add Sidebars in WordPress

Widgets are such an integral part of a WordPress theme that it is difficult to imagine a WordPress theme without widgets. Widgets are executable scripts that you can simply drag and drop into your sidebar or any other widget ready area in your theme. Many of our readers use widgets to add custom elements to their sidebar. However, this article is intended for curious users who want to learn how to add dynamic widget ready sidebar or widget ready areas to a WordPress theme.

Registering sidebar or widget ready areas in WordPress

First you have to register your sidebar or widget ready area for your theme. You can register multiple sidebar and widget ready areas. Copy and paste this code into your theme's functions.php file

function code_sidebar() {
register_sidebar( array(
        'name' => __( 'Custom Sidebar', 'wpb' ),
        'id' => 'sidebar-1',
        'description' => __( 'This is the custom sidebar', 'wpb' ),
        'before_widget' => '<aside id="sidebar_custom" class="_customsidebar">',
        'after_widget' => '</aside>',
        'before_title' => '<h4 class="widget-title">',
        'after_title' => '</h4>',
    ) );
}
add_action( 'widgets_init', 'code_sidebar' );

In this code, we have registered two sidebars. We have given them names and descriptions to identify them on the widget screen. The description parameter can be used to tell users where it appears in the sidebar theme. Wpb is the name of the topic we are working on, it is used to make these strings translatable. You should replace it with your theme name.

Adding Dynamic Widget Ready Sidebar to WordPress Theme Files

So far we have only registered dynamic sidebars. Users can drag and drop widgets from the Widgets »Widget screen into these sidebars. However, these sidebars will not appear on your site until they are called in the sidebar. Such as the sidebar. FPP or anywhere else you want to display them. To add these widget areas, edit the wordpress template file where you want to display them and paste this code:

 <?php dynamic_sidebar( 'sidebar-1' ); ?>

In this example code, we have used the sidebar ID to call the sidebar that we want to display here. Change the sidebar ID to display the second sidebar. For example, you can register three sidebars for the footer area and then call them one by one in the footer of your theme. Template template.

Widgets can be very powerful. You can add widgets to your posts and page content, colorize your text widgets, or increase the power of the default WordPress widget. A properly placed widget-ready sidebar allows users to add custom elements to their website using simple drag and drop interfaces.

We hope this article helped you learn how to add dynamic widget ready sidebar to WordPress. We would recommend that you study the code in a theme framework such as Genesis to find out how professionals are using them in their products. Please comment below for questions and feedback.

Comments