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!
Very slick indeed; even though it’s got a bit of WP.org flavour going there! 🙂
I think the most impressive thing about this redesign is actually that it is still Thematic at the core, which speaks volumes about using it as a potential framework. I’m lucky, because I can obviously “waste” time on custom coding WP stuff for myself, but I can definitely see the value in a very flexible WP framework. So well done on that.
And btw… What’s up with that image of you on the homepage!? : /
Thanks, Adii.
I really tried my best to ignore the Wp.org design pattern (something my twitter pals can attest to you). I hope it’s clear that it’s not a copy, lift or rip, though. It’s a scheme I’ve been playing with long before their (excellent) redesign (and one of the reasons Thematic is coded the way it is).
And thanks for the compliments on Thematic! Means a lot coming from the rockstar himself and someone making a living from WordPress theming. 🙂
As for that picture, I’m king of teh internets, obviously. Actually, it’s the king disguise my son made for me (he has a prince disguise, my wife a queen).
Nah, I really don’t feel you’ve copied WP.org (not even close), but there are obvious resemblences! I still like it irrespective! 🙂
Looks great Ian! Thanks for sharing the how-to as well.
Good work Ian, good work!
Nice.
I notice the website re-design a couple of days ago, it looks awesome and thanks for the ThemeShaper custom front page template. i was tweaking my thematic child themes since yesterday, this should add up new tricks 🙂
Groovy. One thing—it would be nice if Lucida Sans Unicode got a mention in the CSS for us plebeian Windows users who don’t have Grande.
Its really amazing what you are doing with Thematic and its child themes. And this new design of ThemeShaper IS really awesome. I like the way how the post titles are on top, which I have not seen anywhere else.
The post titles are all done in functions.php—without touching a single template file. Thematic Post Headers are filtered and the titles are hooked in just below the header.
That sounds like fun. Could you write more on using the functions file to customize the themes. When you’re free of course.
Very sharp look & concept Ian, endless possibilities. Thanks for keeping us on our toes!
I like the new website design. very good, yet subtle improvement. nice default fonts too!
Excellent redesign. However, on my 24″ Imac, and using Firefox, the white on the lower part of the page does not span 100% horizontal. Is it part of the design?
More like unaddressed problem. 😦
That’s pretty nice theme. Maybe a little bit too wide. Or.. maybe it’s time to get a bigger monitor..
Hey Ian,
Not sure if you remember me, but I’ve been using this theme since it came out. Anways thank you so much for creating this post. Now my functions file won’t be cluttered.
One more thing, Do you think its possible to use a whole different style.css for the front page?
It’s absolutely possible. Check out the body classes on the front page of your site.
really nice, dude.
but how do you make the blog part? is it a category or a page? i mean, where is that menu item pointing to?
forget it. i just didn’t know how to use the “reading options” the right way. i just have to create a page named “blog” and set it as the “posts page”. easy like sunday morning.
I did the same exact thing… took me hrs to get frustrated enuff to reread what that page actually said 🙂
Excellent Post! I needed to make a full width page for a flash photo gallery for a clients site and this was very helpful. Mine was much simpler though:
This is perfect if you ever need to pop in a static html page. Just create a new page, name it then choose your custom template from the drop down.
Hi Ian, great article. I’ve used the Thematic framework on several projects already and each time I use the functions.php file more exclusively than the last. The last section, “Now Try It Yourself,” has a link to a .zip file that cannot be found. Could you update the link please? I’d like to try out the example for myself and learn a bit more.
Hi –
Thanks for this. I downloaded frontpage.php.zip (link in last paragraph of your article) but I’m having problems extracting it (WINRAR says it is damaged). Can you check it out?
Thanks –
K
The download file gives 404 error. Can you please reupload it.
Thank you,
I second the above request. Thanks.
Make that “I fourth the above request!”
The download file should be all better now. Download away!
Thanks so much, Ian. It’s always helpful to see some code examples.
Thanks for including the download!! Great post overall! How do you get the php code for the default page which could then be used as the basis for a custom page template? Thanks for your help!
We are using Thematic for the first time and have so far successfully followed the above instructions. However, we are encountering a problem: The Blog won’t show up. We created a new landing page template called home.php, and a template for the inside “secondary” pages. We created a page called “News” and selected the secondary page template. But when we click on “News” in the menu, (a) it displays with the home.php template; and (b) it doesn’t show all of the placeholder posts we created.
Did we forget to do something? Thanks!