How to Add Additional Sections to the Homepage

[tutorials]

One of the most popular requests is how to create additional sections for the homepage. Currently the code that's built into the home.php file is tied to the Theme Options page, so the easiest way to customize this is by resorting back to the original way we had coded these types of sections.

Creating an additional block within .homepageleft (first section below the FCG) on the homepage

Step #1
Open up your home.php file, and copy this code:

<div class="hpfeatured">

            <h3><?php echo  cat_id_to_name(get_theme_mod('featured_top_left')); ?></h3>

                

                <?php $recent = new  WP_Query("cat=".get_theme_mod('featured_top_left')."&showposts=".get_theme_mod('featured_top_left_num'));  while($recent->have_posts()) : $recent->the_post();?>

                <?php if( get_post_meta($post->ID, "thumb", true)  ): ?>

                <a href="<?php the_permalink() ?>"  rel="bookmark"><img class="thumb" src="<?php  bloginfo('template_directory'); ?>/tools/timthumb.php?src=<?php  echo get_post_meta($post->ID, "thumb", $single = true);  ?>&amp;h=<?php echo  get_theme_mod('featured_top_left_thumb_height');  ?>&amp;w=<?php echo  get_theme_mod('featured_top_left_thumb_width'); ?>&amp;zc=1"  alt="<?php the_title(); ?>" /></a>    

                <?php else: ?>

                <?php endif; ?>                    

                

                <strong><a href="<?php the_permalink()  ?>" rel="bookmark"><?php the_title();  ?></a></strong>

                <?php the_content_limit(80, ""); ?>

                

                <hr/>

                

                <?php endwhile; ?>

                

                <?php if(get_theme_mod('featured_top_left')) : ?>

                <strong><a href="<?php echo  get_category_link(get_theme_mod('featured_top_left')); ?>"  rel="bookmark"><?php _e("Read more posts from ", 'studiopress');  echo get_cat_name(get_theme_mod('featured_top_left'));  ?></a></strong>

                <?php endif; ?>

                

            </div>

Step #2
Paste it just below where you found it - in other words, you'll have this code now twice in your home.php file, one on top of the other. In order to easily work with the code, take this code:

<?php $recent = new  WP_Query("cat=".get_theme_mod('featured_top_left')."&showposts=".get_theme_mod('featured_top_left_num'));  while($recent->have_posts()) :  $recent->the_post();?>

And replace it with this code:

<?php $recent = new WP_Query("cat=1&showposts=1");  while($recent->have_posts()) :  $recent->the_post();?>

What you have just done is replace what we built which tied into the theme options page to something easier to work with, and easier to replicate. Change the cat=1 to whatever category ID you want to display, and obviously change showposts=1 to however many posts that you want to display.

Step #3
You will also need to change the Headline code, so take this code:

<h3><?php echo  cat_id_to_name(get_theme_mod('featured_top_left'));  ?></h3>

And replace it with the headline of your choice, similar to this:

<h3>Featured Category</h3>

Step #4
Locate this code:

<strong><a href="<?php echo get_category_link(get_theme_mod('featured_top_left')); ?>" rel="bookmark"><?php _e("Read More Posts From This Category"); ?></a></strong>

And replace it with this code, adding the URL to the category's archive page and the title of the category:

<strong><a href="URL GOES HERE">More Posts From  CATEGORY NAME GOES HERE</a></strong>

Creating an additional block within .homepageright
This entails the same steps as outlined for .homepageleft except wherever .homepageleft uses featured_top_left .homepageright uses featured_top_right

Creating an additional block within .homepagebottom on the homepage

Step #1
Open up your home.php file, and copy this code:

<div class="hpbottom">

            <h3><?php echo  cat_id_to_name(get_theme_mod('featured_bottom')); ?></h3>

                

                <?php $recent = new  WP_Query("cat=".get_theme_mod('featured_bottom')."&showposts=".get_theme_mod('featured_bottom_num'));  while($recent->have_posts()) : $recent->the_post();?>

                <?php if( get_post_meta($post->ID, "thumb", true)  ): ?>

                <a href="<?php the_permalink() ?>"  rel="bookmark"><img class="thumb" src="<?php  bloginfo('template_directory'); ?>/tools/timthumb.php?src=<?php  echo get_post_meta($post->ID, "thumb", $single = true);  ?>&amp;h=<?php echo  get_theme_mod('featured_bottom_thumb_height'); ?>&amp;w=<?php  echo get_theme_mod('featured_bottom_thumb_width'); ?>&amp;zc=1"  alt="<?php the_title(); ?>" /></a>    

                <?php else: ?>

                <?php endif; ?>                

                

                <strong><a href="<?php the_permalink()  ?>" rel="bookmark"><?php the_title();  ?></a></strong>

                <?php the_content_limit(350, __("[Read more of this  review]", 'studiopress')); ?>

                    

                <hr/>

                    

                <?php endwhile; ?>

                        

                <?php if(get_theme_mod('featured_bottom')) : ?>

                <strong><a href="<?php echo  get_category_link(get_theme_mod('featured_bottom')); ?>"  rel="bookmark"><?php _e("Read more posts from ", 'studiopress');  echo get_cat_name(get_theme_mod('featured_bottom'));  ?></a></strong>

                <?php endif; ?>

            

            </div>

Step #2
Paste it just below where you found it - in other words, you'll have this code now twice in your home.php file, one on top of the other. In order to easily work with the code, take this code:

<?php $recent = new  WP_Query("cat=".get_theme_mod('featured_bottom')."&showposts=".get_theme_mod('featured_bottom_num'));  while($recent->have_posts()) :  $recent->the_post();?>

And replace it with this code:

<?php $recent = new WP_Query("cat=1&showposts=1");  while($recent->have_posts()) :  $recent->the_post();?>

What you have just done is replace what we built which tied into the theme options page to something easier to work with, and easier to replicate. Change the cat=1 to whatever category ID you want to display, and obviously change showposts=1 to however many posts that you want to display.

Step #3
You will also need to change the Headline code, so take this code:

<h3><?php echo  cat_id_to_name(get_theme_mod('featured_bottom'));  ?></h3>

And replace it with the headline of your choice, similar to this:

<h3>Featured Category</h3>

Step #4
Locate this code:

<?php if(get_theme_mod('featured_bottom')) : ?>

                <strong><a href="<?php echo  get_category_link(get_theme_mod('featured_bottom')); ?>"  rel="bookmark"><?php _e("Read more posts from ", 'studiopress');  echo get_cat_name(get_theme_mod('featured_bottom'));  ?></a></strong>

And replace it with this code, adding the URL to the category's archive page and the title of the category:

<strong><a href="URL GOES HERE">More Posts From  CATEGORY NAME GOES HERE</a></strong>

Finally you will need to edit the style sheet to create space between the new elements

Open style.css and look for these selectors:

.hpbottom {

    float: left;

    width: 590px;

    margin: 0px;

    padding: 10px;

    display: inline;

    }

.hpfeatured {

    background: #FFFFFF url(images/featuredtop.gif) top no-repeat;

    float: left;

    width: 280px;

    margin: 0px;

    padding: 10px 10px 10px 10px;

    border: 1px solid #DDDDDD;

    }

and change them to this:

.hpbottom {

    float: left;

    width: 590px;

    margin: 0px 0px 10px;

    padding: 10px;

    display: inline;

    }

.hpfeatured {

    background: #FFFFFF url(images/featuredtop.gif) top no-repeat;

    float: left;

    width: 280px;

    margin: 0px 0px 10px;

    padding: 10px 10px 10px 10px;

    border: 1px solid #DDDDDD;

    }