Creating a Simple Custom Frontpage in WordPress

Many sites use WordPress as their full content management system (CMS). Both over at XLD Studios and Bernskiold Media, we use it as the main backend for the site. Doing so doesn’t mean that it has to have a blog as the front page. In this tutorial, I’m going to show you just how simple it is to add your own Frontpage.

Basic Frontpage

First let us do a little bit of setup with WordPress. Go into your WordPress Admin Panel and create a new page called “Frontpage”. If you know what you want to have written in here, go ahead and add it in, otherwise just leave the content empty for now.

Creating a new page

With the first page now created, repeat the process and create a second page, only this time, name this “Blog”.

Nothing magically will happen by just adding the two pages. There is a little bit of configuration needed in order to make the page switch.

This configuration is done in the general Settings and under reading. Here, switch the setting “Front page displays” to “A static page” and for the front page, select the page you just created before and do the same for the blog page, selecting the page you created for the blog.

Changing the reading settings

What we will end up with now is the following:

• A frontpage for the site that displays the page you selected using the default page.phptemplate.
• A placeholder page for the blog which is going to use the default post listings as decided in index.php or for WP 3 and later, in loop.php.

Chances are that you do not want the default page template style for your frontpage but a special and specific template. Let’s take a look at how you can do that too.

Creating a Custom Frontpage Template

This process is actually fairly simple to do. Let’s start by going into your theme folder through FTP and duplicate the page.php file and call it page-frontpage.php.

Note! The page does not have to be called page-frontpage.php. In fact it does not matter what you call it but this naming convention makes for easy file management.

I am using the base of the new default TwentyTen theme, however you should be able to follow along with any theme out there.

Just after the beginning &lt?php tag in the page, insert the following block of code:

2
3
4

/*
     Template Name: Frontpage
*/

Breaking it down to its bare basics, it is just a normal PHP comment but it will be interpreted by WordPress as a special tag, telling WordPress that this is a special template file that you can then apply to any page in the admin panel.

Before applying this template to the page created earlier, let’s do some more changes as this is why we create the template from the start.

In a normal case scenario I want to make sure that there is no page title nor a comments area so find and remove:

<?php comments_template( '', true ); ?>

<?php if ( is_front_page() ) { ?>
						<h2 class="entry-title"><?php the_title(); ?></h2>
					<?php } else { ?>
						<h1 class="entry-title"><?php the_title(); ?></h1>
					<?php } ?>

Note! The title calling tag might be different depending on the themes. In general, look for the code that is printing out the function: the_title();, usually near a heading tag.

Upload this duplicate file to your themes folder. To activate and use this template for the front page, go in and edit the Frontpage page. Under the “Page Attributes” you can select your newly created template. When you click on the update button, you will have your new custom frontpage.

Setting the page template