Add another widget area to Twenty Twelve front page template in a child theme

I’m having a lot of fun making child themes with Twenty Twelve now that I’ve gotten used it, however, there are some small changes I’ve made to multiple child themes now, and one of those is adding a third widget area to the Twenty Twelve front page (home page) template.

It’s incredibly simple to do and I’ve found for most of my recent projects it’s been much more helpful to have 3 columns of information on the home page instead of just the 2.

So without further ado, here’s…

How to add another widget area to the Twenty Twelve front page template in a child theme

You only need to add (or edit) 3 files to make this change, and they are:

functions.php
sidebar-front.php
style.css

First, we’ll add the following code to functions.php to register our new widget area (also known as a sidebar).

If you already have a functions.php file in your child theme you want to add this code anywhere between the opening <?php and closing ?>. If you don’t already have an functions.php file in your child theme, create a new file and put the code below between an opening <?php and closing ?> and upload it to your child theme directory.

*Change ‘my-child-theme’ to your child theme directory name

1
2
3
4
5
6
7
8
9
	register_sidebar( array(
		'name' => __( 'Third Front Page Widget Area', 'my-child-theme' ),
		'id' => 'sidebar-front-third',
		'description' => __( 'Appears when using the optional Front Page template with a page set as Static Front Page', 'my-child-theme' ),
		'before_widget' => '<aside id="%1$s" class="widget %2$s">',
		'after_widget' => '</aside>',
		'before_title' => '<h3 class="widget-title">',
		'after_title' => '</h3>',
	) );

Next, we’ll add the code that displays your widget area on the front end of your site. Copy sidebar-front.php from the Twenty Twelve theme and add it to your child theme, then above this line:

1
</div><!-- #secondary -->

add this code:

1
2
3
4
5
	<?php if ( is_active_sidebar( 'sidebar-front-third' ) ) : ?>
	<div class="third front-widgets">
		<?php dynamic_sidebar( 'sidebar-front-third' ); ?>
	</div><!-- .third -->
	<?php endif; ?>

Then upload your new sidebar-front.php to your child theme directory.

Now, we’ll add some code to the stylesheet to tell the theme how the widget area should look. In the default Twenty Twelve stylesheet we have one widget area to the left and one to the right, instead we want three in a row.

This code is added in the media-queries section so that it displays the three areas in a row on wide browsers but remains a single column when viewed on mobiles and other small devices (with this new third column being displayed underneath the original 2).

*Note about Internet Explorer and CSS media queries:
All versions of Internet Explorer prior to version 9 DO NOT support media queries. To get around that you can use twenty twelve’s handy IE stylesheet, stored in css/ie.css – copy that folder and file to your child theme then add the CSS code below to that file, but without the first 2 lines and without the closing ‘}’

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
/* Minimum width of 600 pixels. */
@media screen and (min-width: 600px) {	
	.template-front-page.two-sidebars .widget-area .front-widgets, 
	.template-front-page .widget-area .widget:nth-child(even),
	.template-front-page.two-sidebars .widget-area .front-widgets + .front-widgets {
		float: left !important;
		width: 30.3% !important;
		margin-left: 1.5% !important;
		margin-right: 1.5% !important;
    }
	.template-front-page .widget-area .widget:nth-child(odd) {
		clear: none !important;
	}
	.template-front-page .widget-area .widget:nth-child(3n+3) {
		clear: right;  
	}	
}

Now go to your widgets page in your admin panel and add some widgets to see how it looks. Have fun!

If you find any issues with the code or need any help do feel free to leave a comment below.