Dog Rescue website – Poundhounds

screenie_med_poundhounds-1This website was created for a UK dog rescue who were in need of a brand new website where they could let people know about their organisation, advertise their dogs needing homes, post news and appeals and accept donations.

Dogs for adoption

Dogs for adoption

This site was created back in 2009 and was in my early stages of creating websites for other people, so whilst there are aspects of the site that now look a bit dated – the layout of the main text content and lack of varying font sizes and images to really make the pages engaging – I think the general colour scheme and layout looks quite nice so I thought it’d be better to include it here in my portfolio than to have it be forgotten.

Although I have fond memories of working on this design, the main issue that bugs me about it now is the logo being on the right hand side of the page. This is a web rule I would be extremely hesitant to bend nowadays!

The site was created using Quick.CMS software which allowed the animal rescue owner to easily update and manage all the content from the admin panel.

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.