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