WordPress Themes .. Pages and Template Hierarchy

Pages: 1 2 3

Audience.  People with a web development background, or a web development interest, who are either new to WordPress or new to developing for WordPress.  This series is based on WordPress 3.3.x.

In the “WordPress .. Displaying Content” article we introduced WordPress Template Tags, and showed how they are used in index.php to retrieve and render content stored in the WordPress database.   The content we displayed was a POST, i.e. content of post-type “post”.

Displaying Pages and Posts

In order to illustrate the points made in this article, we used the WordPress back-end to create a PAGE, i.e. a piece of content of post-type “page”, and we also created a second POST.

Accessing the WordPress server at it’s basic url, now displays two Posts, the most recent one first.

This output is generated using the index.php Template File.

<?php get_header(); ?>
<h1><a href="<?= site_url() ?>">Rendering WordPress Post Content</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. </p>
<p>In this example of the <em>simple02</em> theme we will render multiple <em>POSTS</em>, single <em>POSTS</em> and a <a href="<?= site_url() ?>/pressing-words/" >single <em>PAGE</em></a>.</p>
<p>The specific content that gets rendered depends 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>
 <?php if (is_page()) echo "<blockquote><p>This is the version of Pressing Words as a WordPress page.</p></blockquote>"; ?>
 <?php the_content(); ?>
<hr />
 <?php endwhile; else: ?>
 <p><?php echo 'Oops, it looks like there are no results.'; ?></p>
<?php endif; ?>
<!--/the loop-->
<?php get_footer(); ?>

The WordPress server we are using has a permalink structure associated with it.  In this case, it is /%postname%/.   So what does that mean?  In WordPress lingo, the %postname% is called a slug.  When adding or editing a PAGE or POST, at the top of the edit screen is an area where you edit the permalink.

The PAGE with the title  “Pressing Words” has the permalink called “pressing-words” assigned, and it can be edited.  As defined by WordPress:

A slug is a few words that describe a post or a page. Slugs are usually a URL friendly version of the post title (which has been automatically generated by WordPress), but a slug can be anything you like. Slugs are meant to be used with permalinks as they help describe what the content at the URL is.

So how do we display the PAGE we created?  We put the “slug” in the url.  See below.

Again, note that this PAGE is displayed using the same index.php template file as before.  So what makes the difference?  It is the structure of the URL.  In one case, with nothing specified, WordPress returns a set of all POSTS into the_post() object.  If we provide the permalink to the WordPress server the specific single PAGE content is returned into the_post() object and rendered by echoing the_content().

Pages: 1 2 3