The WordPress Theme Sidebar and Footer Templates

We’re going to round off our theme template building with the sidebar and footer templates.

Registering Sidebars

Let’s start with sidebars. In WordPress, term “sidebar” refers to the part of a theme that contains widgets.

Our theme is going to have two widget areas. That way we can re-use this code for 2-column or 3-column themes (on a 2-column theme the sidebars are stacked, one on top of the other).

This is pretty straightforward. In our functions.php file we’re going to register our widget area. Basically, we’re telling WordPress: hey, create these two new areas for people to drag widgets to in Appearance → Widgets in the Dashboard.

Paste the following code in functions.php. You can paste it at the very end of the file if you like. I always like to paste it right after add_action( 'after_setup_theme', 'shape_setup' );, but it’s up to you.

/**
 * Register widgetized area and update sidebar with default widgets
 *
 * @since Shape 1.0
 */
function shape_widgets_init() {
	register_sidebar( array(
		'name' => __( 'Primary Widget Area', 'shape' ),
		'id' => 'sidebar-1',
		'before_widget' => '<aside id="%1$s" class="widget %2$s">',
		'after_widget' => '</aside>',
		'before_title' => '<h1 class="widget-title">',
		'after_title' => '</h1>',
	) );

	register_sidebar( array(
		'name' => __( 'Secondary Widget Area', 'shape' ),
		'id' => 'sidebar-2',
		'before_widget' => '<aside id="%1$s" class="widget %2$s">',
		'after_widget' => '</aside>',
		'before_title' => '<h1 class="widget-title">',
		'after_title' => '</h1>',
	) );
}
add_action( 'widgets_init', 'shape_widgets_init' );

Now we’ve got two widget areas: Primary Widget Area (‘sidebar-1’) and Secondary Widget Area (‘sidebar-2’). There’s no point naming them Primary Sidebar or Secondary Sidebar. In some layouts they might not even be sidebars—but they’ll always be widget areas. Pay attention to the ‘id’ values above (sidebar-1 and sidebar-2), because we’ll use them later on to call these widget areas into the sidebar template.

Aside from the ‘id’ values, the register_sidebar() function allows us to specify other information about the widget areas:

name => __( 'Secondary Widget Area', 'shape' )

This is the name that this particular widget area will have on the Widgets Administration page ( Appearance → Widgets).

'before_widget' => '<aside id="%1$s" class="widget %2$s">'

This is the opening HTML element that will contain the widget content. Here, we’re wrapping each individual widget inside an aside element. It’s important to leave the “%1$s” and “%2$s” placeholders in the ID and class attributes in place, respectively, because WordPress fills them in with unique IDs and widget-specific classes. This is helpful for styling individual widgets or types of widgets with CSS.

'after_widget' => '</aside>'

This closes the aside element that wraps each individual widget.

'before_title' => '<h1 class="widget-title">'

Here, we specify that each widget’s title should be wrapped in an h1 element with a class name of “widget-title”.

'after_title' => '</h1>'

Here, we close the h1 element after the widget title ends.

The WordPress Codex has more information on register_sidebar() if you’re interested.

Coding the Sidebar Template

Okay, WordPress knows our widget areas exist, and how they should be formatted. Now we just have to make them show up in our theme. That’s where the sidebar.php template comes in. Go ahead and open it now.

For “Primary Widget Area”, we’re going to hard-code some default widgets: the Search, Archives, and Meta Widgets. If the user has not dragged any widgets inside “Primary Widget Area” in their Dashboard, they’ll see these default widgets.

“Secondary Widget Area” will not contain any default widgets. In fact, Secondary Widget Area will appear only if it contains active widgets.

Let’s set up the sidebar template, and create the Primary Widget Area first. In sidebar.php, paste the following.

<?php
/**
* The Sidebar containing the main widget areas.
*
* @package Shape
* @since Shape 1.0
*/
?>
<div id="secondary" class="widget-area" role="complementary">
	<?php do_action( 'before_sidebar' ); ?>
	<?php if ( ! dynamic_sidebar( 'sidebar-1' ) ) : ?>

		<aside id="search" class="widget widget_search">
			<?php get_search_form(); ?>
		</aside>

		<aside id="archives" class="widget">
			<h1 class="widget-title"><?php _e( 'Archives', 'shape' ); ?></h1>
			<ul>
				<?php wp_get_archives( array( 'type' => 'monthly' ) ); ?>
			</ul>
		</aside>

		<aside id="meta" class="widget">
			<h1 class="widget-title"><?php _e( 'Meta', 'shape' ); ?></h1>
			<ul>
				<?php wp_register(); ?>
				<li><?php wp_loginout(); ?></li>
				<?php wp_meta(); ?>
			</ul>
		</aside>

	<?php endif; // end sidebar widget area ?>
</div><!-- #secondary .widget-area -->

Our Primary Widget Area is wrapped inside the #secondary div. In English, the code says, “If ‘sidebar-1’ (“Primary Widget Area”) does not contain active widgets, display these default widgets. Otherwise, display the active widgets that were added through Appearance → Widgets.

Now, let’s create the markup for the Secondary Widget Area. Paste the following code just after </div><!-- #secondary .widget-area --<

<?php if ( is_active_sidebar( 'sidebar-2' ) ) : ?>

     <div id="tertiary" class="widget-area" role="supplementary">
      <?php dynamic_sidebar( 'sidebar-2' ); ?>
     </div><!-- #tertiary .widget-area -->

<?php endif; ?>

Very simple. The entire sidebar area is wrapped in a conditional statement that displays the markup for this sidebar only if it contains widgets. If you go into the widget admin page and pull all those widgets out of “Secondary Widget Area”, the conditional statement guarding the markup will fail. Big time. And to our benefit. No widgets. No markup. Dead simple.

Just the way we like things around here.

The Footer Template

Finally, let’s build our footer template. It’s pretty simple. It will contain the following:

• Closing of the #main content div wrapping the entire site content
• A footer section that prints out the theme name and the “Powered by WordPress” line.
• The important wp_footer() hook, which many plugins utilize.
• Closing of our wrapper div, body, and html tags.

Here’s what it looks like (paste all of it in footer.php):

<?php
/**
* The template for displaying the footer.
*
* Contains the closing of the id=main div and all content after
*
* @package Shape
* @since Shape 1.0
*/
?>

</div><!-- #main .site-main -->

<footer id="colophon" class="site-footer" role="contentinfo">
	<div class="site-info">
		<?php do_action( 'shape_credits' ); ?>
		<a href="http://wordpress.org/" title="<?php esc_attr_e( 'A Semantic Personal Publishing Platform', 'shape' ); ?>" rel="generator"><?php printf( __( 'Proudly powered by %s', 'shape' ), 'WordPress' ); ?></a>
		<span class="sep"> | </span>
		<?php printf( __( 'Theme: %1$s by %2$s.', 'shape' ), 'Shape', '<a href="https://themeshaper.com/" rel="designer">ThemeShaper</a>' ); ?>
	</div><!-- .site-info -->
</footer><!-- #colophon .site-footer -->
</div><!-- #page .hfeed .site -->

<?php wp_footer(); ?>

</body>
</html>

Fill in the credit details accordingly.

And we’ve done it. With our templates built, stay tuned to learn how to color ’em up a bit.

How To Create a WordPress Theme

This post is part of the The ThemeShaper WordPress Theme Tutorial: 2nd Edition that will show you how to create a powerful WordPress Theme from scratch. Read it from the beginning and code yourself up something awesome.

1. WordPress Theme Tutorial Introduction
2. Developing Theme Sense
3. Theme Development Tools
4. Creating a Theme HTML Structure
5. Template and Directory Structure
6. Setting Up Your Theme Functions
7. Secure Your WordPress Theme
8. The Header Template
9. The Index Template
10. The Single Post, Post Attachment, & 404 Templates
11. The Comments Template
12. The Search Template & The Page Template
13. The Archive Template
14. The Sidebar Template & The Footer Template
15. Reset-Rebuild Theme CSS & Define Your Layouts
16. Custom Background & Custom Header
17. Distributing Your WordPress Theme