WordPress Excerpt – How to Style It

WordPress Excerpt - How to Style It

WordPress excerpts are most useful when you need to display a series of posts in a single page. This often occurs in your –

1. WordPress blog homepage – your most recent posts.
2. Category page – All posts belonging to the selected category.
3. Tag page – All the posts containing the selected tag.
4. Archive page – All posts published during the selected date.
5. Search results page – All posts and pages matching the search query.

You can set the maximum number of posts that are shown in these pages by going to Settings >> Reading and changing the number on the Blog pages show at most option.

When multiple posts are shown, it is easier for your readers to find what they want by only giving them a summary of each post rather than showing them the entire post. You can enable this post summary functionality by using the WordPress the_excerpt command.

Here is an example blog with styled WordPress excerpts.

Example blog with styled WordPress excerpts.

1. Enable WordPress Excerpts

This is something that may already be supported in your WordPress theme, but if not, you can enable WordPress excerpts by doing the following –

Go into the index.php file of your theme. Find the line that contains the WordPress command

the_content

.

For example, in the ‘default’ theme you have the lines below in the theme index.php file –

<div class="entry">
	<?php the_content('Read the rest of this entry &raquo;'); ?>
</div>

Replace the line

<?php the_content('Read the rest of this entry &raquo;'); ?>

with the code below –

<?php 
    if (is_single() || is_page()) 
         the_content('Read the rest of this entry &raquo;');
    else {
         the_excerpt();
    }
?>

This will style your blog so that it only shows text summaries when there are multiple posts, but shows the entire document for single posts or single pages.

You can further change the length of your post summaries by following these WordPress codex instructions.

2. Add Background Images to Your WordPress Excerpt

You can pretty up your WordPress excerpts by adding in background images to the top, bottom, or side of each excerpt. This is done by adding a background image entry to certain standard WordPress classes.

The exact class names you need to use will be greatly dependent on your current WordPress theme. However, there are certain standards that are adhered to by most themes.

In particular, each post is usually encapsulated in a post class. If that post is an excerpt, it will further be encapsulated within an excerptcontent class.

.excerptcontent {
	background: url("side_graphic_URL.jpg") top center repeat-y; border: none; 
}	

.post {
	background: url("top_graphic_URL.jpg") 90% 0% no-repeat; border: none; 
}

Above, we set a side border graphic and a top background graphic for our excerpts. Just add the above styles into the style.css file of your current WordPress theme.

3. Add Thumbnail Images to Your WordPress Excerpt

To add thumbnail images to our WordPress excerpts, we need a function that extracts the first image from our posts. The get_first_image function below was obtained from the WordPress.org support forum.

function get_first_image() {
	global $post;
	$first_img = '';
	$output = preg_match_all('/<img.+src=[\'"]([^\'"]+)[\'"].*>/i', $post->post_content, $matches);
	$first_img = $matches [1] [0];

	return $first_img;
}

Just add this function to your theme functions.php file.

Next we need to call this function from our WordPress theme. Add the code below, right above the_excerpt command, in your theme index.php file.

?>
        <div class="alignright" style="margin:20px;">
             <a href="<?php the_permalink() ?>">
             <img src="<?php echo get_first_image();?>" width="200" height="200"/>
             </a>
       </div>
<?php

This adds a right-aligned image to each post excerpt, which we size at 200px by 200px. The code in your index.php file will now look like this –

<div class="entry">
<?php 
    if (is_single() || is_page()) 
         the_content('Read the rest of this entry &raquo;');
    else {
?>
        <div class="alignright" style="margin:20px;">
             <a href="<?php the_permalink() ?>">
             <img src="<?php echo get_first_image();?>" width="200" height="200"/>
             </a>
       </div>
<?php

         the_excerpt();
    }
?>
</div>

4. Resize the Images in Your WordPress Excerpt

However, the results are still not exactly what we want because the aspect ratio of the images are not maintained. This may make some images look stretched or compressed.

Here is a simple function to resize the image and maintain its aspect ratio. Add the code to your theme functions.php file. –

function url_exists($url) {
	$headers = wp_get_http_headers($url);
	
	if (!is_array($headers)) :
		return FALSE;
	elseif (isset($headers["content-type"]) && (strpos($headers["content-type"],"image") !== false)) :
		return TRUE;
	else :
		return FALSE;
	endif;
}

function resize_image($image, $alt, $newwidth, $newheight) {
	if (!file_exists($image) && !url_exists($image)) return '';
	list($width, $height, $type, $attr) = getimagesize($image);
	if (!$width || !$height) return '';

	if ($newwidth) 
		$newheight = intval($newwidth/$width * $height);
	else
		$newwidth = intval($newheight/$height * $width);
	return '<img src="' . $image . '" width=' . $newwidth . ' height='. $newheight . ' alt=' . $alt . '/>';
}

• $image is the image file or url.
• $alt is the alternate text to use.
• $newWidth and $newHeight are the new width or height you want to resize the image to. Only one of these parameters will be used to resize the image. If $newWidth = 0 then $newHeight will be used to resize the image. Otherwise, $newWidth will be used.

The resize image function will return the HTML string for the input image, at the proper size. If the image cannot be found, a NULL string is returned.

Finally you just need to call this resize_image function from your theme. Replace the previous call to get_first_image in your index.php file with the code below.

?>
        <div class="alignright" style="margin:20px;">
           <a href="<?php the_permalink() ?>">
              <?php echo resize_image(get_first_image(), get_the_title(), 200, 0); ?>
           </a>
        </div>
<?php

Here is what the final index.php file looks like, instead of the original the_content command.

<?php 
    if (is_single() || is_page()) 
         the_content('Read the rest of this entry &raquo;');
    else {
		?>
        <div class="alignright" style="margin:20px;">
           <a href="<?php the_permalink() ?>">
              <?php echo resize_image(get_first_image(), get_the_title(), 200, 0); ?>
           </a>
        </div>
		<?php
         the_excerpt(); 
    }
?>		

WordPress Excerpt - How to Style It