Return only certain (html)-elements of the_content()

Question

I have 25+ posts that are all structured the same way, the content is like this:

<ul class="foo">
<li>b</li>
<li>a</li>
<li>r</li>
</ul>
<p>lorem ipsum...</p>
<img></img>

they serve as single portfolio objects.

I want to show some of the content for each posts as a preview in the content-archive.php (like a portfolio grid). It works as far as that I have each post previewed with it's title, header picture etc. (things I can retrieve from WP), but I can either only display an excerpt (which looks bad, since each post starts with a list) or the whole post (which is a bloat and looks bad as well).

The the_expcerpt() function won't do, because I want it displayed like a list, the the_content() won't do because I want to lose the rest.

I only know that each and every posts starts with a <ul> with 3 or 4 <li> lements which are variable in length. Those I wan't to display, nothing more, nothing less

So my guess is to filter the the_content with a regular expression and display only the list elements?

Answer 1

There are two ways to achieve it.

$args = array(
                'post_type' => 'post',
                'posts_per_page'=>1
             );
   $mj_query = new WP_Query( $args );

1. By the_expcerpt(), You can use excerpt field to display the content for post listing page.You can enable excerpt field by screen option through current post edit page.Just put html element to that excerpt field and use below code. It will display it as you want.

   while ( $mj_query->have_posts() ) {

       the_excerpt();
   

   }

2. By get_the_content(), you can get all content of a specific post by get_the_content() function and alter it using substr() function.Here you can use length according to you content to be displayed.

   while ( $mj_query->have_posts() ) {
   
      $theExcerpt = get_the_content();
      echo substr($theExcerpt,0,100);
   

   }