How to build a home page for your wordpress BLOG

Adding a Home page to your BLOG gives you an opportunity to present your site in a more professional manner and  let users visiting your home page have a better understanding of your niche and site’s foundation.

Why good site foundation is necessary?
Each successful site is based on a certain foundation and as a site admin or as a site owner make sure you know what you need that foundation to do. I mean, think about how those words, sentences and paragraphs are going to effect your bottom line. Remember, you are making this site for a reason. Whether it is to get a laugh, express a thought or make a buck, all those words, sentences and paragraphs need a reason for being there. They mean something. Once you have all those thoughts gathered, its very important to display them in an hierarchical and meaningful manner.

Here is a list of what a perfect web site hierarchical structure might consist of -

Home Page or Landing page with content “buckets”
Blog
Single Post with Comments and Pingbacks
Single Page
Archive and Search Pages
Custom Pages
Store and product sub pages
Forum
Well designed 404 page

How to build a BLOG Home Page -

This article is first in a series of articles covering How to build a BLOG home page, BLOG landing page template and an Archives page template.

An ideal home page will display any or all of the following:

Featured Articles and Videos
Top viewed posts (or Pillar articles)
Top Comments
Sponsors of your site and/or Products showcase
People following you (Social Networking sites/RSS feeds/Email Newsletters)

For this article we will be reusing the header, footer and sidebars from an existing theme and hence we will concentrate on building the main body of the Home page that will display featured categories and a limited number of articles per category.

We are going to name our home page as Home.php. (A complete download of the code is available at the bottom of this article).

Following is the code that you will need to use to display each category and a limited number of articles for each category along with a thumbnail that will be picked up by associating a custom field in the admin section while writing an article.

///////////////////////////////////////////////

<div id=”homepage_leftarea”>
  
   <!–This section is currently pulling category ID #1, and can be switched by changing the cat=1 to show whatever category ID you would like in this area. You can get your category ID by hovering over the category in admin section and looking at at the URL–>
    
   <div class=”featuredCategory”>

   <h3>Featured Category #1</h3>
   
    <!–This is where the thumbnails are found for the homepage bottom section - note the custom field name for this image is “thumbnail”.–>
   
    <?php $recent = new WP_Query(”cat=18&showposts=5″); while($recent->have_posts()) : $recent->the_post();?>

    <?php if( get_post_meta($post->ID, “thumbnail”, true) ): ?>

        <a href=”<?php the_permalink() ?>” rel=”bookmark”><img style=”float:left;margin:0px 10px 0px 0px;” src=”<?php echo get_post_meta($post->ID, “thumbnail”, true); ?>” alt=”<?php the_title(); ?>” /></a>

    <?php endif; ?> 

    <?php if (false): ?>

        <a href=”<?php the_permalink() ?>” rel=”bookmark”><img style=”float:left;margin:0px 10px 0px 0px;”  src=”<?php bloginfo(’template_url’); ?>/images/thumbnail.png” alt=”<?php the_title(); ?>” /></a>

    <?php endif; ?>    

    <b><a href=”<?php the_permalink() ?>” rel=”bookmark”><?php the_title(); ?></a></b>

    <?php the_content_limit(100, “”); ?>
    
    <div style=”border-bottom:1px dotted #94B1DF; margin-bottom:10px; padding:0px 0px 10px 0px; clear:both;”></div>
    
    <?php endwhile; ?>

    <!–This is where you can specify the archive link for each section. Replace the # with the appropriate URL–>
    
    <b><a href=”#” rel=”bookmark”>Read More Posts From This Category</a></b>
    
   </div>   
    
  </div>

//////////////////////////////////////////////

By passing the category ID as parameter (and by using DIV’s or tables to place each category in an individual container) you can create a Home page providing an overview of a limited set of articles for each category. 

And by implying some PHP skills you should be able to write a Featured Articles Plugin by simply associating article posts with custom field, and then picking that custom field randomly you should be able to rotate the articles on each page refresh. I will leave this to our readers as an exercise but do let me know if you need help.

After the Home Page has been crated, the very first problem you will face is how to make home.php your BLOG’s default landing page.

Well the good news is you don’t have to do anything. Why? because wordpress takes care of this for you.

The answer to above question comes from Wordpress Page Hierarchy -

e.g. If a visitor goes to your home page at http://example.com/wp/, WordPress first determines whether it has a static front page. If a static front page has been set, then WordPress loads that page according to the page template hierarchy. But if a static front page has not been set, then WordPress looks for a template file called home.php and uses it to generate the requested page. If home.php is missing, WordPress looks for a file called index.php in the active theme’s directory, and uses that template to generate the page.

So if your page name is home.php, wordpress will automatically pick it up before index.php and thus home.php becomes your sites default home page. There you go you are all set now with a landing page for your website.

Please leave your comments or email me - info[@]coolwebdeveloper[.]com if you need help implementing this article or any of your web development tasks.

Click here to download the complete code and related functions.

Downloaded folder include - home.php and functions.php. (You will need WinZip Software to open the downloaded file)

home.php - includes the home page structure
functions.php - includes the functions required that are not available in wordpress.

Related posts brought to you by Yet Another Related Posts Plugin.