Creating New Widget Areas

In WordPress, if you want to have widgets in new areas of your posts page, then you can register more sidebars and write code to position them in your page templates.

Here’s what you need to do:

1. Register a named sidebar
2. Create a template for the sidebar
3. Include the template in a page template where you want the sidebar to appear
4. Add CSS to your stylesheet to format the sidebar
5. Then, you can go to the Widgets page in the Dashboard and add widgets to the named sidebar.

A StackOverflow topic taught me how to do it: How to add sidebars in footer of the wordpress(version 3.0) theme?

Code examples

functions.php

My theme already had a function that registered two sidebars, so I added more calls to register_sidebar(). I created three widget areas, although I’m just showing the code for the first one here. If you were writing a new function, you would also have to call add_action() to invoke your function.

   register_sidebar ( array (
	'name' => 'Footer Widgets Left',
	'id' => 'sidebar-footer-1',
	'before_widget' => '<div id="%1$s" class="widget %2$s">',
	'after_widget' => '</div>',
	'before_title' => '<h1 class="widget-title">',
	'after_title' => '</h1>' 
   ) );

sidebar-footer.php

I created sidebar-footer.php and wrote the sidebar layout divs.

<div id="supplementary">
	<div id="footer-left" class="footer-sidebar  widget-area" role="complementary">
	  <?php dynamic_sidebar( 'sidebar-footer-1' );  ?>
	</div><!-- #footer-sidebar -->
</div><!-- #supplementary -->

footer.php

I called the get_sidebar() template tag in the footer template. The argument “footer” means it looks for the template file named sidebar-footer. You can choose where in footer.php to insert the sidebar. I put it before the copyright notice and credits.

<?php get_sidebar('footer'); ?>

style.css

A little bit of styling finished the job.

/* FOOTER WIDGET AREA */
#supplementary {
	max-width: 900px;
	margin: 0 auto;
	font-size: .9em;
}
.footer-sidebar {
	float: left;
	width: 33%;  /* planning on 3 widget areas side-by-side on wide screens */
	padding: 16px;
}
.footer-sidebar .widget {
	padding-bottom: 10px;
	border-bottom: 1px solid #CACF7A;
}
@media screen and (max-width:600px) {
	.footer-sidebar {
		width: 100%; /* make each sidebar full-width on small screens */
		padding: 0 16px;
	}
}