How I Used A Custom Page Template To Redesign My Blog The Smart Way

The custom front page is a must for really taking control of your WordPress installation and using it to manage your website. Luckily, creating a custom front page is ridiculously easy. It’s something every WordPress tinkerer should tackle at least once.

Take a look at the custom front page I created for ThemeShaper. I’ll tell you exactly how I created it using a custom page template and even let you download the one I’m using here.

First, Create a Child Theme For Your Edits

There’s no sense mucking up a perfectly good WordPress theme with edits that make it confusing to update and difficult to provide support for. Create a WordPress Child Theme for these, and any, edits. Trust me. You’ll thank yourself in the long run.

Here’s how to make a Child Theme of the Thematic WordPress Theme Framework.

1. Make a folder in your blog themes directory called “awesome”.

2. Create a style.css file in that folder with the following code copy-pasted into that style.css file.

/*
Theme Name: Awesome Theme
Theme URI:
Description: An Awesome Child Theme built on top of Thematic
Author:
Author URI:
Template: thematic
Version:
*/

/*
For the sake of simplicity we're going to import
the Thematic stylesheet.
You don't have to do this though. You can just
start fresh with new CSS or copy over large chunks of
the original styles (recommended) and edit them here.
Or you can import all the bits and pieces that make up
Thematic just like I do (also recommended).
*/
@import url(../thematic/style.css);

Activate the Awesome theme and you’re ready to go. Remember, you’ll be making all your changes in the Awesome theme style.css and functions.php.

Next, Create a custom page template

This part is pretty easy. Create a PHP file with the following PHP comment at the top:

/*
Template Name: Front Page
*/

That’s the name of your custom page template. You can use anything you want. Read more about it in the WordPress codex.

Now that you’ve got your template ready you can put anything you want in there. Anything! There’s no reason you can’t use WordPress to manage your website with a feature like this. Especially if you’re making a custom front page. Just create a new page in WordPress called Home and assign it this template in the attributes section of the write screen. Set this new page as the static front page and you’re ready to go.

An important note: I could have done all the following work in the index.php of my Parent Theme. Or copied the index.php of my original theme to my Child Theme and made the edits there. I could have done that but that would not have been the smart way. Don’t touch index.php. Reserve it for your blog page.

Add Random Featured Content

Highlighting my most important projects was one of the goals for this custom front page template (yes, you should always have goals when you design something). I wanted to randomly showcase a select group of these projects. What I did was create a series of files (2 to start with) named feature-front-x.php. Where x was a number. Then, these files are randomly included on the front page. It’s pretty simple stuff.

Here’s the code:

if (is_front_page()) {
    $rand = mt_rand(1, 2);
    include "includes/feature-front-$rand.php";                        
}

The important bit is the mt_rand(1,2). Right now it’s randomly including 1 of 2 files. If you had 15 files you’d need to have mt_rand(1,15) in there.

Add An About The Author Section

Embarrassing confession time: I’ve shamelessly ripped off of Darren Rowse’s Problogger “Who’s Behind Problogger” block and used the verbal structure of his as the basis of my own. You can see it in the footer of his site. But what they say is true, if you’re going to steal, steal from the best.

Here’s the block I added to my site, just a heading and a simple series of paragraphs. You’ll see I used get_option('home') in the URL pointing to my about page rather than completely hardcoding the URL. Taking the time to write code like this in your WordPress theme will help you transition back and forth between a live site and a test site.

              <h3>Who's Behind ThemeShaper?</h3>
              <img src="<?php echo dirname( get_bloginfo('stylesheet_url') ) ?>/images/headshot.jpg" style="float: left; margin: 4px 10px 10px 0; clear: left;" alt="" />
              <p>My name is Ian Stewart. I’m a professional designer, and WordPress <em>enthusiast</em>, trying to shape how we think about the exciting and dynamic world of WordPress themes.</p>
              <p>Back in 2006 I took my first tentative steps into the world of theme design. I didn’t know it at the time but that moment would change how I think about design <em>completely</em>. Since then, I've done my best to change how we all think about designing WordPress themes.</p>
              <p><a href="<?php echo get_option('home') ?>/about/" rel="nofollow">Read more at my about page</a></p>

Show Your Recent Blog Posts

You’ll see that I added a link to More recent items outside of the loop. I could have improved this link by getting the next post ID in the loop. Clicking on that link would then direct you right to the next post in line on the blog page. Unfortunately, I didn’t do that. If anyone manages to do it cleanly, awesome.

Here’s the code to add a list of recent blog posts to the front page of your site:

              <h3>Recent Items From The Blog <a href="<?php bloginfo('rss2_url') ?>" title="<?php echo wp_specialchars(get_bloginfo('name'), 1) ?> <?php _e('Posts RSS feed', 'thematic'); ?>" rel="alternate nofollow" type="application/rss+xml"><img src="<?php echo dirname( get_bloginfo('stylesheet_url') ) ?>/images/feed-icon-14x14.gif" alt="RSS"/></a></h3>
              <ul id="recent-items">
              <?php
                  $recentPosts = new WP_Query();
                  $recentPosts->query('showposts=5');
              ?>
              <?php while ($recentPosts->have_posts()) : $recentPosts->the_post(); ?>
                  <li><a href="<?php the_permalink() ?>" rel="bookmark"><?php the_title(); ?></a></li>
              <?php endwhile; ?>
                    <li class="more-items"><a href="<?php echo get_option('home') ?>/blog/">More recent items <span>»</span></a></li>
              </ul>

Check out the front page again,. See how I added that RSS link in there and positioned it to the extreme right of the title? That was done with a little bit of CSS trickery. Here’s how it works:

h3 {
    position:relative;
}
h3 img {
    position:absolute;
    right:0;
}

The position:relative on the h3 tag lets me make a sort of container for anything within it, like an img tag. With that container in place I can absolutely position anything within in it. A super useful technique with a whole host of applications. Put it in your CSS toolbox and use it often.

Now Try It Yourself

Good luck creating your own Custom Page Templates and taking control of your WordPress blog. If you want a head start, you can download the ThemeShaper custom front page template. Use it as you see fit.

Let me know how it goes for you in the comments. I think you’ll find that this is a fun project that can have a profound effect on how you view your WordPress blog. Good luck!