Display HTML in your excerpts

In WordPress terms, an excerpt is a short summary of your post that can be added in places like your home page, your archive or category pages, or even in a sidebar or footer widget.

WordPress has a few ways of creating and displaying an excerpt on your site.

The easy option is to add the ‘Read More’ button to break the text wherever you want, which will add a link to the full post:

the read more icon

While this displays any formatting you’ve added to your post, the drawback to this option is that if you have a design built around excerpts of a specific length, this may break that design if your text is too short or too long. Also note here that adding this read more button doesn’t affect what’s being sent in your feed. If you want only the excerpt to appear in your feed, change this in Settings > Reading.

You can also manually create an excerpt for each post by adding it to the Excerpt box. (If you don’t see this option on your edit post page, click the ‘Screen Options’ button at the very top of the page and make sure that Excerpt is checked.) You can add your own HTML here as well.

Most of us, however, prefer to let this all happen automatically. WordPress generates a 55-word excerpt that can be called using code added right in to your theme. So, if your design calls for an excerpt in those certain places, you don’t need to do anything, it will be added for you. That said, while automation is almost always a good thing, the drawback to adding the excerpt this way is that WordPress also strips out any HTML you may have added to that text. So those links you added? Or the bold and italic styling in your content? None of that will appear in this excerpt.

But we can have the best of both worlds here – automation and HTML in our content. To do this, it’s just a bit of code added to your theme’s functions.php.

function cpl_html_excerpt($text) { 
    global $post;
    if ( '' == $text ) {
        $text = get_the_content('');
        $text = apply_filters('the_content', $text);
        $text = str_replace('\]\]\>', ']]>', $text);
        /* Add a list of any HTML tags you want to include in the excerpt here, 
           making sure there are no spaces in that list. 
           Below we've added the tags for the line break, links, italics, and bold. */
        $text = strip_tags($text,'
'); /* Want to display a different number of words? Change that here. */ $excerpt_length = 50; $words = explode(' ', $text, $excerpt_length + 1); if (count($words)> $excerpt_length) { array_pop($words); array_push($words, '[...]'); $text = implode(' ', $words); } } return $text; } /* remove the default filter */ remove_filter('get_the_excerpt', 'wp_trim_excerpt'); /* replace it with your own filter */ add_filter('get_the_excerpt', 'cpl_html_excerpt');

This will take your excerpts from this:
excerpt without HTML

to this:

excerpt with HTML

Laurie M. Rauch

Heya! I'm Laurie M. Rauch and I play with code. I run Code Diva, where I specialize in valid, semantic HTML5 and CSS3 and WordPress Development and Coaching. Whether you're a design agency who needs a developer or a blogger or small business who needs help getting their site up and running, I can help. I'm available for freelance work, and I'd love to hear from you.

Get in on the good stuff

Sign up for my newslettter and get access to extra tutorials and resources.

Leave your thoughts

We love to hear your thoughts. All comments must follow our comment policy, so please practice considerate commenting etiquette and play nice.