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="http://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

29 thoughts on “The WordPress Theme Sidebar and Footer Templates

  1. Pingback: The WordPress Theme Sidebar and Footer Templates

    • You can use this as a parent theme if you decide to do so. So when you’ll create a child theme for it you will be able to add child theme specific info without altering the parent theme. For example in the child theme functions.php file you add an action like:
      add_action (‘shape_credits’, ‘child_custom_function’);
      function child_custom_function() {
      // child theme credit stuff goes here
      }
      Same thing for the “before” or “before_sidebar” .

  2. Al says:

    same here, in sidebar.php, what does “do_action( ‘before_sidebar’ )”? so far, in looking at the _s theme, I have not figured that one out either?

    • Al says:

      if you do a search on before in functions.php or in the files in the inc folder, you will not find anything set up as an action for this, seems to be a dummy entry. I guess if I am mistaken, then I stand corrected,.

      Al

  3. Al says:

    is the code for the teriary sidebar correct? do you not need an if condition to display or not display the sidebar if it exists or not? as coded, it will always display, and I don’t think that is what is wanted.

    Al

  4. Al says:

    before this tutorial reached the part where it investigates using the various layouts, I have done some research and created my own conclusions on how it would be done, check out my web site at bitsplus.wordpress.com, I used a theme name of “ripsaw”

    Al

  5. The url to WordPress.org inside the site-info, why didn’t use esc_url? I read in the footer.php of twentyten, twentyeleven and twentytwelve they all use esc_url.
    And when I open the TAC plugin, there is a warning “2 static links found” for the _s theme.
    I’m sorry and thanks.

  6. I’m getting “Parse error: syntax error, unexpected ”name” (T_CONSTANT_ENCAPSED_STRING), expecting ‘)’ in [functions.php]”.
    Especifically in the “‘name’ => __( ‘Primary Widget Area’, ‘shape’ ),” line.
    Since I just copied the code from here I’m confused. What have I done wrong?

  7. Hello, I got this mistake after I went to check out my website after completing this articles lesson

    Parse error: syntax error, unexpected T_VARIABLE in /home/bioortod/public_html/blog/content/themes/temabio/functions.php on line 9

    • Try having a look at the final code in the finished theme’s functions file:

      http://themeshaper.files.wordpress.com/2013/10/shape.zip

      Also, be sure you’re using straight quotes in your code, and not curly quotes, which will cause errors.

      A good strategy is to test your theme very frequently as you build it, after adding each new piece of code. It makes errors easier to catch the more frequently you test the code as you develop.

      Good luck!

  8. Jo says:

    I’m having more or less the same problem. This is what I get:
    Parse error: syntax error, unexpected T_CONSTANT_ENCAPSED_STRING, expecting ‘)’ in C:\domains\jeau-and.com\wwwroot\wp-content\themes\Jeau&\functions.php on line 74

  9. Hello! just a silly question. If I don’t want sidebars to show up in my theme, so user can see only the post content and leave the comments and sidebars out of the scheme, is it as easy as just not coding them?

    • Hi Deogracias, you can certainly omit the sidebar includes in whichever theme files you like, so the sidebar doesn’t appear. For example, remove this line in index.php and page.php to remove the sidebar from all pages and posts generated by those two files:

      You can do a multi-file search to locate all files in the theme that have that line.

      After doing this, you’ll likely also need to adjust the CSS so the main column fills the entire width and there isn’t a gap where the sidebar was meant to go.

      Good luck!

  10. “Secondary Widget Area will appear only if it contains active widgets.”
    I added a background-color to ‘secondary’. When the post on the left side grows longer, this color doesn’t ‘follow’- it stopps. That doesn’t look nice, of course, and I am searching for a way to have a full coloured sidebar.
    Grateful for your help …

  11. I think there are little mistake on your tutorial. Under sub title “Registering Sidebar” there is a sentence: “Here, we’re wrapping each individual widget inside an article element.” I’m pretty sure the word “article” should be “aside”. Thanks, CMIIW.

Comments are closed.