kristarella.com

Happiness Engineer at Automattic, lover of knitting, crochet, sci-fi and more

You are here: Home / Blogging / Create a custom homepage in WordPress: the content

Create a custom homepage in WordPress: the content

by

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?

Reader Interactions

Comments

  6. This is indeed a great article, thanks
    But I am a bit stuck with your last point ‘Change the shape of the content’
    I want to use totally different CSS for my custom template
    even posted about it here, but someone closed this unresolved topic 🙁
    http://wordpress.org/support/t.....?replies=4
    I’m really stuck, as the custom template I have created seems to ignore my custom.css file, despite being pointed at it. I think this is because the original style.css is still picked up in index.php (not sure how to tell it to not do this!?)
    Any more details about how to force a custom template to follow totally custom css and ignore all the original css would be most appreciated.
    Thanks
    Olisb

  7. Hey Olisb,

    You can add a custom stylesheet to just that page template by adding the following to header.php.

    <?php if (is_page_template('custom.php') echo '<link rel="stylesheet" type="text/css" href="[url of your new stylesheet]" />'; ?>

    It uses a conditional statement that says “if this page uses the template custom.php, add the following text”.

  9. thank you! I so want to use the thesis theme, but can’t for the life of me figure out how to customize it- this was very helpful!

  10. This is a good tutorial. But what if I want to display the thumbnails of several pages, instead of posts? Is it possible?

    I want to create something similar to http://fatburgr.com/

    Thanks a bunch

  11. Kristian, you would need to enter the content manually. You wouldn’t create a post loop like in this post, you would create a few divs and put the images and a paragraph of text in them.

  12. And this is the other tutorial from you that helped a novice like me a LOT! Thanks for this too!

  16. How do you do this part of the instruction?
    (and then styled in the CSS using
    .homepage { width:30em; } (or whatever size you want).)
    I am confused

    thanks in advance

  17. Jason — In the instructions just before that bit I added a class of “homepage” to the div that contains the content of the post (in the homepage template) and then the bit that you are referring to goes in your theme’s CSS file to change the width of that section. Those instructions might vary slightly depending on your theme though.

  19. Wow, Kristarella, this is exactly what I was looking for. I’ve been planning a blog for while, but I got bogged down for ages trying to get exactly the right template (yes, yes, I realise now: it’s the content, stupid!), but

    Thankfully, I’m a bit more focused on the important stuff now. Ironically I just started using the WordPress classic theme to play around with the css and just get used to wordpress.

    Ultimately, though, I want a landing page that would give people an overview of the site, with excerpts from a page explaining about the my topic (permaculture), the three most recent blog posts, some photos, a video, a word-of-the-day from the site glossary, a note about me, and maybe a feed from some other sites on sustainable human habitats.

    Elements, essentially, of all the different sections of the site. I figured it had to possible, but I had no clue how. I mentioned it to a web designer I used a couple of times and he just sucked in his teeth like a plumber planning his vacation. ‘Owwhh-yeAH! That’ll cost ya!’

    And now, voilá, you present the whole schmeer, just like that! Not only is it possible, not only can I do it myself without paying for my designer’s vacation, but the tut taught me a heap about wordpress design. Seriously, thanks a bunch!

    Sorry for the long comment, hope I’m not breaking protocol or anything.