Genesis Framework – Adding a new Widgetised Area

The following is a short tutorial on adding a widgetised area to a Genesis Child Theme’s homepage  using the Genesis Framework from Studiopress. The tutorial will demonstrate how I’ve added images to the top of my homepage, below the Dynamic Content Gallery, as seen in the image below. Of course, the technique can be used across any other Genesis Child theme.

Genesis Framework Tutorial Widgeted Area

I’m using the Platinum theme as my base for this, so all explanations and demonstrations will revolve around that, though the technique can be used to add a widgetised area to any Genesis powered child theme that has a home.php file.

Registering the Widgetised Area

To start with, you’ll want to add a new widgetised area to your theme’s custom.php file. To do this, add the following text anywhere after the “require_once(TEMPLATEPATH.’/lib/init.php’);” line.

genesis_register_sidebar(array( 'name'=>'Homepage Top', 'description' => 'This is below the featured column of the homepage', 'before_title'=>'
' ));

I’ve called my widget “Homepage Top”, you can call yours whatever you like. Basically, what this does is tell WordPress that there’s a new widgetised area, which will show up when you go to your widget page in the admin area of your site.
Genesis framework widget area

The next step is to add the widgetised area to your home.php file, so that things will actually show up.

Again, taking an example from my use of the platinum theme, copy the following into your home.php file.

<div id="featured-top">
			<?php if (!dynamic_sidebar('Homepage Top')) : ?>
				<div class="widget">
					<div class="wrap">
						<p><?php _e("This is a widgeted area which is called Homepage.", 'genesis'); ?></p>
					</div><!-- end .wrap -->
				</div><!-- end .widget -->
			<?php endif; ?>
		</div><!-- end #featured-top -->

It’s worth repeating that the above code assumes you’re calling your widgetised area “Homepage Top” If you’ve called it anything else it won’t work, so make sure you edit the code accordingly for your own website.

With that done, you’ll now be able to add widgets to the newly created widgetised area. Unfortunately, as there’s no styling as of yet, it’s likely to look like a mess.

Adding Some Widgets

I’ve added a Genesis Featured Posts widget to my homepage, and selected it to display post images only. To do this properly though, I need to register a new image size so that appropriate thumbnails are generated when the image is uploaded to the site. Add the following code to your theme’s functions.php file.

add_image_size('Homepage Top', 215, 117, TRUE);

What this line is doing is adding a new image size called “Homepage Top”, which is 215 pixels wide and 117 pixels high, the final “TRUE” is added so that images are cropped to the appropriate dimensions, rather than resized to the nearest fit.

The widget settings should now look something like this.

Configuring Genesis Featured Posts Widget

You should now have something on your homepage that looks a little like this:

Genesis Framework Unstyled Widget

Styling the Output

Finally, you’ll want to add some CSS styling to style the output of the widget.

#featured-top {
	width: 918px;
	float: left;
	background: #EEEEEE;
	margin: 0 0 15px 0;
	padding: 0;
	border: 1px solid #DDDDDD;

#featured-top  img{
	background: white;
	border: 1px solid rgb(230, 230, 230);

This code makes the images align horizontally, creates some free space around the images and puts them inside a styled box.