Expandable WordPress post excerpt

#wordpress #php #javascript #css

First the PHP
Add this function in function.php

function expandable_excerpt($excerpt)
{
    $split = explode(" ", $excerpt); //convert string to array
    $len = count($split); //get number of words
    $words_to_show_first = 19; //Word to be dsiplayed first
    if ($len > $words_to_show_first) { //check if it's longer the than first part

        $firsthalf = array_slice($split, 0, $words_to_show_first);
        $secondhalf = array_slice($split, $words_to_show_first, $len - 1);
        $output = '<p class="event-excerpt" >';
        $output .= implode(' ', $firsthalf) . '<span class="see-more-text">...see more</span>';

        $output .= '<span class="excerpt-full hide">';
        $output .= ' ' . implode(' ', $secondhalf);
        $output .= '</span>';
        $output .= '</p>';
    } else {
        $output = '<p class="event-excerpt">'  .   $excerpt . '</p>';
    }
    return $output;
}

Required CSS
CSS to simply hide elements when needed

.excerpt-full.hide {
display: none;
}
.see-more-text.hide {
display: none;
}

Required JS
script to add/remove css classes when needed

const itemSeeMore = document.querySelectorAll(
  "p.event-excerpt> span.see-more-text"
);
if (itemSeeMore) {
  itemSeeMore.forEach((item) => {
    item.addEventListener("click", () => {
      item.classList.toggle("hide");
      item.nextElementSibling.classList.toggle("hide");
    });
  });
}

Using the function in simple shortcode example

function display_post()
{
    $rand_post = get_post('7');
    print_r($rand_post);
    $output = '<div class="post-wrapper">';
    $output .= '<h2>' . $rand_post->post_title . '</h2>';
    $output .= expandable_excerpt($rand_post->post_excerpt);
    $output .= '</div>';

    return $output;
}
add_shortcode('display_post', 'display_post');

Add the short code [display_post] in you page editor

And that's it, thanks for reading the article if you want any support on it just let me know.