WordPress Child Theme – Custom Sidebar on Home Page

Overview: We want an extra-wide custom sidebar just for the Home page. We also want the custom sidebar to have its own Widgets. We’ll create a Home page template, register new Widgets and add some new CSS for styling.

Big thanks to DigitalRaindrops.net for their tutorials.

Section 1 of 4: Template for the Home page

• Copy the onecolumn-page.php file from your Twenty Ten theme to your Child Theme folder
• Rename the file to home.php
  • Rename: * Template Name: One column, no sidebar
  • To: * Template Name: Home
  • Rename: * A custom page template without sidebar
  • To: * A custom page template for the 2-column Home page
• Add: <?php get_template_part( ‘sidebar’, ‘home’ ); ?> right above <?php get_footer(); ?> (this is where the custom sidebar will display in the custom Home page template

Section 2 of 4: Custom sidebar for Home page: sidebar-home.php

• Copy the sidebar.php file from your Twenty Ten theme to your Child Theme folder
• Rename the file to: sidebar-home.php
• Line 11: Change <div id=”primary” role=”complementary”> to <div id=”primary-home” role=”complementary”>
• Line 20: Change if ( ! dynamic_sidebar( ‘primary-widget-area’ ) ) : ?> to if ( ! dynamic_sidebar( ‘primary-widget-area-home‘ ) ) : ?>
• Line 48: Change if ( is_active_sidebar( ‘secondary-widget-area’ ) ) : ?> to if ( is_active_sidebar( ‘secondary-widget-area-home‘ ) ) : ?>
• Line 50: Change <div id=”secondary” role=”complementary”> to <div id=”secondary-home” role=”complementary”>
• Line 52: Change <?php dynamic_sidebar( ‘secondary-widget-area’ ); ?> t <?php dynamic_sidebar( ‘secondary-widget-area-home‘ ); ?>

Section 3 of 4: Register Home page-only Widgets

• Copy Primary and Secondary sidebar Widgets code from your Twenty Ten functions.php file and add them to your Child theme functions.php file
• Lines 374-394: Copy the following lines of code from your Twenty Ten functions.php file and add them to your Child theme functions.php file:
  • // Area 1, located at the top of the sidebar. register_sidebar( array( ‘name’ => __( ‘Primary Widget Area’, ‘twentyten’ ), ‘id’ => ‘primary-widget-area’, ‘description’ => __( ‘The primary widget area’, ‘twentyten’ ), ‘before_widget’ => ‘<li id=”%1$s”>’, ‘after_widget’ => ‘</li>’, ‘before_title’ => ‘<h3>’, ‘after_title’ => ‘</h3>’, ) );
  • // Area 2, located below the Primary Widget Area in the sidebar. Empty by default. register_sidebar( array( ‘name’ => __( ‘Secondary Widget Area’, ‘twentyten’ ), ‘id’ => ‘secondary-widget-area’, ‘description’ => __( ‘The secondary widget area’, ‘twentyten’ ), ‘before_widget’ => ‘<li id=”%1$s”>’, ‘after_widget’ => ‘</li>’, ‘before_title’ => ‘<h3>’, ‘after_title’ => ‘</h3>’, ) );
• Then, change the above-copied code to the following (see the bolded text):
  • // Home sidebar #1, located at the top of the sidebar. register_sidebar( array( ‘name’ => __( ‘Home Primary Widget Area’, ‘twentyten’ ), ‘id’ => ‘primary-widget-area-home‘, ‘description’ => __( ‘The Home primary widget area’, ‘twentyten’ ), ‘before_widget’ => ‘<li id=”%1$s”>’, ‘after_widget’ => ‘</li>’, ‘before_title’ => ‘<h3>’, ‘after_title’ => ‘</h3>’, ) );
  • // Home sidebar #2, located below the Primary Widget Area in the sidebar. Empty by default. register_sidebar( array( ‘name’ => __( ‘Home Secondary Widget Area’, ‘twentyten’ ), ‘id’ => ‘secondary-widget-area-home‘, ‘description’ => __( ‘The Home page secondary widget area’, ‘twentyten’ ), ‘before_widget’ => ‘<li id=”%1$s”>’, ‘after_widget’ => ‘</li>’, ‘before_title’ => ‘<h3>’, ‘after_title’ => ‘</h3>’, ) );

Section 4 of 4: CSS styling for custom Home page layout