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

How to Display Excerpts on your Blog Homepage Instead of the Full Posts
This question is geared towards WordPress blogs.

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?

Note: I will show you two methods. Both require you to edit your theme files in some way, whether it’s a theme file directly, or the functions.php file inside your theme directory.
I highly recommend you back up any files you edit in case you need to revert your changes.

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.

WordPress Featured Image

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

If you’re using a child theme or couldn’t find the_content() in your index.php file, click here

In this section, we don’t edit any of the theme’s template files. Instead, we add code to the functions.php file. So login to your WordPress admin panel and navigate to Appearance » Editor. On the right-hand-side, look for Theme Functions (functions.php) and click on it.

Scroll down to the very bottom, and just ABOVE the closing ?> tag, paste this bit of code:

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(']]>', ']]&gt;', $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;
}

This is a modified bit of code from JustinTadlock.com

Okay, there’s a lot going on here so let me explain what it does.

  1. We check to see if we’re on the homepage, an archive page, or the search page. If we are, then we proceed with the rest of the code. If not, then we just return the full post.
  2. We check to see if an excerpt is manually set. If so, we return that. If not, we proceed with the rest of the code.
  3. If no excerpt is set, we create one by grabbing the first 55 characters of the post (you can edit this amount to whatever you want, it’s on the line that says $excerpt_length = 55;
  4. We strip the excerpt of all tags, etc. so that it’s plain text.
  5. If a featured image exists, we get the thumbnail version of it and align it to the left. If you want to remove this feature, remove the code between the lines //Adding the thumbnail version of the featured image and //end thumbnail.
  6. Then we display everything: the thumbnail on the left, the excerpt, and a link to the post that says “read more »”. If you want, you can edit the “read more” text to something else.

Once you save your functions.php file, this should go into effect immediately!

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!

Photo of Ashley
I'm a 30-something California girl living in England (I fell in love with a Brit!). My three great passions are: books, coding, and fitness. more »

Don't miss my next post!

Sign up to get my blog posts sent directly to your inbox (plus exclusive store discounts!).

You might like these

22 comments

    1. I think it is possible, but I haven’t figured it out yet. Blogger is a disgusting jumbled mess to edit and so far everything I’ve tried hasn’t worked! Sorry! Hopefully I’ll figure it out eventually and then I’ll post.

    1. Yeah this is a good manual method. 🙂 I believe that method inserts ““, which basically cuts off your post and creates an excerpt from there. But my method is good for lazy people who keep forgetting to do stuff like that and want it all automatic. 😀

      Thanks for sharing!

      1. In my case, I have a certain amount of stuff I want above the cut-off so it’s the best way for me. But if I wasn’t so particular about it, I would totally use the automatic method. I just have issues with how I like things to look. ;D

  1. Does this only apply to a self hosted site? I can’t seem to find index.php file. The only thing that looks remotely like that is css page…

    1. Sorry, it does only apply to self-hosted! On free WordPress you can’t edit your theme other than changing CSS.

  2. i want show full post in my homepage but i have uploaded a blogger templet which shows read more option i don’t want it how to solve it pls help and thanx for your last replay on nivio slider post

  3. Great tutorial (as always).

    Either I missed something or there is small mistake for option 1 – in code for displaying thumbnail, you never echo-ed the value of variable $thumbnail_img – so the html code for thumbnail is not displayed on page.

  4. Hi,

    How would I display One main full size featured image with the excerpt underneath on my homepage. This seems to be most common blog layout I’ve encountered but can’t find how to do it anywhere.

    Thanks

  5. I am pretty sure I love you!!! I have been searching for DAYS on how to show just an exert on my homepage. The theme I am using was overriding the settings in WordPress settings>reading. Even with the summary box checked it still wasn’t working. I did have to go into a different file as there was basically nothing in the index.php. This theme has a content-blog.php file that I found the code under. Thank you for breaking this down and giving me the blocks to find what I needed! You’re my favorite person forever!

    1. I’m glad you got it working! 🙂

      Just to clarify, the option in Settings > Reading isn’t for the blog. It’s for the RSS feed only, which is a different thing. 🙂

Recent Posts

    Random Posts