Custom WordPress Themes: Creating a responsive post preview

This needs work. It uses php instead of CSS to avoid rendering the thumbnail cell which has some padding. This aligned the content on the left, with or without the thumbnail, but should use a collapse style instead. (next version, maybe)

This is also the first test of the SyntaxHighlighter plugin. See SyntaxHighligher Evolved or install it from the WordPress Plugins panel.

<article class="post">
    <header>
      <h3 class="p-2 post-title"><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></h3>
    </header>
    <main class="d-flex flex-row bd-highlight mb-3 align-items-start justify-content-center">
      <?php 
      // get url if there is a thumbnail - null 1st param means global $post
      $thumbnailUrl = get_the_post_thumbnail_url(null, 'thumbnail'); 
      if (strlen($thumbnailUrl) > 0) {
          echo '<div class="p-2"><img class="post-thumb" src="' . esc_url( $thumbnailUrl ) . '" alt="' . esc_url(the_title()) . '"></div>';
      }
      ?>
      <div class="p-2 flex-fill">
          <div class="post-info">
            <span class="post-date"><?php the_date(); ?></span>
          </div>
          <div class="post-intro">
          <?php
              the_excerpt();
          ?>
          </div>
        <a class="post-more-link" href="<?php the_permalink() ?>">Read it &rarr;</a>
      </div>
  </main>
</article>

I ran into trouble on line 8 because the default parameter value for get_the_post_thumbnail_url() is post-thumbnail when I was expecting thumbnail. I don’t remember enough WordPress to know if that is a new thing, or not. It may have to do with my custom theme not using a consistent set of thumbnail sizes. To do: review the settings for thumbnails in the Media panel.