Modifying Wordpress’ Front Page

The origins of the standard blog front page vary. Some say that the post-after-post-after-post style comes from the ancient Greeks, others say it was the Chinese. One thing’s for certain, it’s old and it’s tired.

Having been a blogger in one shape or another for going on five years now, I’ve started to become disenchanted with the main index layout common to near all blogging platforms. You know the one, a landing page that lists the 5-10 most recent posts with a page length about the size of Kazakhstan.

As such, I began hunting around for a way to modify it a bit more to suit my likings, and what I found was that it’s not hard at all.

The Goal

What I wanted to do was create a page that degrades the size of the post being shown based on its datedness. The most recent post would be showcased, with the three previous posts offering a teaser or excerpt. I then wished to cap things off with a short list of five links to the most recent entries after those first four.

The Method

To do this you need to break into the index.php file of your blog’s template. Generally speaking this file uses what WordPress calls The Loop (notice the caps, pretentious bastards).

Usually, The Loop looks like this:

<?php while (have_posts()) : the_post(); ?>
    <div class="post" id="post-<?php the_ID(); ?>">
        <h2><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title(); ?>"><?php the_title(); ?></a></h2>
        <small><?php the_time(‘F jS, Y’) ?></small>

        <div class="entry">
            <?php the_content(‘Read the rest of this entry &raquo;’); ?>
        </div>

        <p class="postmetadata">Posted in <?php the_category(‘, ‘) ?> | <?php edit_post_link(‘Edit’, , ‘ | ‘); ?>  <?php comments_popup_link(‘No Comments &#187;’, ‘1 Comment &#187;’, ‘% Comments &#187;’); ?></p>
    </div>
<?php endwhile; ?>

Well to do what I wanted, I needed a slightly more customizable solution. Fortunately, the brainiacs that those WP developers are, they created an awesome little built-in function called get_posts(). Smartly named too, I might add.

This fun little guy creates mini-”The Loop“s, and allows you to specific things like the number of posts, what to sort by (name, date, etc.), whether you wish to sort ascending or descending, and what offset you want (i.e. how many posts after the most recent one do you want to start at).

So, to do what I need, I required three mini-”The Loop“s.

  1. The first would display just the most recent post with full text.
  2. The second would display three posts displaying an excerpt (teaser) of text.
  3. The third would list five more links displaying only the title and date.

The first thing we add to our code are the variables:

<?php
    global $post;
    $the_newest = get_posts(‘numberposts=1);
    $the_newer = get_posts(‘numberposts=3&offset=1);
    $the_new = get_posts(‘numberposts=5&offset=4&order=DESC&orderby=post_date’);
?>

Immediately following this we set up our three loops. I know PHP can be overwhelming, particularly for those with little experience with it. However, by looking through the following code, you should see the similarities and differences that change the output to my preferences stated above.

The First Loop - The Most Recent Post:

1.<?php foreach($the_newest as $post) :
2.  setup_postdata($post)?>
3.  <div class="post" id="post-<?php the_ID(); ?>">
4.      <h2 class="posttitle"><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title(); ?>"><?php the_title(); ?></a></h2>
5.      <div class="entry">
6.          <?php the_content(‘Read on’); ?>
7.      </div>
8.      <div class="postmeta">Posted in <?php the_category(‘, ‘) ?> | <?php edit_post_link(‘Edit’, , ‘ | ‘); ?>  <?php comments_popup_link(‘No Comments’, ‘Comment (1)’, ‘Comments (%)’); ?></div>
9.  </div>
10.<?php endforeach; ?>

The Second Loop - Three Posts Summarized:

1.<?php foreach($the_newer as $post) :
2.  setup_postdata($post)?>
3.  <div class="post" id="post-<?php the_ID(); ?>">
4.      <h2 class="posttitle"><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title(); ?>"><?php the_title(); ?></a></h2>
5.      <div class="entry">
6.          <?php the_excerpt(‘Read on’); ?>
7.      </div>
8.      <div class="postmeta">Posted in <?php the_category(‘, ‘) ?> | <?php edit_post_link(‘Edit’, , ‘ | ‘); ?>  <?php comments_popup_link(‘No Comments’, ‘Comment (1)’, ‘Comments (%)’); ?></div>
9.  </div>
10.<?php endforeach; ?>

**Aside from the variable ($the_newest/$the_newer), the only thing that changes between these two loops is the bit on Line 6 (the_content(’Read on’); and the_excerpt(’Read on’);). This will change the display from the full content of the post to the alternate excerpt you can include with each post (if you don’t set an excerpt, WordPress simply defaults to the first 55 words of the post).

The Third Loop - Five More Links

<?php foreach($the_new as $post) :
    setup_postdata($post)?>
    <strong><?php the_time(‘F jS, Y’) ?></strong>

    <a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title(); ?>"><?php the_title(); ?></a>
   

 
<?php endforeach; ?>

** Here we don’t have any the_content or the_excerpt, but instead just make a linkable title.

Wrap up

And there you have it, an alternative way to display your index.php file for WordPress blogs. Check out the front page of this blog to see it in action. And if you just want to cruise through the php of the index file, check it out (in text format) here:

index.php.txt

This mod opens up a lot more potential for methods in which you can display your blog’s content. Read through the get_posts() entry on WordPress’ Codex and figure out additional creative ways of modifying your home page.

Filed under: Blogging, CSS/HTML, Design, WordPress | | Written on July 15, 2007

11 Comments »

Comment by
Shaun

Don’t take this as a knock at your efforts, but I believe there are other ways to do this without having to edit WP core files.

The Subtle WP theme from http://www.gluedideas.com/ allows you to specify how many posts to appear on the index page and puts teasers at the bottom. It has other features and abilities that go beyond the capabilities of just about all other themes.

I believe that WordPress also gives you the option (as of WP 2.2) to replace the main index page with a “Page” instead of the default index of the latest posts.

July 17, 2007 @ 8:33 pm

Comment by
Ryan

Sorry Shaun, I think you missed the “index.php of your blog’s template” bit… this is completely independent of core WP files and based totally in the template.

The purpose of this “how to” is to show people interested in creating their own themes (or modifying their current themes) to be able to display with a bit more customization. Using another pre-fab theme defeats the purpose.

And you’re right, you can use a Wordpress Page as your landing page in the latest version of WP. However, that is also outside the scope of this post and does little in the way of what I was looking to do. To add this sort of functionality to a Wordpress page, you’d need to set up a custom page template, hardcoding the above PHP into it, and then use that as the Page set as a landing page. The result would be the same, but it’s a bit redundant.

July 17, 2007 @ 11:45 pm

Comment by
Shaun

I read the post too fast. I thought you were suggesting that people modify the index.php at the root of their blog. The theme main index page unfortunately, has the same name “index.php”.

July 18, 2007 @ 12:42 am

Comment by
Ryan

For the sake of avoiding such confusion, I wonder why they didn’t just give the template files an arbitrary extension like .tpl or whatnot. Meh.

July 18, 2007 @ 7:44 am

Comment by
Jeremy

Hey Ryan,

I like that layout - I might ’steal’ some of your ideas and modify my front page in a similar way. It does look better than long post after long post…

Good advice and code.

July 24, 2007 @ 1:17 am

Comment by
Ryan

Cheers Jeremy. Look forward to seeing what you do with it. For myself, I’m a long way from being finished, but as this blog is a hobby, and the other things on my plate aren’t… a man has to have priorities ;-)

July 24, 2007 @ 6:38 pm

Comment by
Lonnie

Ryan,

Just curious…..

How do the aggregators feel about the abbreviated posts? Bloglines cut me off when I went to synopses, so I changed back….

Things are looking great!

July 27, 2007 @ 9:50 pm

Comment by
Ryan

I read synopsis feeds all the time through bloglines. Sure it wasn’t a glitch? I believe WP publishes the feed based on your backend settings, not on how they’re set to display on the front page.

July 27, 2007 @ 11:37 pm

[...] many thanks to Ryan at Dao by Design who is, as of yet, completely unaware of the fact that his tutorial on changing on the wordpress index.php file was incredibly [...]

October 5, 2007 @ 11:20 pm

Comment by
Jazmin

Hi Ryan,

Thanks for the great post. This is extremely helpful to me.

Except for one problem: My posts are displaying in ascending order (i.e. no matter what I do, my first post is “stuck” in the “newest” post position).

I copied your code almost exactly. I’m developing on WP 2.5.1. Not sure if there’s any other info you need, but any advice would be greatly appreciated.

Thanks again!

May 13, 2008 @ 4:54 pm

Comment by
Jazmin

Hi again,

I think I may have figured it out. It might be a problem with MYSQL on Xampplite, which I’m using.

May 13, 2008 @ 5:09 pm

RSS feed for comments on this post. TrackBack URL

Leave a comment

PIGEONholed

RECENTLYspoken

  • Chris M. Said: I found that I had to add an ‘=’ to the ‘brow_ver < 6′ to make it detect...
  • erik Said: Hello, I have installed the plugin and enabled it and I am able to configure the tool. When is it writing...
  • Anton Said: To Elim: the only way to get rid of the patch is overwrite your whole joomla installation with default...
  • dış cephe Said: thanks andrew..
  • Ryan Said: @randominquiror: Sorry RI, should be a standard Article/Article Layout menu item.

BLOGroll

PASTposts

BADGEpatch

Blog Directory - Blogged Internet Blogs - BlogCatalog Blog Directory
Copyright © 2008 Dao By Design, All Rights Reserved.