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:

  1. <?php while (have_posts()) : the_post(); ?>
  2. <div class="post" id="post-<?php the_ID(); ?>">
  3. <h2><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title(); ?>"><?php the_title(); ?></a></h2>
  4. <small><?php the_time('F jS, Y') ?></small>
  5. <div class="entry">
  6. <?php the_content('Read the rest of this entry &raquo;'); ?>
  7. </div>
  8. <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>
  9. </div>
  10. <?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:

  1. <?php
  2. global $post;
  3. $the_newest = get_posts('numberposts=1');
  4. $the_newer = get_posts('numberposts=3&offset=1');
  5. $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('<span>Read on &raquo;</span>'); ?>
  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('<span>Read on &raquo;</span>'); ?>
  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

  1. <?php foreach($the_new as $post) :
  2. setup_postdata($post); ?>
  3. <strong><?php the_time('F jS, Y') ?></strong><br />
  4. <a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title(); ?>"><?php the_title(); ?></a>
  5. <br /><br />
  6. <?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

64 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

Comment by
alex

For some reason, I copied/pasted your code and my “Previous / Next” links below don’t show up. Maybe it’s a compatibility issue with 2.7?

January 26, 2009 @ 11:10 am

Comment by
mlavdh

Hi Ryan,

your post is very helpful for me and it’s almost wat i want for my website. I’ve created a static frontpage and a page for my blog. I’m goiing to make seperate template for both pages but for testing sake i only use the index.php for now.

I have added the standard loop to be able to see the content of the page home and blog.

Everything is working fine except for one important thing.
The read on or read more link isn’t working on the homepage.
On /blog it’s working fine.

Is there a way to make it work, on both pages?

February 5, 2009 @ 12:06 am

Comment by
Ryan

@mlavdh: If you copied and pasted any of the code from this page – make sure you double check the single and double quote marks – that might be hanging things up.

Be sure to check out the Codex: Customizing the Read More – it will show you how to add, remove or otherwise customize the “read more” link.

February 5, 2009 @ 8:52 am

Comment by
Jasper

Interesting post. Working on a modified front page post display as well. This might just help!

P.S. Your code box’s text leaves the box in the latest Firefox version and goes to the end of the browser window..

March 12, 2009 @ 5:35 pm

Comment by
Foetcrot

mm… 10x :)

April 8, 2009 @ 2:19 am

Comment by
Keith

Do you have a new link for the text file sample of your index.php file?

Thank you.

April 25, 2009 @ 12:06 am

Comment by
Ryan

Hi Keith, is there something wrong with the one linked to in the article?

April 27, 2009 @ 1:05 pm

Comment by
Keith

When I try the link I get . . .
Read on »’); ?>
Posted in
Read on »’); ?>
Posted in

Not Found
Sorry, but you are looking for something that isn’t here.

April 27, 2009 @ 3:11 pm

Comment by
Ryan

How about this link?

April 27, 2009 @ 3:28 pm

Comment by
Keith

Hi Ryan,
I had already tried that and I get the same results.

Thanks for your help.

Regards,

Keith

April 27, 2009 @ 10:15 pm

Comment by
Ryan

Wait, sorry Keith – you’re not having troubles accessing the actual file, you’re having troubles getting it to work? Your first post seemed to indicate that the link wasn’t working.

As for the file itself, make sure all the single- and double-quotes in the code are regular straight quotes, not fancy quotes. Also, I’m assuming you changed index.php.txt to index.php.

If neither of those things work, I’m afraid I can’t help you. The code is 2 years old and hasn’t been tested with newer versions of WP. That said, having a quick look at it, it still looks like it should work, as the get_posts() function is still in use.

April 28, 2009 @ 6:58 am

Comment by
Keith

I wanted to download your file as a txt file but will just cut and paste the code above.

Thanks,

Keith

April 28, 2009 @ 7:27 am

Comment by
Travis

Worked great, thanks so much.

PS: I like what you’ve done with the WordPress here. Best of luck to you!

May 6, 2009 @ 11:31 am

Comment by
Missesschnitzelpommes

Ich hab ne gute seite gefunden.
Hier kann man gut und günstig Urlaub buchen schaut mal rein

http://urlaubundlastminute.de

May 13, 2009 @ 2:44 am

Comment by
Keith

Hi Ryan,
Sorry to be a bother. If you have time could you mark this file (my working index.php)with where the variables and loops go? If no time no drama and I will continue to try different ways.

Thanks,
Keith

<div class=”post” id=”post-”>

<!– by –>

<?php the_tags(’Tags: ‘, ‘, ‘, ”); ?> Posted in | <?php comments_popup_link(’What do you think?  »’, ‘1 Comment »’, ‘% Comments »’); ?>

Not Found
Sorry, but you are looking for something that isn’t here.

May 13, 2009 @ 6:44 am

Comment by
Ryan

Hi Keith, I really don’t recommend this solution for beginners, or for people just looking to mod the default theme. There are loads of free themes out there that do a “magazine” style front-page and many of them use solutions similar to this. My advice is to download one of those themes and see how they do it.

This isn’t about adding things to the current loop, but rather recreating multiple loops to suit your purpose.

As an update to this post: I should mention that the use of get_posts() is probably not the best method of doing this – but rather through the use of wp_query(). When I have time I’ll write an update about this. But until then, I definitely suggest searching Google and the WP codex.

May 14, 2009 @ 7:11 am

Comment by
Patrick

Need some help …

I’m redesigning the homepage of FantasyCollegeBlitz.com and am trying to excerpt the latest blog entry.

Test page in progress:
http://www.fantasycollegeblitz.com/index-V3.php

Error I’m getting:
Fatal error: Call to undefined function have_posts() in on line 1

You can see from this other page that I had excerpted only the headlines with no issues: http://www.fantasycollegeblitz.com/index-V2.php

So my attempt to display an excerpt of the latest entry is failing. I modified your code to use only “the newest” and remove references to “the newer” and “the new”.

*** HERE IS ALL I’M USING ***

<div class=”post” id=”post-”>

<!– by –>

<?php the_tags(’Tags: ‘, ‘, ‘, ”); ?> Posted in | <?php comments_popup_link(’What do you think?  »’, ‘1 Comment »’, ‘% Comments »’); ?>

**** end coding ****

Thoughts?

May 21, 2009 @ 4:38 am

Comment by
Patrick

whoops that’s not all the coding i’m using … can’t seem to paste it correctly … but I am omitting the “newer” and “new” refrences as i mentioned

May 21, 2009 @ 4:59 am

Comment by
Ryan

Unfortunately code wont display properly in comments. :-(

It’s difficult to tell where you might be going wrong here Patrick, but that you are running php files outside of the WordPress theming structure feels like it might be the cause of it. Because these functions (ie. have_posts()) are internal WordPress functions, you need to make sure you test your code in the confines of a theme – and not independently from it.

May 21, 2009 @ 7:58 am

Comment by
Patrick

Ryan:

Yep that’s exactly what I’m doing — attempting to create a homepage separate from the WordPress templating system that serves like a portal to the site’s content as well as feature other content from the site’s social media efforts. While I am able to easily incorporate php require commands to various files in an includes directory I setup, I thought it would be easier to setup this sort of separate homepage while still utilizing some WordPress coding. I did a site once that ran on ExpressionEngine and was able to do whatever I wanted to … seems like working with WP is not as simple as I had hoped.

So it sounds like what I want to do cannot be done unless I create a homepage template within the WP confines?

Thanks for taking a look.

May 21, 2009 @ 11:31 am

Comment by
Ryan

@Patrick: I think you’d be much better off tackling it within the scope of WordPress – which is easy enough to do once you are comfortable with its rather robust templating system.

To have a completely custom front page, while still in the confines of WP, I would create a page in WordPress’ back end and assign it a custom page template which would include all the PHP (internal to WP and otherwise) that I want to display. Then set the default homepage in the WP settings to that page.

May 21, 2009 @ 12:56 pm

Comment by
Patrick

Ryan:

OK will give that a shot .. my initial dive into WP’s admin panel left me wary of what and how I could manipulate & customize … will follow your suggestions and report back ;-)

Thanks again fer all the hep.

May 22, 2009 @ 5:39 am

Comment by
Ryan

Your biggest changes will be in your theme’s folder:
/wp-content/themes/your-theme-name/*.php

The default WP theme comes with a sample template file called “archives.php” – this will give you an idea of how to set up a Page Template – but the WP codex is a good place to go as well.

Good luck!

May 22, 2009 @ 6:37 am

Comment by
Alan

It is extremely annoying trying to figure out what you have going on there when your code spills out over your sidebar links and whatever else.

June 10, 2009 @ 12:01 pm

Comment by
simon

Great article Ryan, how do you get pagination to work with this setup?

June 13, 2009 @ 12:28 am

Comment by
nmarketers

thanks for the info. I wanted to included the newest post of one category into the front page. Now i can do that

August 18, 2009 @ 3:02 am

Comment by
Edward

Thanks for the code. Helps out quite a bit to the PHP challenged crowd. Keep up the good work.

August 31, 2009 @ 8:57 pm

Comment by
Dennis

This is the best. I’ve spent hours trying to figure this out on my own. Not succeeding I turned to Google and landed here.

Thanks champ.

September 4, 2009 @ 6:08 am

Comment by
Stone Deft

Just a thought… why do you need to loop the first one when there is nothing to loop?

And another thought why would WP set up their templates with .php and clutter the template files with ” tags. wouldn’t it be better to set it up with .tpl extensions and some custom tags for the functions …

Hmmm just a thought…don’t go ballistic !!

September 20, 2009 @ 2:39 am

Comment by
Ryan

@Stone Deft: You need to understand what The Loop is in how it relates to WordPress to answer that question. It has to “loop” to call the posts. Though it’s likely possible to load the variables without the need for a while loop, it’s just a simple structure to follow.

Ditto the PHP “tags”. A .tpl extension is just an extension, as are the .php extensions of the WP template files. They’re not actually being run independently from the overall construction of the page. Just rather than creating a proprietary templating language that the developer would need to learn, they use PHP functions.

For anyone that is familiar with PHP, it’s not cluttered at all. And for anyone that isn’t, even if it was a proprietary theming system (or an open source one like Smarty) it would still be “cluttered” to someone unfamiliar with it. At least it adheres to a standard of knowledge that is transferable to a number of other CMS-based system (ie. Drupal or Joomla, both of which are PHP-based — though Joomla tends to use a bit more of a proprietary system of theming).

Who’s going “ballistic !!” ?

September 20, 2009 @ 7:57 pm

Comment by
Stone Deft

@Ryan of course you can do it without the loop here’s how:
$t = get_posts(”numberposts=1″);
setup_postdata($t);
the_title();
//post the contents here etc etc etc…

I still think it’s cluttered. I’ve been developing my own custom built CMS for my clients and as a gorgeous web developer I always separate php from html, separate presentation from logic. That way when a client wants to edit his templates he won’t freak out with the clutter of php codes. Hey vbulletin and phpbb3 is doing it. I always use bTemplate and yes I’m bent in integrating it on my first WP project. Still figuring out hooks though but Ill get there soon.

Anyway WP is a good framework my kudos to all the developers. And please don’t go too ballistic.

you look Great!

September 21, 2009 @ 5:54 pm

Comment by
Stone Deft

Anyway thanks for this:

$the_newer = get_posts(’numberposts=3&offset=1′);

I’ve been googling on how to query the WP DB with an offset. Again you look great!

September 21, 2009 @ 6:00 pm

Comment by
Ryan

@Stone Deft: Ah! Right. Sorry, was caught up in the concept, I didn’t even think about the fact that there’s no reason to loop through a single item.

For my development needs, I find that sep. style from code is enough – it’s not to say that logic from structure (as presentation would really be style, no?) isn’t a fine thing to do, just a step too much for what I’ve found useful. I just try to make themes as flexible as possible, so my clients wont need to touch the code.

As for the get_posts function — if you’re using multiple loops, you might want to look at generating multiple WP_query objects. I think it’s cleaner — and the way I do it now (this post is 2 years old).

September 21, 2009 @ 7:22 pm

Comment by
Tanya

Wow, wonderful gb design. What CMS do you use ?

September 29, 2009 @ 7:01 am

Comment by
Ed

Is it possible to have random posts in WP? They only go in order right now as far as I know.
Thanks.

September 29, 2009 @ 10:09 pm

Comment by
Ryan

@Ed: It sure is. You need to customize the loop a bit though. Simply use any custom way to call the post (get_posts, wp_query, etc.) and use the ‘orderby=rand’ parameter. See more here.

September 30, 2009 @ 7:10 am

Comment by
Ed

Do you have a plugin for doing that also?
Thanks.

October 1, 2009 @ 1:56 am

Comment by
Ed

Do you have a nice plugin for pagination? I like the one Yahoo uses on their pages.
Thanks.

October 23, 2009 @ 9:27 pm

Comment by
Karl Bedingfield

Fantastic coding.

Is there a way this can be adapted to work as a category.php file? So essentially if I click a category link it feeds this layout for the category that is clicked?

Any ideas?

Thank you,
Karl

November 29, 2009 @ 11:28 pm

Comment by
Ed

I think it can be done with the addition of the category.php file. Have not tested this myself though. Neat idea though.

December 1, 2009 @ 12:56 am

Comment by
Carly

Hello Ryan, fab tutorial. It works perfectly for me – EXCEPT tags aren’t showing up now… even though I have called in the function… any ideas? Is this a known issue?

December 2, 2009 @ 6:25 am

Comment by
Ed

@Carly what tags are you referring to?

December 3, 2009 @ 1:05 am

Comment by
Carly

Sorry, in my code I added in to the most newest post ‘get the tags’ tag to show what the post had been tagged with, if that makes sense?

These ones:

http://codex.wordpress.org/Template_Tags/the_tags

if that makes sense?!?!

They’re not displaying…

December 3, 2009 @ 1:16 am

Comment by
Ed

I will try it out and let you know the outcome. It is best to keep experimenting with WP as you learn a lot that way.

December 5, 2009 @ 5:07 am

Comment by
ocwnybsvcc

MaHwgT trffsxnjxgyy, [url=http://qfkrywlajkrd.com/]qfkrywlajkrd[/url], [link=http://woxghflvcbla.com/]woxghflvcbla[/link], http://jcahmdhdohhh.com/

February 1, 2010 @ 5:48 pm

Comment by
Ed

Not sure if the above post makes any sense.

February 2, 2010 @ 4:04 am

Comment by
bonz

The three snippets only differ on how the posts are displayed but not with respect time? You have three vars, the newest, newer, and new, but they show the same first post. It should be from the latest to the oldest which means the 2nd snippet should start with 2nd latest post and the 3rd should pick up where the 2nd ended. woot. This is useless. Thanks anyway.

February 3, 2010 @ 6:49 pm

Comment by
Ed

@bonz there is a timestamp in WP that identifies the times and classifies them as new, newer and newest.

February 4, 2010 @ 4:12 am

Comment by
Raymonn

Good stuff dude! I really appreciate it. You’ve saved me tons of time.

February 26, 2010 @ 4:48 am

Comment by
Ed

@Raymonn it is definitely a great site. I learnt a lot from it too. Very helpful indeed.

February 27, 2010 @ 3:26 am

Comment by
Rob Cubbon

Very, very useful post. I used this code to do a “magazine” type home page where the newest post was a featured article, the next four were shown with thumbnails and the rest were just listed. Here it is: http://www.fcdynamos.com
I have a problem now where the second page of posts is showing up the same as the first page. I’m going to ask at the WP forum … but if anyone has any ideas…

March 17, 2010 @ 6:19 am

Comment by
Ed

Very nice looking site. Have you set your Home Page to the Front Page by any chance?

March 18, 2010 @ 3:16 am

RSS feed for comments on this post. TrackBack URL

Leave a comment

PIGEONholed

RECENTLYspoken

  • voiture location Said: the link is broken plz fixed.thank you for this topic
  • Ed Said: Very nice looking site. Have you set your Home Page to the Front Page by any chance?
  • Jo Said: Hi, thank for plugin, it is Greit! Will be possible to use diferent Optional Front Page Title for diferent...
  • masazumi kawauchi Said: give me virus! m_kawauchi@enzantrades.jp
  • Rob Cubbon Said: Very, very useful post. I used this code to do a “magazine” type home page where the...

BLOGroll

PASTposts

BADGEpatch

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