The_excerpt(). One powerful function.

Wordpress have a number of ways of displaying content. Most people don’t know it, but with simple methods you could actually display your posts the same way as any decent newspaper or magazine would. I mean those pictures above the title of the content, or a picture in the sidebar - as an example. The function the_excerpt() makes this possible.

What is the_excerpt?
Wordpress have two functions for getting content and displaying it on your blog:

• the_content() - this string makes wp get the content from a post. That means everything written in the post editor.
• the_excerpt() - makes wp display the content in the “Optional excerpt”-area below the post editor.

99,99999% of all themes makes use of the_content function, and just that. Normally, this works just fine, but if you want something more “newspaper” or “magazine” - you could use the_excerpt function to control use of pictures in your blog. You could easily use the_excerpt function to get something like the picture above, which is taken from NYTimes.com. Using images like this would really make your blog stand out, no question about it.

So, how do I do it?
Easy. Just add the code-snippet <?php the_excerpt(); ?> to your template files on the location where you want the excerpt to display. Remember that WP will display a excerpt no matter what, even if the optional excerpt area is empty (then it will display a excerpt of the content). So, it might be wise to just use this function on a special category - example: Use this function on your posts in the category “Featured” or something like that.

But, how do I limit the_excerpt to a special category?
Easy. Using php-programming you could say to Wordpress that “if this post is in category featured you should display the excerpt”:

<?php if ( in_category(’33′) ): ?>
<?php the_excerpt(); ?>
<?php endif; ?>

Using this code WP will display the excerpt if the post is in the category with ID 33. If the post is in another category, this code will simply be ignored.

How you choose to use this function is of course up to you and the needs you have, but to display posts in the same way as a magazine would, you could set up your loop like this:

The code would look something like this:

<?php if (have_posts()) : ?>

<?php while (have_posts()) : the_post(); ?>

<?php if ( in_category(’33′) ): ?>
<?php the_excerpt(); ?>
<?php endif; ?>

<?php the_title(); ?>

<?php the_content(); ?>

<?php endwhile; ?>

<?php else : ?>

<?php endif; ?>

One final thing:
Both the_content() and the_excerpt() exists in rss-versions. The rss-versions comes completely without any formatting, which could be useful some times. Making use of the rss-version of the_excerpt you could display let’s say a picture without any space around it or border or stuff like that. If you use the_excerpt as it is, WP will display the content inside paragraphs, but these are removed in the rss-version. To call the rss-version of the excerpt just use <?php the_excerpt_rss(); ?> (the content-rss-version is <?php the_content_rss(); ?>)

I’m currently working on a celeb/gossip site (in Norwegian) that will make use of both these functions. Using WP like this, I could easily make the site look much more “fancy” with big pictures in good places, and not just displaying images inside posts.

It will look very nice when I’m done with it.

Update 20.11.2007:

Kenneth Dreyer asked me in a comment on this post how you can automatically resize images to make them fit the layout of your blog. I answer him here in this post, because it could be useful information for everyone.

If you look at the layout of my new blog agurkposten.no, you’ll see that all images are the same width in the content area.

It’s not difficult to set this up actually. All you need to do is put the images in a special div.class, where you specify what width the images in that div.class should have in the css-stylesheet.

Normally, you can’t do this in the content area, beacause the function will be applied to all images in a div.class - but if you use the excerpt()- function - you could easily control which pictures should be resized automatically.

Here is how I did it:

First, the huge image above the title is a image I’ve put in the excerpt-area in the wp-editor. That is important. Then I’ve just put the_excerpt() in a own div.class into the page template. The title and the excerpt of the content below are in different div.classes. The code for the excerpt area is:

        .bilde380 {
clear: both;
overflow: hidden;
background: transparent;
width: 468px;
font-family: Arial;
padding-top: 0;
padding-bottom: 5px;
padding-left: 0;
padding-right: 0;
margin-top: 0;
margin-bottom: 0;
margin-right: auto;
margin-left: auto;
}

.bilde380 img {
clear: both;
overflow: hidden;
background: #ffffff;
width: 466px;
font-family: Arial;
padding-top: 0;
padding-right: 0;
padding-left: 0;
padding-bottom: 0;
margin-top: 0;
margin-bottom: 0;
margin-right: auto;
margin-left: auto;
border: 1px solid #000000;
}

Ok, that code goes in the css-stylesheet called style.css. After that you have to add a code to your page template (index.php and single.php), with the excerpt function, like this:

<div class=”bilde380″>
<a href=”<?php the_permalink() ?>” rel=”bookmark” title=”<?php the_title(); ?>”><?php the_excerpt_rss(); ?></a>
</div>

Mark that I’ve used the excerpt_rss(); function to get a unstyled version of the excerpt. If I had used just the excerpt(); function - WP would have wrapped the excerpt image inside a padding specified in the stylesheet - in plain english: the image would be wrapped in a <p> tag.

Was this understandable??