Wrap Up

This series of posts (read from the bottom up) started with the premise:

This series of posts explores the basics of creating WordPress themes for one's use; as opposed to creating one for redistribution.  The distinction is important as we will only focus on developing it for a particular use and thus greatly simplify the effort. 

This effort also is focused on giving one maximal control over the site (HTML, CSS, and JavaScript) with minimal use of programming (WordPress and PHP).

In the end, we have created a fully functional WordPress theme that is ready to be styled to one's liking.  A copy of the result can be found at: https://github.com/larkintuckerllc/barebones.

 Enjoy.

Enabling Comments

To enable comments on just posts, one needs to implement the following (adding to pages is a matter of updating page.php).

First add the following just below the content on single.php.

single.php

<?php
if (comments_open() || get_comments_number()) :
  comments_template();
endif;
?>

Then create a comments.php template file:

comments.php

<?php
if (post_password_required()) {
 return;
}
?>
<div id="comments" class="comments-area">
  <?php if (have_comments()) : ?>
    <ul class="comment-list">
    <?php wp_list_comments(); ?>
    </ul>
  <?php endif; ?>
  <?php comment_form(); ?>
</div>

Interestingly, one does not need to implement the comments-popup.php listed in the template hierarchy unless one enables comment popups.  At this point, we have considered all the primary files (and some secondary ones) in the WordPress template hierarchy <https://developer.wordpress.org/themes/basics/template-hierarchy/>

Handling Inserted Images and Videos (YouTube)

When writing up training materials for a customer on managing a WordPress site, came across this subtle feature that themes need to handle: handing inserted images and videos (YouTube).

In particular, the WYSIWYG editor allows one to left, center, and right align images which puts certain classes on the image that the theme's style needs to handle: https://codex.wordpress.org/Wrapping_Text_Around_Images.

The following is a solution that also handles small (phone) screens gracefully.

style.css

img.alignleft, img.alignright, img.aligncenter {
  display: block;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 10px;
  height: auto;
  max-width: 100%;
}

@media (min-width: 768px) {
  img.alignright {
     float: right;
     margin-left: 10px;
  }
  .alignleft {
     float: left;
     margin-right: 10px;
  }
}

While not so much of a theme issue, one also needs to handle videos, e.g., how does one wrap text around videos (handle small screens).  In this case, the solution is a plugin: https://wordpress.org/plugins/advanced-responsive-video-embedder/.

Multiple Content Areas

Out of of the box, WordPress only supports a single content area per page / post; with the custom fields feature providing limited additional flexibility.  Luckily, a very powerful WordPress plugin called Advanced Custom Fields (ACF) can be used support multiple content areas per page / post.

To get started, install the Advanced Custom Fields plugin.

Using admin > Custom Fields create a new field group called home with two WYSIWYG fields named top and bottom and set it to show when Page is equal to home.  To limit the end-user to just editing these fields, hide all the other elements from the edit screen.

With this in place, we can update the front-page.php as follows:

front-page.php

<?php get_header(); ?>
<?php wp_nav_menu(array('theme_location' => 'header-menu')); ?>
<?php get_search_form(); ?>
<?php while (have_posts()) : the_post(); ?>
  <?php the_field('top'); ?>
  <?php the_field('bottom'); ?>
<?php endwhile; ?>
<?php get_footer(); ?>

While this example only used WYSIWYG fields, we can limit the end-user to content like plain text and images to be used in highly styled elements.