Genesis Framework — Adding a new Widgetised Area

The fol­low­ing is a short tuto­r­ial on adding a wid­getised area to a Gen­e­sis Child Theme’s home­page  using the Gen­e­sis Frame­work from Stu­dio­press. The tuto­r­ial will demon­strate how I’ve added images to the top of my home­page, below the Dynamic Con­tent Gallery, as seen in the image below. Of course, the tech­nique can be used across any other Gen­e­sis Child theme.

Genesis Framework Tutorial Widgeted Area

I’m using the Plat­inum theme as my base for this, so all expla­na­tions and demon­stra­tions will revolve around that, though the tech­nique can be used to add a wid­getised area to any Gen­e­sis pow­ered child theme that has a home.php file.

Reg­is­ter­ing the Wid­getised Area

To start with, you’ll want to add a new wid­getised area to your theme’s custom.php file. To do this, add the fol­low­ing text any­where 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'=>'
','after_title'=>'
' ));

I’ve called my wid­get “Home­page Top”, you can call yours what­ever you like. Basi­cally, what this does is tell Word­Press that there’s a new wid­getised area, which will show up when you go to your wid­get page in the admin area of your site.
Genesis framework widget area

The next step is to add the wid­getised area to your home.php file, so that things will actu­ally show up.

Again, tak­ing an exam­ple from my use of the plat­inum theme, copy the fol­low­ing 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 repeat­ing that the above code assumes you’re call­ing your wid­getised area “Home­page Top” If you’ve called it any­thing else it won’t work, so make sure you edit the code accord­ingly for your own website.

Your ads will be inserted here by

Easy AdSense.

Please go to the plu­gin admin page to
Paste your ad code OR
Sup­press this ad slot OR
Sup­press Place­ment Boxes.

With that done, you’ll now be able to add wid­gets to the newly cre­ated wid­getised area. Unfor­tu­nately, as there’s no styling as of yet, it’s likely to look like a mess.

Adding Some Widgets

I’ve added a Gen­e­sis Fea­tured Posts wid­get to my home­page, and selected it to dis­play post images only. To do this prop­erly though, I need to reg­is­ter a new image size so that appro­pri­ate thumb­nails are gen­er­ated when the image is uploaded to the site. Add the fol­low­ing 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 “Home­page Top”, which is 215 pix­els wide and 117 pix­els high, the final “TRUE” is added so that images are cropped to the appro­pri­ate dimen­sions, rather than resized to the near­est fit.

The wid­get set­tings should now look some­thing like this.

Configuring Genesis Featured Posts Widget

You should now have some­thing on your home­page that looks a lit­tle like this:

Genesis Framework Unstyled Widget

Styling the Output

Finally, you’ll want to add some CSS styling to style the out­put 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;
	float:left;
	margin:1px;
	padding:5px;
	border: 1px solid rgb(230, 230, 230);
	}

This code makes the images align hor­i­zon­tally, cre­ates some free space around the images and puts them inside a styled box, as seen on the home­page of this site.

If you feel I’ve not explained the process prop­erly, or want to add some­thing I’ve not already men­tioned, please free free to com­ment below.

Related posts:

Comments

  1. Marcel says

    Cool tuto­r­ial, but when I add the genesis_register_sidebar(.…) code to my functions.php, my site breaks and all I get is a white page..
    Can you help me?

  2. says

    Sure Mar­cel, what’s the par­tic­u­lar error you’re get­ting?
    Are you mak­ing this change to the stan­dard Gen­e­sis Child theme?

    The prob­lem you may have, assum­ing you’re using the default child theme is that the file ends with a clos­ing php tag, and if there’s any extra white space (spaces or new lines) after that, the site won’t work. If you are using the default child theme, get­ting rid of that clos­ing php tag should resolve the problem.

    Another prob­lem you could be hav­ing is where exactly you put the code inside your functions.php file. It has to be put after the “require_once…” line at the top of the file.

  3. Erick says

    Thanks, I’m using your codes for gen­er­at­ing a wid­get area which I use only some­times, and I don’t want a blank gap show­ing when the the wid­get is empty wasn’t there. I moved the con­di­tion “” to the begin­ning, but didn’t work. may you please help me?

    • Jacques Corby-Tuech says

      Hi Erick, just delete the text inside those “” tags and it should work just fine, don’t move where it is though.

  4. says

    Hi Jacques
    That’s a great tuto­r­ial.
    Found it via a link on the Stu­dio­press forum.

    Pre­sum­ably hav­ing cre­ated the wid­getised area you can put any sort of wid­gets you like in there… text wid­get for example.

  5. Kristin says

    Great, I think this is what I’m look­ing for. I want to cre­ate a sec­tion on the home­page that has con­tent blocks that show a snip­pet of the lat­est post from spe­cific cat­e­gories. At first I thought this was to be solved by cre­at­ing a cus­tom loop, but was told that I should try mak­ing a wid­getized home­page as in your tuto­r­ial. Is this cor­rect? I am also using Gen­e­sis Prose, and don’t see a home.php file. Thanks!

  6. says

    I’m hav­ing trou­ble get­ting the side­bars to show up in the wid­get area of the word­press appear­ance admin panel. Any­one else hav­ing this prob­lem? pos­si­ble solution?

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>