Getting Started with the Genesis Framework Part 2 – Creating a custom homepage template

07 February 2011 comment icon13 | Categories: featured, tutorials

 

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!

13 Responses to “Getting Started with the Genesis Framework Part 2 – Creating a custom homepage template”

  1. themesforge on 7 February 2011 at 8:40 pm said: Permalink

    [New Post] Getting Started with the Genesis Framework Part 2 – Creating a custom homepage template – http://themesforge.com/tutorials/genesis

  2. Tim on 26 April 2011 at 1:36 pm said: Permalink

    Hi, I was wondering where I need to put the home.php file when I have created it. I tried it in both my child theme folder and my parent theme folder without success. This tutorial sounds great but I’m stuck on the first task. Thanks for your help.

  3. Tim on 26 April 2011 at 10:36 pm said: Permalink

    Forget my recent question – I managed to get it to work, and it’s fantastic. Only one problem – my widget areas appear as going down the page, like blog posts, and do not float in the correct areas, ie: top left and top right appear stacked on top of each other. Any advice on how to address this problem? Many thanks for great content.

    • Ed on 29 April 2011 at 8:00 pm said: Permalink

      Hi Tim,

      Thanks for the kind comments – only seeing your comments now – glad you got it working. You’ll need to use css to float the widgets across the page using the css float property. Heres a quick (untested) example:

      .home-middle-1, .home-middle-2 {
      float:left;
      width:310px;
      }

      .home-middle-3 {
      float:right;
      width:310px;
      }

      Ensure your containing element is also floated left.

      This will float the first 2 widgets to the left next to each other and the third widget to the right of them.

      Hope this helps,

      Ed

  4. Jonathan on 29 July 2011 at 3:37 pm said: Permalink

    Hey Thanks for this great tut but i have a question ? 1stly im trying to get the Genesis_Slider on a separate page and not the home page… whats the best possible way as i have tried a few things and its just come to this point of asking for help thank you inadvance for the help

    Kindest Regards
    Jonathan

  5. Carl on 8 February 2012 at 9:55 am said: Permalink

    Sweet tut! Wheres PART3??….i need more!

  6. sean on 8 February 2012 at 6:32 pm said: Permalink

    Hi,

    Thanks for the great tutorial,

    I have followed all your above lines and setup home.php and tried uploaded to both genesis and child theme (magazine) but with no success.

    please help me here.

    PS: i am not able to see the home page top, left , middle widget i have added thru your above instruction

    help needed urgent

  7. Ophelia on 12 February 2012 at 5:57 pm said: Permalink

    Hi, thanks for this and the previous tutorial. I agree that Genesis gives you a lot of flexibility, but at the first glance it looks a bit restricting. That’s why I love articles like yours 🙂

  8. Stormy on 20 March 2012 at 4:43 pm said: Permalink

    HI There, thank you for the tutorial. I just have a quick question – similar to the first one above. I’ve uploaded the home.php file with the code, as well as registered the widgets (they show up in my dashboard as expected.

    But, noting is different on my home page. I’ve tried uploading the home.php file to both the child theme and the genesis theme – but neither seems to be working. Any suggestions?
    Thank you!

  9. Stormy on 20 March 2012 at 5:05 pm said: Permalink

    In follow up to my previous question – it appears that the changes are appearing on my “blog” page, not home. Hmmm.

  10. Lorin on 25 August 2012 at 5:25 pm said: Permalink

    Hi. Don’t know if you’re still checking comments here, but could you tell me what is the function wp_cycle? It just seems to be randomly tossed into your code, within the vicinity of the home top right widget. I’m trying to do a variation on your code, and I’m not sure how to handle the wp_cycle part.
    I want to add yet another two sections of dynamic widgets below what you have.

    Thanks,
    Lorin

  11. Lorin on 25 August 2012 at 5:26 pm said: Permalink

    Hi. Don’t know if you’re still checking comments here, but could you tell me what is the function wp_cycle? It just seems to be randomly tossed into your code (for the home.php), within the vicinity of the home top right widget. I’m trying to do a variation on your code, and I’m not sure how to handle the wp_cycle part.
    I want to add yet another two sections of dynamic widgets below what you have.
    I’ve seen this on other code intended for adding widgets, but– same thing– I can’t detect a pattern in its usage!

    Thanks,
    Lorin

    • Ed on 4 September 2012 at 11:18 pm said: Permalink

      Hey Lorin,

      Gosh it’s so long since I wrote this tutorial I’m struggling to recall what wp_cycle was/is. I’m pretty sure it’s a call used by this plugin:

      http://wordpress.org/extend/plugins/wp-cycle/

      To be honest for sliders I now pretty much use either Nivoslider (nivo.dev7studios.com/) or Flexslider (http://www.woothemes.com/flexslider/).

      So in summary the wp-cycle code should be removed unless you wish to use that plugin.

      Ed

Leave a Reply