WordPress Bare Bones Theming Exercise: Get Template Part & The WP Template Hierarchy

This exercise continues on from Bare Bones WordPress Theming Exercise: Common Template Tags.

We ended that exercise having made a template part called article-short.php.

Now, duplicate that file and name it article-long.php. In that file, make two edits:

• first, change the_excerpt(); to the_content();.
• then, remove the link code around the title of the post

The code in article-long.php should look like this, at this point, then:

<?php ?>
    <article>
 
        <h2><?php the_title(); ?></h2>
             
       <?php the_post_thumbnail(); ?>
        <div class="entry-meta">
          Written by: <b><?php the_author(); ?></b> 
          on <?php the_date(); ?>
        </div>
        
        <div class="entry-category">Filed under: 
           <?php the_category( ' '); ?>
        </div>
        
        <div class="entry-tags">Tagged: 
           <?php the_tags( '', ' | ', ''); ?>
        </div>
         
        <div class="entry-content">
          <?php the_content(); ?>
        </div>    
 
    </article> 

Remember how I said earlier that Content Management Systems aim to cut down on repetition? When we learn how to do conditions in a future class, we’ll learn a better way to do the above task, but for now the way we’re doing it serves a useful learning purpose.

The WordPress Template Hierarchy

The template hierarchy is one of the most important concepts in WordPress. It determines which template files are responsible for outputting content.

For an in-depth discussion, consult the WordPress developer site.

Up until this point, all our content has been output by index.php.

Let’s change that: duplicate index.php and name the new file single.php.

Inside single.php, make get_template_part grab article-long.php instead of article-short:

<?php
get_header();

if ( have_posts() ) : 

  while ( have_posts() ) : 
    the_post();
    get_template_part('template-parts/article-long');
  endwhile;

else :
    'Sorry, no posts matched your criteria.';

endif;

get_footer();   

Now test your site.

On the home page, make sure that you’re getting the excerpt rather than the full content.

Then click on the title of one of your posts. This will take you to a full view of the post. On that “full view” page, make sure that the post title is not a link. Make sure, also, that we are getting the full post content rather than the excerpt.

If you are, inspect the page and look at the BODY tag:

Note how the classes reflect the template file in use. As noted earlier, this gives us a lot of styling hooks.

We’ll do that styling later, but for now, here is a task for you.

A Task: Search Results

For this task, you will need to do a small bit of research: use this page listing WordPress template tags.

Also useful will be this helpful chart:

Make search results on your site return the following data, in this order:

An H2 at the top of the page that says Search results for followed by the actual text that was searched for.

Then for each returned post on the search page, output the following information:

• post title, wrapped in a link to the post
• the feature image, wrapped in a link to the post
• post excerpt
• post author, with link to the archive of all the author’s posts
• post category, with link to the archive of all posts in that category
• the date the article was last modified

Once you’ve done this task, you’re ready to learn about functions.php.