So when we left off with Part 1 of a Getting Started with the Genesis Theme Framework we had taken a look at some of the really basic building blocks of a Genesis child theme and had got you setup with a basic custom child theme. Now it’s time to take us a step forward. Let’s start with our website homepage. As you know most blogs follow a pretty standard layout format -usually a main content area and a single sidebar either to the left or the right of your main content (and most commonly to the right).
Well if you’re building a corporate website you will probably want to break out from that layout for the homepage and come up with something a bit more like a traditional corporate website homepage that has some of the same things that your typical blog layout will have (such as a common header, primary menu and footer) but you’ll probably also want things like a main featured content area and maybe a few more additional homepage featured content areas. What’s more you would probably like to hook these content areas back into WordPress so you can update the content for these directly in WordPress rather than through theme files right? Well the good news is that all that and more is possible with Genesis! What’s more is that it’s really easy to do. Let’s dive in.
The first thing you’ll need to do is create a template for your homepage. Go ahead and fire up your editor of choice and create a new blank file called home.php. Nothing too unusual there – we’ve not chosen the name home.php by accident. Those already familiar with WordPress theme development will already know that home.php is a reserved name as part of the WordPress Template hierarchy. WordPress already knows to look for a home.php file in your theme folder to see if you want to display a different template for your homepage. If it doesn’t find one it falls back to index.php – which you already have. So there’s no special magic Genesis fairy dust in action here – just good ‘ol WordPress fairy dust this time. But now we get to see Genesis in all it’s simplicity and might.
Go ahead and copy the following into home.php
[codesyntax lang=”php”]
<?php get_header(); ?> <?php genesis_home(); ?> <?php get_footer(); ?>
[/codesyntax]
Go ahead and refresh your homepage – see what you did right there? In just 3 lines of code you’ll called your websites header, container and footer!
Ok so right now this page is pretty much a pile of crap right? – there’s no content displaying yet. But let’s take a look at what is being displayed, line by line.
The call to get_header() is a standard WordPress action hook that simply calls your websites header. As you’re in a child theme right now, this is in effect the standard Genesis header markup – and there’s lots of nifty goodies in there which we won’t go into today but suffice to say that it’s all good stuff.
The genesis_home() call is a Genesis framework action hook defined in the Genesis parent theme which is an optional hook specifically defined for home.php. There’s nothing much going on here right now.
The get_footer() call is a standard WordPress action hook which calls – yes, you guessed right – your footer markup.
Now let’s go ahead and make things interesting. Just below the genesis_home() call, copy and paste in the following code to your home.php
[codesyntax lang=”php”]
<div id="home-top-bg">
<div id="home-top">
<div class="home-top-left">
<?php if (!dynamic_sidebar('Home Top Left')) : ?>
<div class="widget">
<h4><?php _e("Home Top Right", 'genesis'); ?></h4>
<p><?php _e("This is a widgeted area which is called Home Top Right. It is using the Genesis - Featured Page widget to display what you see in your child theme. To get started, log into your WordPress dashboard, and then go to the Appearance > Widgets screen. There you can drag the Genesis - Featured Page widget into the Home Top widget area on the right hand side.", 'genesis'); ?></p>
</div>
<?php endif; ?>
</div><!-- end .home-top-left -->
<div class="home-top-right">
<?php if (!dynamic_sidebar('Home Top Right')) : ?>
<div class="widget">
<?php if( function_exists('wp_cycle') ) : ?>
<?php wp_cycle(); ?>
<?php endif; ?>
</div>
<?php endif; ?>
</div><!-- end .home-top-right -->
</div><!-- end #home-top -->
</div><!-- end #home-top-bg -->
<div id="home-middle-bg">
<div id="home-middle">
<div class="home-middle-1">
<?php if (!dynamic_sidebar('Home Middle #1')) : ?>
<div class="widget">
<h4><?php _e("Home Middle #1 Widget", 'genesis'); ?></h4>
<p><?php _e("This is a widgeted area which is called Home Middle #1. It is using the Genesis - Featured Page widget to display what you see in your child theme. To get started, log into your WordPress dashboard, and then go to the Appearance > Widgets screen. There you can drag the Genesis - Featured Page widget into the Home Middle #1 widget area on the right hand side. To get the image to display, simply upload an image through the media uploader on the edit post screen and publish your page. The Featured Page widget will know to display the post image as long as you select that option in the widget interface.", 'genesis'); ?></p>
</div>
<?php endif; ?>
</div><!-- end .home-middle-1 -->
<div class="home-middle-2">
<?php if (!dynamic_sidebar('Home Middle #2')) : ?>
<div class="widget">
<h4><?php _e("Home Middle #2 Widget", 'genesis'); ?></h4>
<p><?php _e("This is a widgeted area which is called Home Middle #2. It is using the Genesis - Featured Page widget to display what you see in your child theme. To get started, log into your WordPress dashboard, and then go to the Appearance > Widgets screen. There you can drag the Genesis - Featured Page widget into the Home Middle #2 widget area on the right hand side. To get the image to display, simply upload an image through the media uploader on the edit post screen and publish your page. The Featured Page widget will know to display the post image as long as you select that option in the widget interface.", 'genesis'); ?></p>
</div>
<?php endif; ?>
</div><!-- end .home-middle-2 -->
<div class="home-middle-3">
<?php if (!dynamic_sidebar('Home Middle #3')) : ?>
<div class="widget">
<h4><?php _e("Home Middle #3 Widget", 'genesis'); ?></h4>
<p><?php _e("This is a widgeted area which is called Home Middle #3. It is using the Genesis - Featured Page widget to display what you see in your child theme. To get started, log into your WordPress dashboard, and then go to the Appearance > Widgets screen. There you can drag the Genesis - Featured Page widget into the Home Middle #3 widget area on the right hand side. To get the image to display, simply upload an image through the media uploader on the edit post screen and publish your page. The Featured Page widget will know to display the post image as long as you select that option in the widget interface.", 'genesis'); ?></p>
</div>
<?php endif; ?>
</div><!-- end .home-middle-3 -->
</div><!-- end #home-middle -->
<div id="home-midrow">
<div class="home-midrow1">
<?php if (!dynamic_sidebar('Home Middle #4')) : ?>
<div class="widget">
<h4><?php _e("Home Middle #4 Widget", 'genesis'); ?></h4>
<p><?php _e("This is a widgeted area which is called Home Middle #4. It is using the Genesis - Featured Page widget to display what you see in your child theme. To get started, log into your WordPress dashboard, and then go to the Appearance > Widgets screen. There you can drag the Genesis - Featured Page widget into the Home Middle #4 widget area on the right hand side. To get the image to display, simply upload an image through the media uploader on the edit post screen and publish your page. The Featured Page widget will know to display the post image as long as you select that option in the widget interface.", 'genesis'); ?></p>
</div>
<?php endif; ?>
</div><!-- end .home-middle-3 -->
</div>
</div><!-- end #home-middle-bg -->
[/codesyntax]
Ok that’s a lot of markup but it’s pretty simple and is based on one of the Genesis child themes called Metric. in a nutshell we are adding 2 new divs (home-top-bg and home-middle-bg) to your new homepage template which will house our new homepage specific content areas. Within the first div home-top-bg we then have 2 nested divs, home-top-left and home-top-right. Within home-middle-bg, we have a further series of nested divs which contain the widgets for our new content areas.
Before these widgets actually become active, we’ll need to register them. Go ahead and crack open your functions.php file and add the following to it:
[codesyntax lang=”php”]
// Register widget areas genesis_register_sidebar(array( 'name'=>'Home Top Left', 'description' => 'This is the top left section of the homepage.', 'before_widget' => '<div id="%1$s" class="widget %2$s">', 'after_widget' => '</div>', 'before_title'=>'<h4 class="widgettitle">','after_title'=>'</h4>' )); genesis_register_sidebar(array( 'name'=>'Home Top Right', 'description' => 'This is the top right section of the homepage.', 'before_widget' => '<div id="%1$s" class="widget %2$s">', 'after_widget' => '</div>', 'before_title'=>'<h4 class="widgettitle">','after_title'=>'</h4>' )); genesis_register_sidebar(array( 'name'=>'Home Middle #1', 'description' => 'This is the first column of the middle section of the homepage.', 'before_widget' => '<div id="%1$s" class="widget %2$s">', 'after_widget' => '</div>', 'before_title'=>'<h4 class="widgettitle">','after_title'=>'</h4>' )); genesis_register_sidebar(array( 'name'=>'Home Middle #2', 'description' => 'This is the second column of the middle section of the homepage.', 'before_widget' => '<div id="%1$s" class="widget %2$s">', 'after_widget' => '</div>', 'before_title'=>'<h4 class="widgettitle">','after_title'=>'</h4>' )); genesis_register_sidebar(array( 'name'=>'Home Middle #3', 'description' => 'This is the third column of the middle section of the homepage.', 'before_widget' => '<div id="%1$s" class="widget %2$s">', 'after_widget' => '</div>', 'before_title'=>'<h4 class="widgettitle">','after_title'=>'</h4>' )); genesis_register_sidebar(array( 'name'=>'Home Middle #4', 'description' => 'This is the fourth middle widget of the middle section of the homepage to display just under the other 3 widgets', 'before_widget' => '<div id="%1$s" class="widget %2$s">', 'after_widget' => '</div>', 'before_title'=>'<h4 class="widgettitle">','after_title'=>'</h4>' ));
[/codesyntax]
There’s nothing too unusual going on here. This is pretty much the standard way to register widgets in WordPress – with a small syntax difference; “genesis_register_sidebar” is used instead of just “register_sidebar”
If you refresh your widgets area in WordPress you should now see that you have 6 brand spanking new widget areas available. Given the scope of this tutorial is limited at the moment to the basics of how the Genesis framework works, we’ll leave it to your imagination to see how you style and use these wonderful new widget areas!
Wrapping up Part 2
Today has taken us beyond the basics of how to setup a Genesis child theme and now into creating custom page templates for your child theme. In many ways this process is very similar to normal WordPress theme development but it can trip people up a lot quite quickly so we felt it important to cover this off before delving further into the power of Genesis. It’s important to demonstrate that while you now have a whole array of really cool things you can do that are specific to Genesis, you can still use good ‘ol WordPress functions and standards where appropriate such as creating a custom homepage – don’t forget this!
Next time up we’ll start looking at creating using Genesis hooks to do more things to our new child theme like customising your theme footer and adding additional javascript calls to your theme header for things like Cufon.
Happy coding!
Leave a Reply