So in the last tutorial we looked at how the basic index template works in conjunction with the header and footer files on our WordPress site. In this tutorial I want to take a look at the WordPress page template. This might seem a little backwards in that most tutorials at this point go into blog posts, but I think its easier to start with pages in that its a little more simple.
Remember that the 2 building blocks of content types in WordPress page templates are posts and pages. Posts are canonical and go in a flow – they are added to often and frequently have very targeted, specific content. Pages are used typically to display general information about the site – are not dependent on any order and typically register as main parts of the website navigation.
Actually, we just built a page in the last tutorial – this was the home page. So our general WordPress page template won’t be much different. The home page could be (and usually is) used to display the most recent blog posts. That’s a little more than the basic, static page content we’re talking about here.
WordPress by default uses some basic template names. If we create a file in our template folder and call it page.php – WordPress will know to use that in the site for the main page template. We can also create additional templates if we want more variety and I will show you how to do this. They will need to be registered so WordPress will see them. But lets start with the built-in page.php.
1) Create a new file and save it in the theme directory. Call this file page.php
2) Paste the following code into the page.php file:
<?php
get_header();
?>
<!-- Page content will go here -->
<h2>This is a page template</h2>
<?php
get_footer();
?>
What we have done here is put in the exact same code as the index.php file, but we put the H2 statement in saying that this is a page template. Now if you log into WordPress admin and go to pages->sample page->edit you can see that WordPress came with a sample page set up. If you click “View Page” you will see our template is working with the H2 tag we put in. You won’t see this on the home page – that is the difference.
So now we need to put some content into our template so it will actually display something.
The WordPress Loop
To get content on your pages (and even posts) we’ll use what’s known as “The Loop”. WordPress brings many elements into your pages including the title, author, meta information, the post content or page content, comments if they are enabled, forms for new comments, etc. The technique for bringing all of these into a page is known as a loop. This is a PHP function that continues to bring in elements while the page is called until they are complete. On a page – the loop is very simple. Paste the following code into your page.php file – again between the header and footer blocks. You can delete the previous code we put in if you like:
<?php while ( have_posts() ) : the_post(); ?>
<h2><?php the_title(); ?></h2>
<div class="page-content">
<?php the_content(); ?>
</div>
<?php endwhile; // end of the loop. ?>
It may seem weird to do a loop for only one page, but this is how WordPress works and it stays consistent when we start working with posts. Inside the loop we call 2 functions – the_title() and the_content() – there are others we could use as well, but this simply displays the title and the content.
That’s it – go to your WordPress admin and select the sample page. Click “View Page” and you should see the page display!
You’ll notice our design is pretty bad, but don’t worry – we haven’t done any CSS work on this yet – we’re just getting the framework together.
Next we’ll look at creating menus so our pages will populate into the navigation.
 I've been working with WordPress since it came out back in 2003 on various design and photography sites that I've had over the years. Check out my Google+ Profile
|