December 22, 2014

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
Corporate - Genesis WordPress Theme Framework by StudioPress

Corporate Theme Content Areas

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 to add a new widgetized area to a Genesis child theme

New "Featured Top" Widgetized Area Requested

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

featured-top-addition

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

Want to learn WordPress on the go?

The WP Modder App provides you with WordPress plugin and WordPress theme reviews to help you make informed decisions when building your WordPress websites, either for yourself or your clients.Download the WP Modder App now!

Learn more about WordPress anywhere with the WP Modder App for iPhone, iPod Touch, and iPad. You'll have access to all of my past and future written and video tutorials as well as reviews of the latest plugins and themes, all from the comfort of your mobile device!

How many times have you have you wished you could run through a WordPress tutorial while in the bathroom? C'mon, you know you Facebook in there anyway. Why not learn something while you're at it? It's the ultimate in time management. But seriously...

You'll also gain the ability to gain access to free image and link promotion back to your own WordPress powered site! See more details and get the WP Modder App now.

WP Modder runs on the Genesis Framework

Genesis Framework

Genesis empowers you to quickly and easily build incredible websites with WordPress. Whether you're a novice or advanced developer, Genesis provides the secure and search-engine-optimized foundation that takes WordPress to places you never thought it could go. It's that simple - start using Genesis now!

Take advantage of the 6 default layout options, comprehensive SEO settings, rock-solid security, flexible theme options, cool custom widgets, custom design hooks, and a huge selection of child themes ("skins") that make your site look the way you want it to. With automatic theme updates and world-class support included, Genesis is the smart choice for your WordPress website or blog.

It's so damn good, I've redesigned all of my sites using Genesis and can confidently recommended it to you here.

Want an Awesome Host? We Recommend HostGator

HostGator for WordPress

Since its establishment in 2002, HostGator has been a world-leading provider of web hosting service. Although their office is in Houston, Texas, they provide top-notch service to clients and developers from over 200 countries internationally with a staff of over 600 employees. They offer Shared, Reseller, VPS, and Dedicated server packages for both beginners and professionals alike.

Each of their shared Web Hosting plans includes 24/7/365 support, a 99.9% uptime guarantee, and a 45-day money-back guarantee. If you would like to learn more, please visit their company page.

I use HostGator for the majority of my own sites and I continually recommend them to my clients. Learn more about HostGator now!

Get our FREE WP Topics Newsletter

The WP Topics newsletter is delivered twice monthly and it's jam packed with information on our WordPress People interviews, WordPress tutorials, new and useful plugins, themes, marketing techniques, and more.

We Respect Your Privacy.

tutorials delivered by email
* indicates required

About Adam W. Warner

I’m a web development consultant and instructor specializing in the use of WordPress and WordPress Multisite.My development philosophy focuses on solutions, education, empowerment, and support for my clients. I will provide you the tools to achieve your project goals, and I will show you how to use those tools.

Comments

  1. How I added another widgetized area to #genesiswp child theme: http://tinyurl.com/2dtccof Please share if you find it informative and useful

    • Hi Adam, this was a really helpful post. Would you post the same instructions for Lifestyle child theme.
      Thanks

  2. RT @wpmodder: How I added another widgetized area to #genesiswp child theme: http://tinyurl.com/2dtccof Please share if you find it informative and useful

  3. RT @wpmodder How I added another widgetized area to #genesiswp child theme: http://tinyurl.com/2dtccof

  4. I’m a big fan of corporate child theme, and I thank you for this great tutorial. Can you please add this to the dev.studiopress.com, so other customer can benefit from this as well :).

    • Glad I could help blackpearl. I’ll contact the folks over there and see if they would like to add this. I did put a link back here in one of the member threads, but it would be nice to have it live there as well:)

  5. blackpearl says:

    Hi it’s me again,Happy New Year.

    I tried to follow your tutorial, First issue I encounter was you missed in home.php .

    Second problem is my home sidebar got relocated to the bottom of the page here is a sreenshot showing you what happen.
    http://img825.imageshack.us/img825/2893/screenavn.jpg
    I’m 100% positive is something had to do with the CSS file got messed up.

    • Happy New Year to you:)

      I’m not sure what you mean about home.php. Maybe you posted some code and it got stripped in the comment?

      It does look like a CSS issue, but it could also be that you missed a closing DIV in home.php. I can troubleshoot further, but not unless you can give me the url to where this theme is located. If it’s on a test site and you don’t want the public to see it, send me an email direct at info@wpmodder.com and I’ll take a look.

  6. blackpearl says:

    My bad you missed the closing in home.php, I will upload the test theme to my server and send you an email.

    Regards,

  7. Thanks so much for this I spent 2 days trying to figure out the widgets and didn’t realise it needed to be coded separately!! Great post! Mir

  8. That picture with “Want to Learn WordPress on the go?” reminds me of The Leader (only not green) or maybe Sinestro (only not pink/red).

Trackbacks

  1. [...] a custom template in Genesis Adding a Widgetized Area to Genesis Corporate theme Excellent Genesis Video Series from The WordPress Chick Create a Landing Page with Genesis Changing [...]

Speak Your Mind

*