Custom Excerp dan Readmore with Thumbnail pada Wordpress

Tutorial ini adalah lanjutan dari Step by Step Membuat Wordpress Template Sederhana, yaitu custom readmore yang disertai link dan juga auto image thumbnail, jika featured image ada maka thumbnail mengambil dari featured image namun jika tak ada maka thumbnail diambil dari image pertama dari post, dan jika keduanya tak ada maka menggunakan image yang telah kita tentukan.

Mari kita coba trik sederhana dari seorang newbie ini

1. functions.php
   kita tambahkan script pada functions.php, script ini untuk membatasi jumlah karakter pada excerp dan membuat link readmore pada excerp tersebut
   

   // custom excerpt length
   function untheme_custom_excerpt_length( $length ) {
      return 30;
   }
   add_filter( 'excerpt_length', 'untheme_custom_excerpt_length', 999 );
   
   // add more link to excerpt
   function untheme_custom_excerpt_more($more) {
      global $post;
      return '<a class="more-link" href="'. get_permalink($post->ID) . '">'. __('Read More', 'untheme') .' <i class="fa fa-angle-double-right" aria-hidden="true"></i></a>';
   }
   add_filter('excerpt_more', 'untheme_custom_excerpt_more');

2. content-excerp.php
   file content-excerp.php berada dalam folder template-parts
   yang dirubah adalah script dalam markum <div class="home entry-content">, disitu kita tambahkan class home untuk memudahkan pengaturan css, agar tidak bentrok saat class entry-content dipanggil oleh single.php.
   disini kita juga menambahkan author, tanggal posting dan categori post agar terlihat lebih nyaman dilihat, adapun isi div diatas adalah sebagai berikut
   

   <div class="home entry-content">
     <div class="featured-image">
    <?php
    if ( has_post_thumbnail() ) {
     the_post_thumbnail();
    } else {
     ob_start();  // run the_content() through the Output Buffer
     the_content();
     $html = ob_get_clean(); // Store the formatted HTML
     $content = new DomDocument(); // Create a new DOMDocument Object to work with our HTML
     $content->loadHTML( $html ); // Load the $html into the new object
     $finder = new DomXPath( $content );  // Create a new DOMXPath object with our $content object that we will evaluate
   
     $imgfind = $content->getElementsByTagName('img');
     foreach($imgfind as $im){
      $images = $im->getAttribute('src');
     }
     
     $poster = $images ?: get_template_directory_uri()."/inc/no_image.jpg";
     
     echo '<img src="'.$poster.'" class="attachment-post-thumbnail size-post-thumbnail wp-post-image" alt="" />';
    }
    ?>
     </div>
     <div class="content-detail">
      <div class="home post-author">
       By <i class="fa fa-user" aria-hidden="true"></i> <?php the_author_posts_link(); ?> on <i class="fa fa-calendar" aria-hidden="true"></i> <?php the_time('F jS, Y'); ?>
      </div>
      <div class="home cat-list">
       <span>Cat </span>
     <?php
      $categories = get_the_category();
      $separator = ' ';
      $output = '';
      if($categories){
       foreach($categories as $category) {
        $output .= '<a href="'.get_category_link( $category ).'" title="' . esc_attr( sprintf( __( "View all posts in %s" ), $category->name ) ) . '"><i class="fa fa-pencil-square-o" aria-hidden="true"></i>'.$category->cat_name.'</a>'.$separator;
       }
      echo trim($output, $separator);
      }
     ?>
      </div>
      <div class="post-excerpt"><?php the_excerpt(); ?></div>
     </div>
    </div>

3. atur CSS sesuai selera
   

   /* Home index CSS */
   .home.entry {
    margin-bottom: 35px;
   }
   
   .home.entry-content {
       display: grid;
       grid-template-columns: 20% auto;
       grid-column-gap: 1em;
   }
   
   .featured-image { /*
       display: inline-block;
       max-width: 200px;
       float: left;
       margin-right: 15px;
   */}
   
   .featured-image img {
       max-width: 100%;
       height: auto;
   }
   
   .home.post-author, .home.cat-list {
       font-size: small;
       color: #999;
   }
   
   .more-link {
       font-size: small;
       margin-left: 10px;
       border: 1px solid;
       padding: 2px 3px;
       border-radius: 2px;
   }
   
   img {
       height: auto;
       max-width: 100%;
   }

4. semoga berhasil