How to Display the First WordPress Post in Full on the Home Page

By default, a WordPress theme like Twenty Fifteen displays each and every post in full on the home page of a blog. While this might suit a site with somewhat short articles, it poses a problem for those with long form texts. The home page can take a long time to load and the reader can’t easily get a quick overview of all the posts written. Many people have designed their blog themes in such a way that only the first (and latest) article is displayed in full. The rest of them show only excerpts or the first few lines.

This solution is especially effective if you’re using a grid like layout on your front page. Since a blog’s latest post is usually the most important at any given time, we’d like to retain the full article, but when it gets pushed down as a result of new content, only the excerpt should show along with the title.

But this simple design idea can be a bit tough to implement especially when we have so many different themes to consider. With the introduction of WordPress 3.0.1, a new way of calling pages called “get_template_part” was introduced. So if you’re not familiar with how it works, you may not even be able to find the WordPress loop in the first place! However, after some fiddling around I managed to get it to work in the following code below.

Show Post Summaries for Subsequent Posts

The first thing you’ll notice in your theme’s index.php file (if your WordPress installation is up-to-date), is that you don’t see any page rendering code. The familiar “loop” structure with the “have_posts” conditional tag is still in place, but nothing to actually generate the page HTML. Instead, you will most probably see something like this:

get_template_part( 'content', get_post_format() );

This is simply a reference to another PHP page – in this case something starting with “content” and ending with the post type. For us since we are dealing with the homepage, this is simply called “content.php” which contains the code for pages that show both a single post as well as multiple ones. So open up content.php in your WordPress Appearance editor and locate the content between the following two lines:

<div class="entry-content">
 	<?php
.
.
.
wp_link_pages( array(

Take a backup of your existing content.php page in case something goes wrong, and paste the following code between the above two markers:

if ($wp_query->current_post == 0) {
 /* translators: %s: Name of current post */
 the_content( sprintf(
 __( 'Continue reading %s', 'twentyfifteen' ),
 the_title( '<span class="screen-reader-text">', '</span>', false )
 ) );

} else {

 /* translators: %s: Name of current post */
 the_excerpt( sprintf(
 __( 'Continue reading %s', 'twentyfifteen' ),
 the_title( '<span class="screen-reader-text">', '</span>', false )
 ) );

}

What I’m doing here is using the variable called $wp_query->current_post which maintains a running counter of the post number being displayed starting at zero. So the first thing I do is check what the index of $wp_query->current_post is and if it’s zero, I leave the original quote intact by calling “the_content”.

If on the other hand, it’s something other than the first post, I simply replace “the_content” with “the_excerpt” instead leaving everything else the same. Once again, make sure that you paste the above code exactly between the lines I’ve indicated as shown in the screenshot below:

And that’s it! The next time I load my homepage, the first post will be displayed in full as intended whereas the rest of them will show excerpts instead. It’s difficult to show the result in the screenshot, but I’ve included one presenting a snippet of a subsequent blog post instead of the whole thing.

You can tweak this code so as to show only the first two posts in full leaving the rest of them truncated if you want. Simply change the if condition affecting $wp_query->current_post. This allows you to customize your homepage depending on the style of your blog and the length of your articles.