Better WordPress Post Excerpt

March 21st, 2010PHP, Tutorials, Wordpress, WordPress Tutorials1 comment

While working on a site for a client, I was struggling with how best to control the display of recent posts using the_excerpt();, especially when I wanted one section on a page to display the excerpt in this way, and another section on the same page to display them in that way.

Aside from writing multiple custom excerpt functions in functions.php, I found this plugin: The Excerpt Re-reloaded

It makes a vast improvement on the default wordpress excerpt display, which is anything but spectacular, and provides lots of customization options.

Default usage:

<?php the_excerpt_rereloaded(); ?>

This displays the excerpt the same as

<?php the_excerpt(); ?>

Now add in a few options and you get something much better:

<?php the_excerpt_rereloaded('80','More','<strong><em>','div','yes'); ?>

This will display an excerpt of 80 words with a link “more” at the end that is formatted as

<div class="more"><p><a href="#etc">More</a></p></div>

The html tags “strong” and “em” are preserved, and any text smilies, such as
: – )

are converted to graphic images.

Another example:

<?php the_excerpt_rereloaded('100','More','all','plain','no'); ?>

Displays an excerpt of 100 words, preserves all html tags, does not place the “more” in additional tags, as in the above example, and text smilies do not get converted.

So how do I really use this?

This plugin provides a really easy way to spice up your themes. To expand more on the example I started with, the Excerpt Reloaded makes it really easy to create a recent posts section that features the newest recent post.

Take a look at the following code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

<div id="latest">
	<h2 class="title">Latest News</h2>
	<?php
		query_posts('showposts=1&offset=5'); ?>
		<?php if (have_posts()) : ?>
			<?php while (have_posts()) : the_post(); ?>
				<div class="entry">
					<div class="title-info">
						<h2><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>
						<small class="latest"><?php the_time('F jS, Y') ?> by <a href="<?php the_author_url() ?>"><?php the_author(); ?></a> in <?php the_category(', '); ?></small>
					</div>
 
					<?php the_excerpt_rereloaded('80','More','all','plain','no'); ?>
 
					<p class="postinfo"><?php the_tags('Tags: ', ', ', '<br />'); ?> Posted in <?php the_category(', ') ?> | <?php edit_post_link('Edit', '', ' | '); ?>  <?php comments_popup_link('No Comments &#187;', '1 Comment &#187;', '% Comments &#187;'); ?></p>
				<div class="clear"></div>
			</div>
		<?php endwhile; ?>
		<?php endif; ?>
</div>
<div id="recent">
	<h2 class="title">Recent Posts</h2>
	<?php
		query_posts('showposts=3&offset=6');
		global $more;
		// set $more to 0 in order to only get the first part of the post
		$more = 0; ?>
		<?php if (have_posts()) : ?>
			<?php while (have_posts()) : the_post(); ?>
				<div class="entry">
					<h2><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>
					<small class="recent"><?php the_time('F jS, Y') ?></small>
					<?php the_excerpt_rereloaded('40','<div><br>','plain','no'); ?>
					<p class="alignright"><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>">Read More</a></p>
					<div class="clear"></div>
				</div>
		<?php endwhile; ?>
		<?php endif; ?>
</div>

The first section “latest” is for the “featured” post, and the second “recent” section is for the slightly older recent posts. For the featured section we want to preserve html tags, in particular “img” tags, and we also want a slightly longer excerpt of 80 words.

For the second section we don’t want “img” tags to be preserved, so we just preserve “div” and “br” to allow us to control a little bit of formatting.

The screenshot below shows exactly what the above code accomplishes (click for larger view).

Enjoy!