Display Post Excerpt To The More Tag With WP API V2

Ho Ho Ho! It’s December now so you get a Santa-style greeting from me! Today I’ll be showing you a simple trick that I got asked a while back ago in one of the comments, that is: “how can we display excerpt to the more tag (<!–more–>) with WP API V2”?

By default, WP API V2 has the excerpt field in the posts response, but the auto generated one is often not what we want.

So here are things we’d like to hack around the WP API and get the results we want:

  • Get the excerpt with read more link
  • Get the excerpt from text before the more tag
  • Display content of the shortcodes or oEmbed links in your excerpt

Now let’s get started.

Get the excerpt with read more link

To get the excerpt text to the more tag, we just need to use the built-in WordPress function get_the_content(). When we insert the more tag into post content, if we use get_the_content() function to get post content (on any non-single page), we can only get text to the more tag (which will be transformed to a read more link), the left part will be omitted. Let’s add a new my_excerpt field to the WP API response:

  • Line 12: We use the rest_prepare_post filter to manipulate the WP API response. Please remember that the best practice is not to modify the default fields, in case the third party apps can’t get the expected data from the API.

Get the excerpt from text before the more tag (without read more link)

What if you just want exactly the excerpt text, but not with the “read more” link? In such case, we’ll need some help from the get_extended() function:

  • Line 7: We use get_extended() function to process the $post->post_content, so we can get an array that separate the content text into three elements: “main”, “extended” and “more_text”.
  • Line 8: We set my_excerpt to $excerpt['main'] because “main” contains text just before the more tag.

Display content of the shortcodes or oEmbed links in your excerpt

The snippet above is not perfect enough because if you have any shortcode or oEmbed link in the excerpt, they won’t be able to be transformed to HTML markup. That’s because in WordPress, we need to process the raw data $post->post_content with filter the_content, so all the magical stuff could happen.

Just check out the line 5, apply_filters here makes everything perfect again.

This is a quite short post and you might have already known these simple tricks! I hope you enjoy the rest days of 2015, and I’m trying to manage to publish another AngularJS tutorial before 2016. Wish I could make it!

If you’re new here, I just want you to know my goal to run this blog is to become the most responsive blogger I’ve ever known. So whenever you have any question regarding my tutorials or not, feel free to leave comments here, email me: yoren [at] 1fix.io or just tweet me: @1fixdotio. I’ll get back to you as soon as I can.

12 responses

  1. Hi Yoren,

    It’s fantastic tutorial. I’ve followed up all regarding posts.
    Great job! Thank you!
    I just want to ask if you are going to continue these series and if yes, what subjects are you going to cover?

    1. Yoren Chang Avatar
      Yoren Chang

      Hi, Alexey, the next one should be about creating a custom directive for front end login, and I’d also like to cover post CRUD if possible.

      The biggest challenge for me it that AngularJS 2 is in beta and I’ll need to spend tons of time to rewrite the series when it’s officially out. That’s kind of holding me back on continuing for now, but I’ll try my best to share everything I learn here.

      Thanks for stopping by and leaving such kind words for me. Feel free to let me know if you’d like me to cover some topics.


      1. Hi Yoren,
        Front end login is the logical continuation of your series, it will be very helpful.

        I’m building test application based on your posts and as next steps decided to create directives for menus and widgets and it would be very interesting if you cover creating these directives in your posts too.

        Thank you!

        1. Yoren Chang Avatar
          Yoren Chang

          Hey Alexey, the menus and widgets are kind of painful for the current version of WP API, so I’ll stay away from them for a while 😉

          Please feel free to shed the light on for me about how you solve the puzzles to integrate them! Thanks!

  2. Hi Yoren,

    I’ve almost finished with menu directive and can send you the explanation to email.

    1. Yoren Chang Avatar
      Yoren Chang

      Definitely! Please email me yoren [at] 1fix.io. Thanks!

  3. Preethi Avatar

    Great Job dear Yoren Chang. I simply loved your article series. Thanks, keep supporting us .

    1. Yoren Chang Avatar
      Yoren Chang

      Hey Preethi, thanks for your kind words!

  4. i usually follow thoroughly your tutorials. i have just one question, do you think that there is a chance to decide weather is better to use angular or react for the wp rest api. I can’t seem to figure it out what is happening.

    To much development and too fast

    1. Yoren Chang Avatar
      Yoren Chang

      Hi Marin, WP API can work with any framework since it just an “interface” for us to communicate with WP (the database). You can just use one when it makes more sense to you. To me I prefer AngularJS but I believe you can even work with Angular and React at the same time!

  5. Thanks Yoren, great stuff !
    I have HTML validation problem in the output (unclosed ) any idea ?

    I propose on my blog a variation of your work, new json_node only appear if is present in content…

Leave a Reply

Your email address will not be published. Required fields are marked *