WordPress the_excerpt show only first paragraph

and published
get the first paragraph as an excerpt for wordpress

The the_excerpt is an awesome WordPress hook for us lazy bloggers! It means we don’t have to use the read more button! Yay! Sadly the the_excerpt isn’t smart enough to know where we want to cut and by default will snip the first paragraph at only 55 words, and to make matters even worse WordPress will stick an ugly […] right at the end of a broken sentence! Completely ruining our website design! Well kinda…

Don’t you just wish there was a better way? Well there is! In this article I will provide you with the code that will allow you to make good use of wp_trim_excerpt and make a custom filter that will get the first paragraph as an excerpt for WordPress.

Before we get absolutely filthy dirty in code I recommend that you make a WordPress backup. Once you have done a backup you can then proceed to pick a method that will suit your website design the best.

Once you have picked a method you will need to copy and paste the code into your functions.php file which can be accessed by going to the WordPress dashboard and navigating to:

  • Appearance
    • Editor
      • Theme Functions (functions.php)

You will then need to copy and paste the code from the chosen method, ensuring that you paste the php code after “<?php” and before “?>”

Method A1 — Grab first paragraph and images

function awesome_excerpt($text, $raw_excerpt) {
    if( ! $raw_excerpt ) {
        $content = apply_filters( 'the_content', get_the_content() );
        $text = substr( $content, 0, strpos( $content, '</p>' ) + 4 );
    }
    $text = preg_replace("/<img[^>]+\>/i", "", $text); 
    return $text;
}
add_filter( 'wp_trim_excerpt', 'awesome_excerpt', 10, 2 );

Method A2 — Grab first paragraph, images and add read more button

function awesome_excerpt($text, $raw_excerpt) {
    if( ! $raw_excerpt ) {
        $content = apply_filters( 'the_content', get_the_content() );
        $text = substr( $content, 0, strpos( $content, '</p>' ) + 4 );
    }
    $buttonmore = '<p><a href="'. get_permalink($post->ID) . '"> Read the full article...</a></p>';
    return $text . " " . $buttonmore;
}
add_filter( 'wp_trim_excerpt', 'awesome_excerpt', 10, 2 );

Method B1 — Grab first paragraph of text and ignore images (great for people using featured images)

function awesome_excerpt($text, $raw_excerpt) {
    if( ! $raw_excerpt ) {
        $content = apply_filters( 'the_content', get_the_content() );
        $text = substr( $content, 0, strpos( $content, '</p>' ) + 4 );
    }
    $text = preg_replace("/<img[^>]+\>/i", "", $text); 
    return $text;
}
add_filter( 'wp_trim_excerpt', 'awesome_excerpt', 10, 2 );

Method B2 — Grab first paragraph of text, images ignored and add read more button

function awesome_excerpt($text, $raw_excerpt) {
    if( ! $raw_excerpt ) {
        $content = apply_filters( 'the_content', get_the_content() );
        $text = substr( $content, 0, strpos( $content, '</p>' ) + 4 );

    }
    $text = preg_replace("/<img[^>]+\>/i", "", $text); 
    $buttonmore = '<p><a href="'. get_permalink($post->ID) . '"> Read the full article...</a></p>';
    return $text . " " . $buttonmore;
}
add_filter( 'wp_trim_excerpt', 'awesome_excerpt', 10, 2 );

Method C1 — Grab first TWO paragraphs of text, images ignored and add read more button


function awesome_excerpt($awesomeness_excerpt) {

    global $post;
    $raw_excerpt = $awesomeness_excerpt;
    
    if ( '' == $awesomeness_excerpt ) {
        $awesomeness_excerpt = get_the_content('');
        $awesomeness_excerpt = strip_shortcodes( $awesomeness_excerpt );
        $awesomeness_excerpt = apply_filters('the_content', $awesomeness_excerpt);

        $awesomeness_excerpt = "<p>$awesomeness_excerpt</p>";
        $wanted_number_of_paragraph = 2;
        $tmp = explode ('</p>', $awesomeness_excerpt);
        for ($i = 0; $i < $wanted_number_of_paragraph; ++$i) {
            if (isset($tmp[$i]) && $tmp[$i] != '') {
                $tmp_to_add[$i] = $tmp[$i];
            }
        }

        $awesomeness_excerpt = implode('</p>', $tmp_to_add) . '</p>';
        $awesomeness_excerpt = str_replace(']]>', ']]<', $awesomeness_excerpt);
        $excerpt_end = '<a href="'. get_permalink($post->ID) . '"> Read the full article...</a>'; 
        $excerpt_more = apply_filters('excerpt_more', ' ' . $excerpt_end); 

        $awesomeness_excerpt .= $excerpt_end;
        return $awesomeness_excerpt;
    }
    return apply_filters('awesome_excerpt', $awesomeness_excerpt, $raw_excerpt);
}
endif;
remove_filter('get_the_excerpt', 'wp_trim_excerpt');
add_filter('get_the_excerpt', 'awesome_excerpt');

Disable WordPress shortcodes in the_excerpt

It’s worth noting that because we are applying the same filters as the_content hook, your shortcodes will be executed with the_excerpt. We can disable WordPress’s do_shortcode by using strip_shortcodes simply replace

From this:

$content = apply_filters( 'the_content', get_the_content() );

To this:

$content = apply_filters( 'the_content', strip_shortcodes( get_the_content() ) );

Style the read more button with Bootstrap or Foundation

If you are using a responsive framework for your website design, such as Bootstrap or Zurb Foundation then you can add styling to the button by simply attaching a class to the a href link.

Bootstrap
$buttonmore = '<p><a class="btn btn-default" href="'. get_permalink($post->ID) . '"> Read the full article...</a></p>';

If you want to float the button right simply use class=”btn btn-default pull-right”

Zurb Foundation
$buttonmore = '<p><a class="button" href="'. get_permalink($post->ID) . '"> Read the full article...</a></p>';

If you want to float the button right simply use class=”button right”

Direct access to functions.php

Editing the functions.php incorrectly can stop your site from functioning, ensure that you have direct access via SFTP or an cPanel type file manager for easier recovery.

Leave a Reply

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

16 Responses to “WordPress the_excerpt show only first paragraph”

  1. tukang indonesia

    how to show first paragraph until third paragraph with the_excerpt function?

    Reply
    • Hey Tukang,

      You certainly can, I’ve added an alternative method C1 which will allow you to define how many paragraphs you would like.

      Enjoy!

      Reply
  2. Scot Lee

    Good web site you have got here, it is difficult to find high-quality writing like yours these days.

    Reply
  3. Tip… don’t skip the backup step! as I accidentally deleted functions.php, but lucky enough I had one backed up from last year but took me over an hour to interment code that I had added since! great work, thanks.

    Reply
  4. Seemly

    Method C1 ; This throws a syntax error when in pasted in to phpfiddle. Also, all the greater than symbols – are they correct?

    Without trying the code it seems strange to use explode on incorrect HTML syntax (>/p>)

    Reply
    • Sorry but that was a typo error. Since its pre code you need to use &lt which is HTML code for < , I foolishly used &gt which is HTML code for > which obviously would cause a few issues. I’ve updated the code and it should now work.

      Reply
  5. This was a big help, but would I got to choose the first paragraph if the content starts with a heading or other tags?

    Reply
  6. Hi, Simon!

    And if I want to show all the paragraphs less de first one?

    Any ideas?

    Thanks! 😀

    Reply
  7. How to make show all paragraphs and show 2-3 pictures from 8 pictures in single.php WordPress?

    Reply
  8. What’s the purpose of $excerpt_more = apply_filters('excerpt_more', ' ' . $excerpt_end); in the C1 method when you’re not using $excerpt_more in the next line ($awesomeness_excerpt .= $excerpt_end;)?

    (Also, did you actually run the code before writing this article or did you just copy/paste from Stack Overflow? Because I’ve seen the same error there.)

    Reply
    • Hi Adrian,

      Yep, it was obtained from Stack Overflow from this Question, however it was adopted in other examples of the page and found to work, So its very likely one of the methods is a duplicate and the rest are adoptions, its a while since I used it, if you tell me the problem you’re having, I’ll try and help.

      Reply
  9. Oystein Nordvik

    This was bloody marvellous. Copy/paste directly into my page to solve my editors complaints about the 55 word snip.

    Friendly reminder from 2018: Put this code in your childs theme functions.php-file to keep it safe from updates 🙂
    Thanks again.

    Reply