Create a custom homepage in WordPress: the content

Last post I talked about how to create a custom home page in WordPress, but I didn’t mention many specifics of putting stuff on the homepage.

Now I will!

Using WP editor

I already mentioned that you can enter content into the page editor, just like a normal page. This will produce a static page: mostly unchanging. This is okay, but I get the impression that static portals are a thing of the past and dynamic pages are in. People won’t keep coming back to your site if it never changes. Sure, they might come to your posts page to see if there’s a new post… if they do, why did you make a home page to begin with?

A more interesting option is to make a page template, which can be updated with your latest posts, photos, whatever you like really.

Making a page template

I usually start by copying index.php from the current theme I’m using.

Once you’ve done that, name it something like homepage.php. It’s better not to use home.php because that filename is already used in WP themes. If your theme has a home.php page it will surpass index.php as the front page of your blog. You can use home.php for a homepage, but it will be more difficult to make a posts page that looks like the usual blog front page (well… I don’t know how to do it).

After copying index.php, and giving it a new name, insert
<?php
/*
Template Name: Homepage
*/
?>
at the very top of the file.

Customising a page template

Now you have a working page template, which when uploaded to your theme directory will show up in the Page Template dropdown box (on the page editing admin page).

The page will look the same as your front page already does until you change some things around.

Remove the sidebar

I don’t think sidebars are particularly useful on a home page because they usually relate to posts or blog-type things.

Remove <?php get_sidebar(); ?>.

Remove navigation links

The next/previous links for post pages and individual posts will become irrelevant on a single home page.

Remove <?php posts_nav_link(); ?> (or previous_post_link and next_post_link if they are used).

Change the main content

The section that generates posts will start with
<?php if (have_posts()) : ?>
<?php while (have_posts()) : the_post(); ?>
and end with
<?php endwhile; ?> and probably a bit later <?php endif; ?>.

These are the bits that you can delete or change to suit your home page needs.

To show excerpts

Change <?php the_content(); ?> to
<?php the_excerpt(); ?>.

Show posts by category

To show recent posts from certain categories, as I’ve done on the ASSSoc website, you can use code adapted from Chris Pearson.

<?php
// this is the where I put a description so I remember which category I'm using
query_posts('showposts=1&cat=8'); ?>
<?php while (have_posts()) : the_post(); ?>
the heading and content (or excerpt) code stays here
<?php endwhile; ?>.

You can show several posts by changing the number after showposts=.

Add something attractive or useful

Other things you could add include, links to resumes; links to photos or even photo thumbnails (using a Flickr plugin or a PixelPost plugin); a short profile; a list of your best or most popular posts.

Change the shape of the content

If you have removed the sidebar you might want to widen the content area (so that the header and footer don’t look funny). Don’t completely change the class or ID of the content div, you might lose all your other styles (paragraphs, headings etc). Just add another class.

For example, in the Copyblogger theme the post section is
<div class="post">.
It can be changed to
<div class="post homepage">
and then styled in the CSS using
.homepage { width:30em; } (or whatever size you want).

Make the change

To implement the page template, upload the file to your theme’s directory. Then go to the page you assigned as the home page and select the template from the Page Template dropdown box.

What else would you put on your home page?