You have already seen widgets in various WordPress themes at various places like right or left of the post, on the top of the page or in the bottom. Usually you get many widget areas by default, but what will happen if you need extra widget area for your theme. It is not difficult; you can easily add any number of widget areas to your WordPress theme.
Here you will learn to create extra widget area and you can do it from theme editor of admin.
First we take an example of WordPress default theme Twenty Twelve to make it easy to understand.
Login into the admin and see the widgets page. It has 3 widgets area to display.
1) Main sidebar
2) First frontpage widget area
3) Second frontpage widget area
So widget area for footer is not available. Let’s assume that you want to add calendar in the footer. To make this possible you need to add extra widget area for footer.
Now open theme’s file editor. Scroll down a bit and click on Theme functions (functions.php) file.
Search for function twentytwelve_widgets_init() inside functions file.
You will see the following code. Copy it.
register_sidebar( array(
'name' => __( 'Main Sidebar', 'twentytwelve' ),
'id' => 'sidebar-1',
'description' => __( 'Appears on posts and pages except the optional Front Page template, which has its own widgets', 'twentytwelve' ),
'before_widget' => '<aside id="%1$s" class="widget %2$s">',
'after_widget' => '</aside>',
'before_title' => '<h3 class="widget-title">',
'after_title' => '</h3>',
) );
And paste it at the end of the function before this } and change the name and id with the new. See the below code.
register_sidebar( array(
'name' => __( 'Footer Sidebar', 'twentytwelve' ),
'id' => 'footer-sidebar',
'description' => __( 'Appears on footer’, 'twentytwelve' ),
'before_widget' => '<aside id="%1$s" class="widget %2$s">',
'after_widget' => '</aside>',
'before_title' => '<h3 class="widget-title">',
'after_title' => '</h3>',
) );
Now twentytwelve_widgets_init() function will look like this.
function twentytwelve_widgets_init() {
register_sidebar( array(
'name' => __( 'Main Sidebar', 'twentytwelve' ),
'id' => 'sidebar-1',
'description' => __( 'Appears on posts and pages except the optional Front Page template, which has its own widgets', 'twentytwelve' ),
'before_widget' => '<aside id="%1$s" class="widget %2$s">',
'after_widget' => '</aside>',
'before_title' => '<h3 class="widget-title">',
'after_title' => '</h3>',
) );
register_sidebar( array(
'name' => __( 'First Front Page Widget Area', 'twentytwelve' ),
'id' => 'sidebar-2',
'description' => __( 'Appears when using the optional Front Page template with a page set as Static Front Page', 'twentytwelve' ),
'before_widget' => '<aside id="%1$s" class="widget %2$s">',
'after_widget' => '</aside>',
'before_title' => '<h3 class="widget-title">',
'after_title' => '</h3>',
) );
register_sidebar( array(
'name' => __( 'Second Front Page Widget Area', 'twentytwelve' ),
'id' => 'sidebar-3',
'description' => __( 'Appears when using the optional Front Page template with a page set as Static Front Page', 'twentytwelve' ),
'before_widget' => '<aside id="%1$s" class="widget %2$s">',
'after_widget' => '</aside>',
'before_title' => '<h3 class="widget-title">',
'after_title' => '</h3>',
) );
//This is new widget for footer.
register_sidebar( array(
'name' => __( 'Footer Sidebar', 'twentytwelve' ),
'id' => 'footer-sidebar',
'description' => __( 'Appears on footer’, 'twentytwelve' ),
'before_widget' => '<aside id="%1$s" class="widget %2$s">',
'after_widget' => '</aside>',
'before_title' => '<h3 class="widget-title">',
'after_title' => '</h3>',
) );
}
Now you can see a footer widget area in widgets page of admin.
But you need to display widget in the footer area, to do this open sidebar.php.
Copy complete code from <?php if ( is_active_sidebar( to endif; ?>
Paste this code in the footer file below the <footer id="colophon" role="contentinfo">.
<?php if ( is_active_sidebar( 'footer-sidebar' ) ) : ?>
<div id="secondary" role="complementary">
<?php dynamic_sidebar( 'footer-sidebar' ); ?>
</div><!-- #secondary -->
<?php endif; ?>
Now you can add the calendar in footer widget area.
It will look like this:
Now let’s take one more example of genesis theme and check its existing widget areas.
It has also 3 widget areas:
1) Header right: It shows above the navigation near site title.
2) Primary sidebar: It shows near the post generally at right side.
3) Secondary sidebar: It is optional for this theme.
Now what about footer widget areas, it is missing in this theme too. So you need to follow the same process here to create it. Let’s see how?
Again in the editor section look for functions.php file and open it in theme editor. You will not get any function in this file.
So here you need to register a new sidebar. To do this add genesis_register_sidebar() function inside functions.php file. This function needs at least one argument inside function, so you can add it like this:
genesis_register_sidebar( array() );
After adding this you can see one extra widget area with heading sidebar 4 in widgets page of admin.
But it will not display on the frontend. To make it display you need to declare this sidebar on that place where you need it. For this you have to call dynamic_sidebar() function. In current case i will declare it in the footer file.
Here one thing you need to understand that how dynamic_sidebar() recognize that which sidebar needs to display. For this you need to add one identity for the sidebar inside the function.
genesis_register_sidebar( array(id='footer') );
We have seen earlier that we don’t have footer widget area so here we are creating the area for it so the id=footer is appropriate. Now with the help of this identity we can call dynamic_sidebar() function to display it on the frontend’s footer. Add the following function inside the footer.php file below this line <!-- end #inner -->';
dynamic_sidebar('footer');
One more thing if you want to give a name and description to your footer widget area then you need to modify register_sidebar function like below:
genesis_register_sidebar( array(id=>'footer', name=>'Footer Widget', description=>'This will show in the bottom of the post and page') );
After adding more arguments in function, the name of sidebar will change to Footer widget and you can see a description below that name.
That’s all, don’t forget to click on update file button after changes.
Here you will learn to create extra widget area and you can do it from theme editor of admin.
First we take an example of WordPress default theme Twenty Twelve to make it easy to understand.
Login into the admin and see the widgets page. It has 3 widgets area to display.
1) Main sidebar
2) First frontpage widget area
3) Second frontpage widget area
So widget area for footer is not available. Let’s assume that you want to add calendar in the footer. To make this possible you need to add extra widget area for footer.
Now open theme’s file editor. Scroll down a bit and click on Theme functions (functions.php) file.
Search for function twentytwelve_widgets_init() inside functions file.
You will see the following code. Copy it.
register_sidebar( array(
'name' => __( 'Main Sidebar', 'twentytwelve' ),
'id' => 'sidebar-1',
'description' => __( 'Appears on posts and pages except the optional Front Page template, which has its own widgets', 'twentytwelve' ),
'before_widget' => '<aside id="%1$s" class="widget %2$s">',
'after_widget' => '</aside>',
'before_title' => '<h3 class="widget-title">',
'after_title' => '</h3>',
) );
And paste it at the end of the function before this } and change the name and id with the new. See the below code.
register_sidebar( array(
'name' => __( 'Footer Sidebar', 'twentytwelve' ),
'id' => 'footer-sidebar',
'description' => __( 'Appears on footer’, 'twentytwelve' ),
'before_widget' => '<aside id="%1$s" class="widget %2$s">',
'after_widget' => '</aside>',
'before_title' => '<h3 class="widget-title">',
'after_title' => '</h3>',
) );
Now twentytwelve_widgets_init() function will look like this.
function twentytwelve_widgets_init() {
register_sidebar( array(
'name' => __( 'Main Sidebar', 'twentytwelve' ),
'id' => 'sidebar-1',
'description' => __( 'Appears on posts and pages except the optional Front Page template, which has its own widgets', 'twentytwelve' ),
'before_widget' => '<aside id="%1$s" class="widget %2$s">',
'after_widget' => '</aside>',
'before_title' => '<h3 class="widget-title">',
'after_title' => '</h3>',
) );
register_sidebar( array(
'name' => __( 'First Front Page Widget Area', 'twentytwelve' ),
'id' => 'sidebar-2',
'description' => __( 'Appears when using the optional Front Page template with a page set as Static Front Page', 'twentytwelve' ),
'before_widget' => '<aside id="%1$s" class="widget %2$s">',
'after_widget' => '</aside>',
'before_title' => '<h3 class="widget-title">',
'after_title' => '</h3>',
) );
register_sidebar( array(
'name' => __( 'Second Front Page Widget Area', 'twentytwelve' ),
'id' => 'sidebar-3',
'description' => __( 'Appears when using the optional Front Page template with a page set as Static Front Page', 'twentytwelve' ),
'before_widget' => '<aside id="%1$s" class="widget %2$s">',
'after_widget' => '</aside>',
'before_title' => '<h3 class="widget-title">',
'after_title' => '</h3>',
) );
//This is new widget for footer.
register_sidebar( array(
'name' => __( 'Footer Sidebar', 'twentytwelve' ),
'id' => 'footer-sidebar',
'description' => __( 'Appears on footer’, 'twentytwelve' ),
'before_widget' => '<aside id="%1$s" class="widget %2$s">',
'after_widget' => '</aside>',
'before_title' => '<h3 class="widget-title">',
'after_title' => '</h3>',
) );
}
Now you can see a footer widget area in widgets page of admin.
But you need to display widget in the footer area, to do this open sidebar.php.
Copy complete code from <?php if ( is_active_sidebar( to endif; ?>
Paste this code in the footer file below the <footer id="colophon" role="contentinfo">.
<?php if ( is_active_sidebar( 'footer-sidebar' ) ) : ?>
<div id="secondary" role="complementary">
<?php dynamic_sidebar( 'footer-sidebar' ); ?>
</div><!-- #secondary -->
<?php endif; ?>
Now you can add the calendar in footer widget area.
It will look like this:
Now let’s take one more example of genesis theme and check its existing widget areas.
It has also 3 widget areas:
1) Header right: It shows above the navigation near site title.
2) Primary sidebar: It shows near the post generally at right side.
3) Secondary sidebar: It is optional for this theme.
Now what about footer widget areas, it is missing in this theme too. So you need to follow the same process here to create it. Let’s see how?
Again in the editor section look for functions.php file and open it in theme editor. You will not get any function in this file.
So here you need to register a new sidebar. To do this add genesis_register_sidebar() function inside functions.php file. This function needs at least one argument inside function, so you can add it like this:
genesis_register_sidebar( array() );
After adding this you can see one extra widget area with heading sidebar 4 in widgets page of admin.
But it will not display on the frontend. To make it display you need to declare this sidebar on that place where you need it. For this you have to call dynamic_sidebar() function. In current case i will declare it in the footer file.
Here one thing you need to understand that how dynamic_sidebar() recognize that which sidebar needs to display. For this you need to add one identity for the sidebar inside the function.
genesis_register_sidebar( array(id='footer') );
We have seen earlier that we don’t have footer widget area so here we are creating the area for it so the id=footer is appropriate. Now with the help of this identity we can call dynamic_sidebar() function to display it on the frontend’s footer. Add the following function inside the footer.php file below this line <!-- end #inner -->';
dynamic_sidebar('footer');
One more thing if you want to give a name and description to your footer widget area then you need to modify register_sidebar function like below:
genesis_register_sidebar( array(id=>'footer', name=>'Footer Widget', description=>'This will show in the bottom of the post and page') );
After adding more arguments in function, the name of sidebar will change to Footer widget and you can see a description below that name.
That’s all, don’t forget to click on update file button after changes.
0 Comment