Building a FrontPage using WordPress

This tutorial assumes that you are comfortable enough in designing WordPress themes. I suggest you take the hang of both the methods and decide which one you want to go with. Technically I haven’t come up with any limitation of expanding WordPress capabilities that one may face by using either of the method.

We will require to use page templates in both the methods, so if you don’t know how to create them, here is a good chance to understand how they work and how you can use them. Read this article – WordPress page templates and come back to this tutorial.

Using Page templates

  • Create two page templates. One for the homepage and another for the blog page.
  • Create two pages named Home & Blog (You can name them anything)
  • Make sure that you select the respective page template while creating them to use the custom layout and content as specified in the page template.wp-cms-select-page-template-2
  • Make sure that under Reading Settings (Settings > Reading), the FrontPage is set to display static page.wp-cms-reading-settings
  • That’s it. Go check out your homepage and blog page.

Here in this method your posts on the blog are controlled by what you have specified in the Reading settings and in the next method it will depend on the value used in the code.

Personally I use the second method.

Using home.php

  • Make sure that under Reading Settings (Settings > Reading), the FrontPage is set to display latest posts.wp-cms-reading-settings-2
  • Create a page template for blog and one similarly a home.php file for the homepage
  • Create a page named Blog and select the blog page template while creating it.wp-cms-select-page-template-2
  • Place the home.php in your theme folder
  • That’s it. Go check out your homepage and blog page.

For content that you need to update manually like some text or anything else, you can widgetised the area too. Then you can add text-widget or anything else.

Blog Page Template Code

$recentPosts = new WP_Query();
if ($recentPosts->have_posts()) : while ($recentPosts->have_posts()) : $recentPosts->the_post(); ?>

	<div class="post" id="post-<?php the_ID(); ?>">
		<h2><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>
		<small><?php the_time('F jS, Y') ?> by <?php the_author() ?></small>

		<div class="entry">
			<?php the_content('Read the rest of this entry &raquo;'); ?>

		<p class="postmetadata"><?php the_tags('Tags: ', ', ', '<br />'); ?> Posted in <?php the_category(', ') ?> | <?php edit_post_link('Edit', '', ' | '); ?>  <?php comments_popup_link('No Comments &#187;', '1 Comment &#187;', '% Comments &#187;'); ?></p>
		<hr />

<?php endwhile; endif; ?>

Subscribe via RSS or via email to keep up with the WordPress as CMS series so as to learn what all crazy stuff you can build with it.

Feel free to ask any questions you may have via the comments. I will be glad to answer them.


One response to “Building a FrontPage using WordPress”

  1. […] Building a Front page using WordPress […]