How to Display Excerpts on your Blog Homepage Instead of the Full Posts

This week’s question is:

I’d love a simplified tutorial on setting up a front page that automatically grabs the images and words from your recent posts with a read more button that takes readers to the whole post.. All the ones I find are SO complicated, lol. Or a point in the right direction for a good plugin that will make it easier to set up.
Bree

Even though how to do this is really easy, it’s actually very difficult to write a tutorial for it because all themes are set up differently. Making this change does require you to edit your theme files, but since all themes are a little different, the way to get this done is a little different for everyone!

First, I’m going to talk about why we should even want to do this.

Why is it better to show an excerpt on the homepage instead of the full post?

1. It’s better for SEO

Google penalizes sites that have duplicate content and by showing the full post on your homepage (and/or archives), you are showing every single post on your blog at least twice. Google doesn’t like that, and as a result, you might not rank as well as other blogs in search engines!

2. It makes your blog look more organized

Having the full post on your homepage and/or archive pages makes it very difficult for readers to skim your posts. Sometimes I don’t want to read all of your posts; I want to pick and choose which ones interest me. But if you show the full post on your homepage then I have to scroll through everything. It can get a little annoying!

So, how do we make this happen?

I’m going to say it now: if you’re using a WordPress child theme, skip down to the next section, because this method most likely won’t work for you!

Login to your WordPress admin area and navigate to Appearance » Editor. On the right-hand-side, look for Main Index Template (index.php) and click on it. (If you don’t see that file, try skipping to the next section.)

Scroll down a ways, until you find a line that looks like this:

the_content();

Or yours might look a little differently, with text in between the brackets, like this:

the_content('Read more...');

We are going to erase that line, and paste this in its place:

the_excerpt();

Note: This code needs to be inside <?php tags. If you’re not sure, or if it’s not working, try adding <?php beforehand, and ?> afterwards.

That’s it! This will change your full post into only the excerpt.

I want a button that says “Read More” or something similar!

By default, there won’t be any buttons or text that say “Read More” or “Click here to keep reading”. You have to add this in yourself! Right after the line we just added (the_excerpt();), add in this line:

echo '<a href="' . get_permalink() . '" class="read-more">Keep Reading &raquo;</a>';

Note: This code needs to be inside <?php tags. If you’re not sure, or if it’s not working, try adding <?php beforehand, and ?> afterwards.

You can change the Keep Reading » text to whatever you want it to say. The link will always take the person to the full post!

But I want a thumbnail image next to the post!

Before you read this section, make sure you have completed the previous steps and that everything is working as expected.

In order to display a thumbnail image, you have to be utilizing the “Featured Image” feature of WordPress. And if you are utilizing it, it’s important that the featured image isn’t already being displayed on the page. If it is and if you want to edit it so that it shows the thumbnail version and not the full image, it’s still possible but I would prefer that you e-mail me directly because it requires editing code that is specific to your theme only. This section of the tutorial assumes that you DO use featured images, but right now there is NO featured image being displayed at all on your homepage.

So, let’s get started!

We need to add a few lines of code before the the_excerpt(); line that we added already. Go ahead and add this bit of code:

//Adding the thumbnail version of the featured image
if(has_post_thumbnail($post->ID)) {
	$featured = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), 'thumbnail' );
	$img = $featured[0];
	echo '<a href="' . get_permalink() . '" title="' . the_title_attribute('echo=0') . '"><img src="' . $img . '" alt="' . the_title_attribute('echo=0') . '" class="alignleft thumbnail-image" /></a>';
} //end thumbnail

Note: This code needs to be inside <?php tags. If you’re not sure, or if it’s not working, try adding <?php beforehand, and ?> afterwards.

Basically what we’re doing here is checking to see if a featured image exists. If not, we don’t display anything. If one does exist, we grab the thumbnail version of it (the small, cropped version), and display it aligned to the left.

Alternative Method

add_filter('the_content', 'my_excerpts');
function my_excerpts($content = false) {

// If is the home page, an archive, or search results
	if(is_front_page() || is_archive() || is_search()) :
		global $post;
		$content = $post->post_excerpt;

	// If an excerpt is set in the Optional Excerpt box
		if($content) :
			$content = apply_filters('the_excerpt', $content);

	// If no excerpt is set
		else :
			$content = $post->post_content;
			$content = strip_shortcodes($content);
			$content = str_replace(']]>', ']]>', $content);
			$content = strip_tags($content);
			$excerpt_length = 55;
			$words = explode(' ', $content, $excerpt_length + 1);
			if(count($words) > $excerpt_length) :
				array_pop($words);
				array_push($words, '...');
				$content = implode(' ', $words);
			endif;
			$thumbnail_img = '';
			//Adding the thumbnail version of the featured image
			if(has_post_thumbnail($post->ID)) {
				$featured = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), 'thumbnail' );
				$img = $featured[0];
				$thumbnail_img = '<a href="' . get_permalink() . '" title="' . the_title_attribute('echo=0') . '"><img src="' . $img . '" alt="' . the_title_attribute('echo=0') . '" class="alignleft thumbnail-image" /></a>';
			} //end thumbnail
			$content = $thumbnail_img . '<p>' . $content . '<a href="' . get_permalink() . '">read more &raquo;</a></p>';

		endif;
	endif;

// Make sure to return the content
	return $content;
}

Need extra help? Can’t get it working?

If you have followed this guide exactly and still can’t get something working the way you want, I’m happy to help but I will most likely require access to your admin panel. As I explained at the beginning, every single theme is different. All themes have slightly different code and slightly different ways of doing things. So it’s tough for me to account for all angles and all methods. If you need that extra help, post here or e-mail me, but be prepared to give me admin panel access temporarily if you want me to sort it out for you!

WordPress Web Host Survey

On another note, I’m conducting a survey on web hosts. If you use WordPress.org I’d love it if you would fill out my survey about your web host! It’s just about whether you’re happy with the host/service. I’m hoping to compile the results so I can write a post recommending web hosts to new WordPress converts!