WordPress Themes .. Pages and Template Hierarchy

Pages: 1 2 3

In the simple03 theme we slightly modified index.php.  To illustrate this further we created the page.php and single.php Template Files for the simple03 theme.

index.php

<?php get_header(); ?>
<h1><a href="<?= site_url() ?>">WordPress Template Files</a></h1>
<p>Below is content pulled from the <strong>WordPress</strong> database. This content is rendered using the <em>index.php</em> template file. In this example of the <em>simple03</em> theme we will render multiple <em>POSTS</em>, titles only with links.</p>
<p>Single <em>POSTS</em> will be rendered using the <em>single.php</em> and a <a href="<?= site_url() ?>/pressing-words/" >single <em>PAGE</em></a> using the <em>page.php</em> Template Files. The specific content that gets rendered, and the template file used depend on the <em>url</em> presented to the <strong>WordPress</strong> server.</p>
<!--the loop-->
<hr />
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
 <h2><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>
 <ul>
 <li>Written by <strong><?php the_author(); ?></strong></li>
 <li>Published on <em><?php the_date(); ?></em></li>
 </ul>
<hr />
 <?php endwhile; else: ?>
 <p><?php echo 'Oops, it looks like there are no results.'; ?></p>
<?php endif; ?>
<!--/the loop-->
<?php get_footer(); ?>

Notice how we added Template Tags for the display of Author and Publication Date.  The index.php file is utilized, since the URL submitted did not contain any specific information.  The resulting output to the browser is displayed below.

A single POST will use the single.php template file.

single.php

<?php get_header(); ?>
<h1><a href="<?= site_url() ?>">WordPress Template Files</a></h1>
<p>
This page is rendered by the <em>simple.php</em> template file.
This template file is called to duty when a single item of post-type <em>POST</em> is to be rendered.
</p>
<!--the loop-->
<hr />
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
 <h2><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute() ?>"><?php the_title(); ?></a></h2>
 <p class="byline">
 Written by <strong><?php the_author() ?></strong> on <em><?php the_date() ?></em>
 </p>
 <?php the_content() ?>
<hr />
 <?php endwhile; else: ?>
 <p><?php echo 'Oops, it looks like there are no results.'; ?></p>
<?php endif; ?>
<?php get_footer(); ?>

Again the Template Tags for the display of Author and Publication Date are used.  The style.css was updated with a byline class.

.byline { margin-left:10px; font-family:Georgia, "Times New Roman", Times, serif; font-size: 14px; }

And the resulting browser output is displayed below.

A single PAGE will use the page.php template file.

page.php

<?php get_header(); ?>
<h1><a href="<?= site_url() ?>">WordPress Template Files</a></h1>
<p>
This page is rendered by the <em>page.php</em> template file.
This template file is called to duty when a single item of post-type <em>PAGE</em> is to be rendered.
</p>
<!--the loop-->
<hr />
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
 <div id="single_page">
 <h2><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute() ?>"><?php the_title(); ?></a></h2>
 <?php the_content() ?>
 </div>
<hr />
 <?php endwhile; else: ?>
 <p><?php echo 'Oops, it looks like there are no results.'; ?></p>
<?php endif; ?>
<?php get_footer(); ?>

The code is straightforward.  We added a <div> with id single_page, and added the following element to style.css.

#single_page { background-color:#e0fff0; }

And here is the resulting display.

General Notes

Template Files, when selected by WordPress, have to be coded to generate fully compliant HTML.  This may be obvious to some, but it was not initially to me.  So a Template File has to include the proper <head> section etc.

In our simple example case here we took care of that by including the header.php and footer.php files in both single.php and page.php.  It is not unusual, however, for themes to customize the header and footer content depending on the specific information and/or post-type being displayed.

 

Pages: 1 2 3

Leave a Reply

You must be logged in to post a comment.