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.

16 thoughts on “Add another widget area to Twenty Twelve front page template in a child theme

  1. Ooh thanks for pointing that out, that must be a problem with the CSS. I will do some more testing and update here when I’ve fixed it.

  2. What coding is required on a page once widgets have been added to this third column? (And/or the 1st and 2nd ones?)

    I’m using a child theme of twentytwelve (only has footer.php, a page template, sidebar-front.php, functions.php and style.css – everything else is from the twentytwelve folder). I can’t seem to get these widget areas to appear on the pages using the custom page template.

    • Hi Elizabeth, sorry for my delay approving your comment. Have you manually assigned the custom page template to your page? http://codex.wordpress.org/Page_Templates

      And do you have your front page (home page) set to be a static page instead of your blog posts: http://codex.wordpress.org/Creating_a_Static_Front_Page

      Those are the 2 most obvious things I can think of that may have gone wrong but if both of those are set there may be an error somewhere else, so you may need to check through the code again or start from scratch.

      Hope that helps, let me know how you get on :)

      Jo

  3. Hi,
    I’ve successfully added 4 additional widgets to my page. Thank you for this tutorial! I’m sort of stuck now though, how would I go about being able to set my page up like:

    content
    3 widgets
    content
    3 widgets

    I know I have to add the content into the home page but how do I get it in between the sets of widgets?

    Thank you again for this tutorial

    • Hi Raven,

      Glad to hear this tutorial was helpful for you :) There are different ways you could approach laying out your content like:

      content
      3 columns of widgets
      content
      3 columns of widgets

      I think the easiest way would be to add the 2nd content area as a regular text widget in one of your existing columns of widgets, then play around with the CSS so that that specific widget has width: 100% and clear: both; and whatever else you might need to get it where you want it, so it’d be like:

      content – regular content from the page
      3 columns of widgets
      content – a text widget
      3 columns of widgets

      Another way would be to just add another 4 widget areas using the method in this tutorial, use one at 100% width for your content area, and the other 3 as columns below, using the same CSS as the original 3 widgets.

      Hope that makes sense. If I get some spare time I’ll have a go at preparing the code and add it here, but I’m not sure when that’ll be as I’m quite busy at the mo.

      Good luck! Let me know how you get on :)

  4. Thanks so much for this invaluble mini tutorial – just what i was after and worked great, once I’d read it a second time more carefully and noticed that it was the sidebar-front.php and NOT just the sidebar.php !
    Cheers.

  5. Hi Jo. I have two widgets in my footer, with Front Page Template selected, and they show up fine. However, I can’t get Comments to display when I’m using the Front Page Template. I know this is not on topic, but I can’t find anything on this on the web, so just wondered if you might have any ideas on what could be stopping Comments from displaying. They show up fine when I have the other templates selected. Any ideas?

    Cheers
    Ross

    • Hi Ross,

      I’m glad you’ve mentioned that as I hadn’t noticed before (I don’t usually have comments active on home pages) – the front-page.php template doesn’t include the code that displays comments, so to add that to front-page.php you want to put this code:

      (*But with the proper opening and closing PHP tags, I had to remove the arrows before and after the question marks so that the code would display properly here in this comment!)

      ? php comments_template( '', true ); ?

      Right before the end of the loop (or elsewhere depending on where you want your comments area to appear):

      ? php endwhile; // end of the loop. ?

      Hope that helps :)
      Jo

  6. Thanks for a great tutorial. I’ve successfully added the third column. But, I’m stuck at trying to change the widths. I’d like for the left column to be 22%, the content 50% and the right column to be 28%. Also, there is a lot of wasted space for margins. How can I reduce those margins?

    Thanks,
    George

  7. Hi, great tutorial.

    I have followed all steps and successfully added the 3rd widget area however it hasn’t placed it in a row. Instead its places the new widget area underneath the the second front page widget. i.e. there are still only 3 columns.

    I have copied the CSS above into the styles sheet so unsure why it won’t work. website: http://www.nowlaugh.com

    Thanks so such if you are able to help

    Rich

  8. Hi
    I have created a new sidebar area as per your tutorial and it shows up in the widgets panel. However, it does not show up on the front page. I have selected the front page template. And I have selected the page http://www.helpingpaws.co.uk as the home page.
    If I add anything to this new widget area it shows up on all the other pages that have a sidebar.
    Please can you help me?

  9. You have great job by customizing the twenty twelve child, I am new in WordPress, can i ask yo question.
    Ho do change the width of the Twenty twelve themes
    how do change the look of static homepage like a business website, which has a feature post with image in thumbnail and also small thumbnail with post for product post.
    Thanks
    Wayan

  10. Thanks, a lot for the tutorial, this is I looking for, with this widget will make the twenty twelve theme more like a real website instead of a blog.
    Do you have css to add 2 colom in the header, 1 for logo and another one for search function?