Website Redesign: The Blog

January 1st, 2020

I’ve turned my attention to the blog. It may very well be the most important part of my site because I want this work to encourage me to write more.

That means I need to get this part right. First off, the design came together quickly.

I know, super simple. But I like it!

What I like most about this design is that there are no distractions. There’s the post date, the post title, and the main navigation. Not much to digest here. That’s the point: get folks to a post as quickly as possible. There’s no reason to linger on a post archive page.

I wound up adding a page header, but left most of everything else intact.

Showing right navigation and list of posts on the left.
I hadn’t even designed buttons when working on the mockup.

Organizing content

When working with a content management system, it’s important to know exactly how you’re going to organize the content you create with it.

I decided to keep all of my posts together. Previously, I leaned on custom post types to separate different types of content, but that feels too siloed to me now. So, instead, I’m only using categories. That worked out well because I hadn’t been using categories prior to the redesign, so I was able to start from scratch.

Here are the categories I’m currently using:

  • Posts (like the one you’re reading)
  • TIL (which I’ll get to in a moment)
  • Newsletter

This lets me keep things separated, but close enough in proximity to make the content easily accessible in the WordPress admin. I became annoyed with having to jump from one post type to another and this feels so much more efficient.

About that TIL category. It stands for “Today I Learned” and is designed to hold content that chronicles bits of information that I learn on a given day. It could be related to code, life, parenting… basically whatever I want. Whatever I write, it’s meant to be quick snippets rather than longer, drawn-out posts that go deep into details.

As such, I wanted to keep the TIL posts out of the main blog archive and listed on their own page. There are a couple of ways to tackle this in WordPress:

  • Create a page template for that specific category. In this case, it would be category-til.php.
  • Create a template partial and call it conditionally in the main category.php template.

I went with the second option. I like the idea of working in fewer templates and creating modular pieces of code that can be used in other places.

Here’s what I did. First, I excluded the TIL category from the main blog loop by putting this in my functions.php file:

function exclude_category_posts( $query ) {
  if ( $query->is_home() && $query->is_main_query() ) {
    $query->set( 'cat', '-5' );
  }
}
add_action( 'pre_get_posts', 'exclude_category_posts' );

Then I added a page title to the category.php file if TIL is the current category:

<?php // If "TIL" category, let's show a title.
  if ( is_category( 'TIL' ) ) :
?>
  <h1>Today I Learned...</h1>
<?php endif; ?>

Next, I created a template partial called category-til.php in a /template-parts/loop/ directory and wrote the markup for those posts:

<article class="post-single">
  <?php the_title( '<h2 class="post-single__title">', '</h2>' ); ?>
  <div class="post-single__body">
    <div class="post-single__date">
    <?php echo the_date('F j, Y'); ?>
    </div>
    <?php echo the_content(); ?>
  </div>
</article>

Notice that I’m display the full content in this template and have decided not to link to the post single. Again, these posts are meant to be short and sweet, so there’s no need to open a new page to get the content for a particular post.

Finally, I added the template partial to the category.php template inside a conditional checking that TIL is the current category. If it is, then load that template. If not, show a different template partial for other post categories instead.

<?php // All categories, except TIL
  if ( have_posts() && ! is_category( 'TIL' ) ) :
    while ( have_posts() ) : the_post();
      get_template_part( 'template-parts/loop/loop', 'posts' );
    endwhile;
  
  // Only TIL
  else :
    while ( have_posts() ) : the_post();
      get_template_part( 'template-parts/loop/category', 'til' );
    endwhile;
  endif; ?>

The Newsletter category

I only alluded to it, but this will hopefully fulfill a long-lost effort from several years ago. I’ve always wanted to run a newsletter of front-end related business. I even made the template years ago and have been collecting signups since then. To date, a grand total of zero emails have gone out.

I made this category so that I can write the emails in WordPress then feed them to Campaign Monitor (my email newsletter provider) via RSS. That lets me keep my content (rather than giving it to Campaign Monitor) and display it on my site, which I’ll do on a dedicated page for the newsletter signup. Thanks to Chris for the great idea!

The post single

I really care about legibility but I admittedly spent very little time on the post design. This was more of a cowboy-coding effort where I designed most of the kitchen sink in the browser. I had never worked with WordPress blocks before and figuring out how to style them and their default classes required a bit of a learning curve.

There are all kinds of blocks in WordPress, but I decided to focus on ones I think I’ll use the most. Everything else I can either avoid or style when I cross that bridge.

What’s next…

Next up, I need to work on individual pages. I won’t have many and the ones I have will share the same general layout. Among those pages are Contact and Newsletter, which both require a form. I’ll be turning to Gravity Forms for those.

I doubt I’ll have much to write about when those are done, so the next check-on will likely be when I get around to a performance audit. Stay tuned!