Adding a Widgetized Area to Genesis Corporate Theme

I’m a huge fan of several WordPress theme framework providers like Genesis, Thematic, Hybrid, and others. Each framework builds in some very unique features that can be easily used to position content the way one would like, but often times I find myself needing to make a few tweaks to the child theme files or adding a few functions.

This tutorial will show you how I duplicated a widgetized area in the Genesis Corporate child theme created by StudioPress. You can probably apply this basic method to most if not all StudioPress child themes.

What My Client Wanted

As seen in the Corporate child theme below, there are a few content blocks inside the circled area.

They include:

• Dynamic Content Galllery (slideshow)
• Featured Top Left
• Featured Top Right
• Featured Bottom

The request I had was to remove the Dynamic Content Gallery slideshow and instead place static content in that area.

I Assumed Wrong

I’ve been using the Genesis framework for several sites lately but this was the first time I had used this particular child theme. My assumption was that the area that holds the Dynamic Content Gallery was a widgetized area where I could simply place a text widget containing my static content. Wrong.

The three other content areas are all widgetized, but this one only gets displayed if the Dynamic Content Gallery plugin is activated.

I needed to add another widgetized content area like in the quick mockup below.

How I Added Another Widgetized Area

Basically what I needed to do was to duplicate the Featured Bottom widgetized area and place it above the Featured Top Left and Featured Top Right content.

Duplicating this and adding a new one where I wanted involved editing three files within the Corporate Child Theme.

• functions.php
• home.php
• style.css

It’s a three step process:

1. Duplicate the Featured Bottom code – functions.php
2. Add the new widgetized area to the home page – home.php
3. Add the styling for this addition – style.css

functions.php

Toward the bottom of this file, you’ll see the code that registers (or creates) the widgetized areas. Look for code block that creates the Featured Bottom area we want to duplicate:

genesis_register_sidebar(array(
 'name'=>'Featured Bottom',
 'id' => 'featured-bottom',
 'description' => 'This is the featured bottom section of the homepage.',
 'before_title'=>'<h4>','after_title'=>'</h4>'
));

Copy this chunk of code and paste it at the bottom of your functions.php file. Now you’ll want to rename the ‘name’ and ‘id’ parameters to something unique like I’ve done below:

genesis_register_sidebar(array(
‘name’=>’Featured Top Addition’,
‘id’ => ‘featured-top-addition’,
‘description’ => ‘This is the featured top added by Adam section of the homepage.’,
‘before_title’=>'<h4>’,’after_title’=>'</h4>’
));[/php]

You’ve just created another widgetized area named “Featured Top Addition”. 🙂

home.php

Now we need to actually display the Featured Top Addition in the child theme. I want to put it above the Featured Top Left and Right areas, so I found the code for those in home.php and added code for my new widgetized area right above. Again, I copied the details of the Featured Bottom and changed parameters to match my new one.

I found this:

<div id="featured-bottom">
 <?php if (!dynamic_sidebar('Featured Bottom')) : ?>
 <div>
 <h4><?php _e("Featured Bottom", 'genesis'); ?></h4>
 <div>
 <p><?php _e("This is an example of a text widget that you can place to describe a particular product or service. Use it as a way to get your visitors interested, so they can click through and read more about it. This is an example of a text widget that you can place to describe a particular product or service. Use it as a way to get your visitors interested, so they can click through and read more about it. This is an example of a text widget that you can place to describe a particular product or service. ", 'genesis'); ?></p>
 </div><!-- end .wrap -->
 </div><!-- end .widget -->
 <?php endif; ?>
 </div><!-- end #featured-bottom -->

…and changed it to this to match the parameters I used in my functions.php file. At the same time within this code chunk I am defining the CSS div id I’ll be using to syle this with:

<div id="featured-top-addition">
 <?php if (!dynamic_sidebar('Featured Top Addition')) : ?>
 <div>
 <h4><?php _e("Featured Top Addition", 'genesis'); ?></h4>
 <div>
 <p><?php _e("This is an example of a text widget that you can place to describe a particular product or service. Use it as a way to get your visitors interested, so they can click through and read more about it. This is an example of a text widget that you can place to describe a particular product or service. Use it as a way to get your visitors interested, so they can click through and read more about it. This is an example of a text widget that you can place to describe a particular product or service. ", 'genesis'); ?></p>
 </div><!-- end .wrap -->
 </div><!-- end .widget -->

style.css

Again, we’ll copy the code, this time CSS, for the Featured Bottom and apply it to our new Featured Top Addition. Look for this, copy and paste it right below itself:

#featured-bottom {
 background: #F7F7F7;
 width: 610px;
 float: left;
 margin: 0;
 padding: 9px 9px 0 9px;
 border: 1px solid #E6E6E6;
 }

…and change the it to this:

#featured-top-addition {
 background: #F7F7F7;
 width: 610px;
 float: left;
 margin:0 0 10px 0;
 padding: 9px 9px 0 9px;
 border: 1px solid #E6E6E6;
 }

If you look close, you’ll see I had to make a couple slight margin changes to get it positioned correctly (thanks to the StudioPress forums).

The Result

I hope this helps those of you using the Genesis framework and it’s child themes. As always, please feel free to comment below.

[AppAd]