Twenty Ten Child Theme – Add Widget Areas

I’ve spent months trying to get an answer on how to add additional widget areas to a TwentyTen Child theme.   I’m not going to go into great detail on all the things I’ve tried and all the code I’ve used to attempt this.   Instead I’ll outline what this does and a full funtions.php file as an example rather than a code snippet that you are left to try and figure out how to make it work, or where exactly to put it.

Adding Additional Widget Areas

Widget areas are setup first in the themes functions.php file.   The quick way to add a widget area is to open the functions.php file, find where the other widget areas are added and copy and past code to add your new ones.   The problem with this solution, TwentyTen is the default theme for WP and every time there is an upgrade to the theme (during a regular WP update) your changes are wiped out.

This is why we put the customized files in the child theme directory in the first place rather than customizing TwentyTen itself.

The one file in this process that isn’t straight forward (and has a lot of mis-information associated with it) is the functions.php

The Functions.php file

This code does one thing.   It adds widget areas to a TwentyTen child theme that won’t be lost when the parent theme is updated.

This example is to add two header widget areas.   (You will still need to call these sidebars in your templates, and style them in your styles.css)

Since we are only adding additional widget areas and not making changes to the ones that are in the parent functions.php we don’t have a lot of fancy hooking and unhooking to do.   It is this simple:

<?php
// Area 7, located in the header. Empty by default.
register_sidebar( array(
‘name’ => __( ‘Header Widget Area’, ‘twentyten’ ),
‘id’ => ‘first-header-widget-area’,
‘description’ => __( ‘The first header widget area’, ‘twentyten’ ),
‘before_widget’ => ‘<li id=”%1$s”>’,
‘after_widget’ => ‘</li>’,
‘before_title’ => ‘<h3>’,
‘after_title’ => ‘</h3>’,
) );

// Area 8, located in the header. Empty by default.
register_sidebar( array(
‘name’ => __( ‘Second Header Widget Area’, ‘twentyten’ ),
‘id’ => ‘second-header-widget-area’,
‘description’ => __( ‘The second header widget area’, ‘twentyten’ ),
‘before_widget’ => ‘<li id=”%1$s”>’,
‘after_widget’ => ‘</li>’,
‘before_title’ => ‘<h3>’,
‘after_title’ => ‘</h3>’,
) );
?>

I’m writing this today before I forget what I did.   I’ve asked how to do this at conferences and WordCamp PHX this past weekend.   The reply usually goes “It’s in the codex”   translated “I don’t know how to do that”.

This straightforward example and answer is not in the codex.   Reading the codex will for the most part confuse and discourage.   I know, I’ve been trying to figure this out for months as I said earlier.

TwentyTen Child Themeing

Creating a child theme based on TwentyTen is pretty straightforward.   I found what I needed in the codex and was able to start making my own child themes in about 20 minutes.   Once you make one, it is easy to template those files and make more.

But the functions.php file is a different animal.   It is the one file that simply adding it to the theme with an extra line break in the wrong place can render your entire site into a single line of error code.   AND YOU MIGHT NOT BE ABLE TO LOG IN WHEN THAT HAPPENS.

Functions.php Precautions

  1. create your file in Notepad (plain text editor)
  2. FTP your functions.php file into the TwentyTen-Child theme directory
  3. refresh your site in the browser to make sure it still functions
  4. navigate to at least one other page to test
  5. go to the Admin Appearances/Widgets to see if your new widget areas are there
  6. IF IT GOES BOOM
  7. Delete the functions.php file from the child theme directory
  8. refresh your browser.
  9. Check your code.   Be sure there is   no line after the closing ?>

I hope this post saves some people a lot of time trying to find a way to do this.

Comments

  1. Dave, I am SO glad to find that I’m not the only one who’s been searching all over the web for info on how to create new widget areas in TwentyTen. Amazing that even at events like WordCamp they can’t tell you how to do it.

    On a TwentyTen-based site I’m developing, I managed to move my search widget from the sidebar to the top of the header by following these instructions:
    http://www.fuzzymargins.com/2010/10/move-the-search-box-to-the-header-wordpress-3-revision/

    I also want to put another one of my widgets, called Login With Ajax, into the header, so it’s just below the search box. I tried installing the code from your tutorial into my child theme’s functions.php, but got an error message instead of my site pages, probably because I hadn’t added a call to the new sidebars (# 7 and 8) in my header.php template.

    And I hadn’t added that call because I don’t know how to. Can you tell me how, and I am correct in assuming that call needs to be in my header.php file?

  2. Thanks for this post, very useful! I use a slimmed-down version of twenty ten as my parent theme for all sites I develop, and it’s great to have this code. I will bookmark this so I don’t forget next time I have to do it!

    It worked great on my site, but the only problem I have is that on the widgets admin page, the new footer areas which I’ve created show up first. I assume this is because WordPress is reading my child theme’s functions.php first. Is there any way to override this?

    Thanks again.

    Rachel.