Some friends have been asking me how I created and/or manage my homepage. As you can tell by the title of this this post, I use a custom widget area for my homepage. This allows me to update content quickly via the drag-and-drop admin interface.  It should be noted that I do use some widgets to display the latest posts from a certain category. You can hard code this functionality, but using a plugin allows you the opportunity to quickly alter settings in the admin UI.  I will go into more detail in the actual tutorial below.  Enjoy!

Creating a Custom Widget Area

function.php for TwentyEleven

skip to below if you are using a theme based off of the TwentyTen Theme

1. First open the function.php file of your current theme
2. Sidebars and widget area registration starts on line 365. Find this section of code.
   
3. Copy one declaration for a sidebar (this will save you some time.) This usually starts with,
   register_sidebar( array(
   See the image below as an example.
   
4. Paste this selection at the beginning of this section. This would be above the first, “register_sidebar( array(“
5. Change the line,
   'name' => __( 'Main Sidebar', 'twentyeleven' ),
   to
   'name' => __( 'Homepage Sidebar', 'twentyeleven' ),
6. Change the line,
   'id' => 'sidebar-1',
   to (this must be a unique ID/#)
   'id' => 'sidebar-0',
7. Save and upload this new function.php file
8. Homepage Sidebar should now show-up in the Widget tab under Appearance in the admin panel.

function.php for TwentyTen

skip to below if you are using a theme based off of the TwentyEleven Theme

1. First open the function.php file of your current theme
2. Sidebars and widget area registration starts on line 365. Find this section of code.
   
3. Copy one declaration for a sidebar (this will save you some time.) This usually starts with,
   register_sidebar( array(
4. Paste this selection at the beginning of this section. This would be above the first, “register_sidebar( array(“
5. Change the line,
   'name' => __( 'Primary Widget Area', 'twentyten' ),
   to
   'name' => __( 'Homepage Sidebar', 'twentyeleven' ),
6. Change the line,
   'id' => 'primary-widget-area',
   to (this must be made to a unique ID/#)
   'id' => 'homepage-widget-area',
7. Change the line,
   'description' => __( 'The primary widget area', 'twentyten' ),
   to
   'description' => __( 'The homepage widget area', 'twentyten' ),
8. Save and upload this new function.php file
9. Homepage Sidebar should now show-up in the Widget tab under Appearance in the admin panel.

Adding a New Widget Area into Theme Files

For TwentyEleven Based Themes

1. Drop this code in any theme file to add the new widget area,
   <? if ( is_home() ) : ?>
<div id="homepageWidget" role="complementary">
<?php if ( ! dynamic_sidebar( 'sidebar-0' ) ) : ?>
</div><!-- #homepageWidget -->
<?php endif ; ?>
<?php endif ; ?>

If you have changed the homepage to display a static page, try the conditional “is_front_page()” instead.

2. As you can probably already tell, this bit of code checks to see if the current page/post/location is the homepage. If this condition is true, then it will launch the homepage sidebar.
3. For TwentyEleven try adding this code to the index.php or content.php. In the index, start add before or after the loop. In content, try adding it to the beginning. If you have messed with your default homepage settings, you may need to use a file other than content.php.

For TwentyTen Based Themes

Adding a widget area usually depends on exactly where you would like it to display on the live site. This could mean bypassing the main loop for just the homepage. A good place to start in the TwentyTen theme is in the header.php or the single.php files. In the TwentyEleven Theme try the index.php file. The familiar loop.php from the TwentyTen theme no longer exists because the TwentyEleven Theme now displays a wide range of posts depending on their content and/or template. Therefore, if you are working with a TwentyEleven based theme, start with index.php

1. Drop this code in any theme file to add the new widget area,
   <? if ( is_home() ) : ?>
<div id="homepage-widget" role="complementary">
< ?php dynamic_sidebar( 'homepage-widget-area' ); ?>
</div><!-- #homepage-widget .widget-area -->
<?php endif ; ?>
2. As you can probably already tell, this bit of code checks to see if the current page/post/location is the homepage. If this condition is true, then it will launch the homepage sidebar.
3. For TwentyTen try adding this code to the header.php, single.php, or archive.php.

If you have changed the homepage to display a static page, try the conditional “is_front_page()” instead.

Remember, if your site’s homepage is a static page and not a stream of posts, this could effect the results. Again, try “is_front_page()” for best results.

At this point you should now have a drag-and-drop content area for any location on the site. This makes thing easy to update and allows you to quickly test new widgets. Don’t forget to style these! Good luck and post any questions in the comment section below.