August 13th, 2006

How to Put Up a Custom Front Page in WordPress

Part of the Using WordPress as CMS SeriesBefore we start on the meat of the Using WordPress (WP) as a CMS series, there’s some fundamental technical stuff we have to get out of the way first. First on the list is: Custom front/main/index pages.

What For?

By default, WordPress’ front page displays a reverse chronological list of your posts - with whatever extras you chose to add, e.g. Recent Comments, Flickr, etc. This is the normal blog index, and is normally the first thing you want to “get rid of” if you want to use WP as a more web site-ish CMS. For example, you might want your front page to display only an introduction and a sitemap, or just a simple Flash movie.

But at the same time, you might still want to have a normal blog index somewhere for the blog aspect of your web site. So, how do you get yourself a custom front page while still having the normal blog index alive and kicking somewhere else on site?

Three+ Ways to Do It

These are not comprehensive (I’ve not touched at all on manually modifying your rewrite rules here), but I believe that they are all you need. Correct me if I’m wrong though.

  • WordPress’ Default: home.php
    WP’s template hierarchy is setup such that a home.php template file is always checked before calling the index.php template file in your theme directory. So, all you need to do to override index.php, i.e. the normal blog index, is to create a home.php file in your theme directory (since most, if not all, themes don’t have it). This home.php template will house the code for your custom front page, and will generally be laid out like this:

    <?php
    /*
    Template Name: Home
    */
    ?>

    <?php get_header(); ?>

    Your Custom Front Page Content (e.g. Flash movie, site map) Here!!!

    <?php get_footer(); ?>

    That’s it for your custom front page. Now, for your normal blog index, you’ll have to create a page named “Blog” (the name doesn’t matter actually, but the post slug should reflect the directory you want your blog to be in, whether it is “blog”, “journal” or “whatever”, e.g. http://yoursite.com/blog/), as well as a custom page template for it. The template’s name is unimportant, but for consistency sake, I suggest naming it blog.php. Its contents should look something like this:

    <?php
    /*
    Template Name: Blog
    */
    ?>

    The content here should mirror your original blog index (index.php), with whatever changes you have given it.

    Last but not least, change the permalink structure of your blog posts in Options >> Permalinks. If it was just /%postname%/ before, then change it to /blog/%postname%/. This way, URL-wise, all your blog posts will come under your normal blog index, e.g. http://yoursite.com/blog/post-title/. You may also want to change the permalink structure of your categories by adding an additional /blog/ prefix. This way, the URLs of your categories will match your posts, e.g. http://yoursite.com/blog/category/category-title/. Edit: Oops, since we applied a static prefix (i.e. /blog/) to our blog entry permalink structure, archive permalinks are automatically adjusted to match, e.g. http://yoursite.com/blog/category/category-title/.

    Note: The is_home() test will apply only for your custom front page. So, to test for your newly-created normal blog index, use is_page('blog') instead.

  • Variant of Approach 1
    You might have noticed that the use of home.php above is somewhat redundant since the original index.php ends up totally unused. So, instead of creating both a home.php and a blog.php for your custom front page and normal blog index, respectively, you can just create a blog.php like above, and use index.php for your custom front page.

    The advantage of using index.php instead of home.php is that you retain your higher-priority (hierarchy-wise) home.php template for future uses. For example, you might some day want to evaluate some conditionals before loading your front page. Instead of having to place these conditionals in your index.php, you can get them to run before index.php is even loaded by placing them in your home.php. However, the same end result can usually be achieved whether you use home.php or index.php. Most of the time, your choice boils down to the so-called “elegance” in method.

  • Using the Filosofo Home-Page Control Plugin
    This is probably the easiest solution out there (which BTW you should already be downloading). What the plugin does is to allow you to choose any page you’ve created in WordPress as your custom front page. Of course, you can choose to use the WordPress Default, i.e. if exists, home.php loads first, then index.php does. If you do choose any arbritary page in WordPress, you may want to use a custom page template for it. The contents of that template should be laid out the same way as in home.php in the first approach above.

    The second thing it does is to save you the hassle of having to create another page and its page template (blog.php) just for your normal blog index. All you have to do is to specify the directory you want your blog index into be in, e.g. blog, and your original index.php will automatically be loaded when someone goes to http://yoursite.com/blog/.

    And to think all this is done in the comfort of your WP admin panel, in Options >> Home-Page Control. But like the first approach and its variant, you’ll still have to modify the permalink structure of your blog entries at Options >> Permalink. It’s done in the same way.

    Note: Like just now, the is_home() test holds only for your the page you choose as your custom front page. But for your blog index, use the !is_home() && !is_page && !is_archive() test. The plugin author suggests using just !is_home() && !is_page, but for some reason, I find that my category and dated archives also satisfy those test parameters.

  • Using the Static Front Page Plugin
    Although the plugin used here is different, the approach is mostly similar as the previous one. The only practical difference is in the implementation of the normal blog index.

    Unlike the Filosofo plugin, you will still have to go through the hassle of creating a page (named “Blog”) and custom page template (named blog.php) for your normal blog index - just like in the first approach. Remember to change your permalink structure as well.

    Alternatively, you can follow the instructions of the plugin creator: Create a category named “blog”, stuff all your posts into that category, then use the resulting category page as your normal blog index. You can even customize the look of that specific category to distinguish it from your other categories (by creating a custom category template such as category-6.php if the category had an ID of 6). But the problem with this approach is that there doesn’t seem to be a way to get a proper permalink structure (i.e. your normal blog index at http://yoursite.com/blog/ and your blog posts at http://yoursite.com/blog/post-title/) without touching your rewrite rules.

Conclusion

I’m in favour of using the Filosofo Home-Page Control plugin approach, but frankly, any one of them will do. Try to get at least one of the approaches in your repertoire though because I won’t be repeating the stuff here when I start on the real content of the Using WordPress as a CMS series.

Edit: Added in consideration for the permalink structure of categories. I forgot that archive permalinks are automatically adjusted to match your new blog index location if you applied a static prefix.

If you found this post useful, keep updated with future posts by subscribing to blogHelper (for free) through RSS or email.

Remember to share this post as well (if you liked it, of course): These icons link to social bookmarking sites where readers can share and discover new web pages.
  • del.icio.us
  • digg
  • Fark
  • Furl
  • Ma.gnolia
  • NewsVine
  • Reddit
  • YahooMyWeb

Posted by ZMAng

Filed under Guides, Plugins, WordPress

26 Comments

Leave a Reply