WordPress Creating Pages

In WordPress, you can write either posts or Pages. When you're writing a regular blog entry, you write a post. Posts automatically appear in reverse chronological order on your blog's home page. Pages are for content such as "About," "Contact," etc. Pages live outside of the normal blog chronology, and are often used to present timeless information about yourself or your site -- information that is always applicable. You can use Pages to organize and manage any content.

In addition to the generally required "About" and "Contact" Pages, other examples of common pages include Copyright, Disclosure, Legal Information, Reprint Permissions, Company Information, and Accessibility Statement.

In general, Pages are very similar to Posts in that they both have Titles and Content and can use your WordPress Theme templates files to maintain a consistent look throughout your site. Pages, though, have several key distinctions that make them quite different from Posts.

What Pages Are:

  • Pages are for content that is less time-dependent than Posts.
  • Pages can be organized into pages and SubPages.
  • Pages can use different Page Templates which can include Template Files, Template Tags and other PHP code.
  • Pages may have a more complex array of readily available display adjustments when using sophisticated Themes with extensive customization.
  • In essence, Pages are for non-blog content. It is possible to remove all or most Posts from a WordPress installation, and thus to create a standard non-blog website.

What Pages are Not:

  • Pages are not Posts, nor are they excerpted from larger works of fiction. They do not cycle through your blog's main page. WordPress Plugins are available to change the default if necessary.
  • Pages cannot be associated with Categories and cannot be assigned Tags. The organizational structure for Pages comes only from their hierarchical interrelationships, and not from Tags or Categories.
  • Pages are not files. They are stored in your database just like Posts are.
  • Although you can put Template Tags and PHP code into a Page Template file, you cannot put these into the Page or Post content without a WordPress Plugin like Exec-PHP which overwrites the code filtering process.
  • Pages are not included in your site's feed.
  • Pages and Posts may attract attention in different ways from humans or search engines.
  • Pages (or a specific post) can be set as a static front page if desired with a separate Page set for the latest blog posts, typically named "blog."

Creating Pages

Pages > Add New

To create a new Page, log in to your WordPress installation with sufficient admin privileges to create new articles. Select the Administration > Pages > Add New option to begin writing a new Page.

 

Organizing Your Pages

Just as you can have subcategories within your Categories, you can also have SubPages within your Pages, creating a hierarchy of pages.

For example, a WordPress site for a travel agent may feature an individual Page for each continent and country to which the agency can make travel arrangements. Under the Page titled "Africa" would be SubPages for Lesotho, Cameroon, Togo, and Swaziland. Another parent Page "South America" would feature SubPages of Brazil, Argentina, and Chile. Your site would list:

  • Africa
    • Cameroon
    • Lesotho
    • Swaziland
    • Togo
  • South America
    • Argentina
    • Brazil
    • Chile

To create subPages:

  1. Go to Administration > Pages > Add New panel.
  2. In the right menu, click the "Page Parent" drop-down menu. The drop-down menu contains a list of all the Pages already created for your site.
  3. Select the appropriate parent Page from the drop-down menu to make the current Page a child Page.
  4. Add content to the subPage.
  5. Click Publish when ready.

When your Pages are listed, the Child Page will be nested under the Parent Page. The Permalinks of your Pages will also reflect this Page hierarchy.

In the above example, the Permalink for the Cameroon Page would be:

http://example.com/africa/cameroon/

Changing the URL of Your Pages

To change the URL or "slug" of a Page, use the Edit Slug feature under the Page title on the WordPress Administration > Page edit screen.

Creating a List of Pages

WordPress is able to automatically generate a list of Pages on your site within the sidebar or footer, for example, using a Template Tag called wp_list_pages(). See the wp_list_pages page for information on how to customize how WordPress displays the list of Pages on your site.

You can also link to Pages manually with an HTML link. For example, if you want your Copyright Page listed in your footer, that link might read as below:

<a title="Copyright information" href="http://example/com/copyright/">Copyright 1996-2012</a>

There are also WordPress Plugins that will help you display a list of Pages within in Posts and in other areas of your WordPress Theme.

Page Templates

Individual Pages can be set to use a specific custom Page Template (a WordPress Theme PHP template file, e.g., snarfer.php) you create within your Theme. See Creating your own Page Templates below on how to create a custom template file for a Page. This new Page Template will then override the default page.php Page Template included with your Theme.

WordPress can be configured to use different Page Templates for different Pages. To select a different Page Template:

  1. On the right menu, select the drop-down menu labeled "Page Template."
  2. Choose the WordPress Theme template file to be used when displaying this particular Page.

What You Need to Know About Page Templates:

  1. In order to access the Page Template selector, there must be at least one custom Page Template available in the active theme (see Creating your own Page Templates below to learn how to create one). If a custom page exists, but you still are not able to see Page Template selector, re-activate your current theme.
  2. For a good understanding of how WordPress automatically uses specific Page template files in a Theme, see Template Hierarchy.
  3. If you change WordPress Themes, this Page Template file will no longer be available. The Page's layout and design will revert to the default look for the current WordPress Theme.

Default Theme Page Templates

The default TwentyEleven WordPress Theme contains three Page Templates for your use:

  • page.php - Default Page Template: displays Page content
  • archives.php - ignores Page content and instead displays a list of Archives by Month and Archives by Subject (by Category)
  • links.php - ignores Page content and instead displays your links using wp_list_bookmarks()

What Template is Used to Display a Particular Page?

WordPress looks for several Page template files in your active WordPress Theme based upon the Template Hierarchy. The first one it finds will be used to display any given Page. WordPress will look for files in the following order:

  1. The Page's selected "Page Template"
  2. page.php
  3. index.php

The WordPress Template Hierarchy also recognized specific Pages or posts automatically without the need to assign them to a specific Page template file. If the Page with ID or slug in the template file name is automatically generated by the user, the appropriate Page template file is used.

  • page-{id}.php
  • page-{slug}.php

If the Page ID number is 42, the page-42.php template file is automatically used. If the Page slug is "About," the page-about.php template file is used.

Creating Your Own Page Templates

The files defining each Page Template are found in your Themes directory under /wp-content. To create a new Custom Page Template for a Page you must create a file. Let's call our first Page Template snarfer.php.

At the top of the snarfer.php file, put the following:

<?php
/*
Template Name: Snarfer
*/
?>

The above code is required and defines the snarfer.php file as the "Snarfer" Template. "Snarfer" may be replaced with most any text to change the name of the Page Template. The Template Name will appear in the WordPress Theme Editor for editing. For more information on Theme naming conventions see reserved Theme filenames for file names you should not use.

What follows the above five lines of code is up to you. The code you write will control how Pages that use the Snarfer Page Template will display. See Template Tags for a description of the various WordPress Template functions you can use for this purpose. You may find it more convenient to copy the dynamic content generating code from another Template file (perhaps page.php or index.php) to snarfer.php. This will save time, allowing you to only alter the HTML and PHP code, instead of creating it all from scratch.

Examples of custom Page Template files are shown below.

Examples of Pages and Templates

The following is a list of instructional examples of custom Page Template files. Please note that your WordPress Theme's template file structure and architecture may be different.

Archives with Content

Example of a Page Template that shows the Page's content at the top, and then displays a list of archive months and categories below it.

Save this to arc-cont.php:

<?php
/*
Template Name: Archives with Content
*/
?>
<?php get_header(); ?>
<div id="content" class="widecolumn">
 <?php if (have_posts()) : while (have_posts()) : the_post();?>
 <div class="post">
 <h2 id="post-<?php the_ID(); ?>"><?php the_title();?></h2>
 <div class="entrytext">
  <?php the_content('<p class="serif">Read the rest of this page &raquo;</p>'); ?>
 </div>
 </div>
 <?php endwhile; endif; ?>
 <?php edit_post_link('Edit this entry.', '<p>', '</p>'); ?>
</div>
<div id="main">
<?php include (TEMPLATEPATH . '/searchform.php'); ?>
<h2>Archives by Month:</h2>
 <ul>
  <?php wp_get_archives('type=monthly'); ?>
 </ul>
<h2>Archives by Subject:</h2>
 <ul>
   <?php wp_list_categories(); ?>
 </ul>
</div>
<?php get_footer(); ?>

A Page of Posts

The following custom Page Template file displays posts from two specific categories (specified by their category slugs). It is designed to work within a child Theme of the Twenty Eleven theme. If you are using another theme, you need to replicate the HTML structure of your own theme within the template.

Save this to pageofposts.php and then assign the Page of Posts Template to your new Page:

<?php
/*
Template Name: Page Of Posts
*/

// if you are not using this in a child of Twenty Eleven, you need to replicate the html structure of your own theme.

get_header(); ?>
<div id="primary">
<div id="content" role="main">
<?php
$paged = (get_query_var('paged')) ? get_query_var('paged') : 1;
$args= array(
	'category_name' => 'antiquarianism, championship', // Change these category SLUGS to suit your use.
	'paged' => $paged
);
query_posts($args);
if( have_posts() ) :?>

<?php twentyeleven_content_nav( 'nav-above' );?>
<?php while ( have_posts() ) : the_post(); ?>
<?php get_template_part( 'content', get_post_format() ); ?>
<?php endwhile; ?>
<?php twentyeleven_content_nav( 'nav-below' ); ?>

<?php else : ?>
<article id="post-0" class="post no-results not-found">
<header class="entry-header">
<h1 class="entry-title"><?php _e( 'Nothing Found', 'twentyeleven' ); ?></h1>
</header><!-- .entry-header -->

<div class="entry-content">
<p><?php _e( 'Apologies, but no results were found for the requested archive. Perhaps searching will help find a related post.', 'twentyeleven' ); ?></p>
<?php get_search_form(); ?>
</div>
<?php endif; ?>
</div>
</div>
<?php get_footer();

Example Using Custom Fields

This example features a Page Template that displays posts from a specific category depending on a Custom Field assigned to a Page. The value of the Custom Field "category" is retrieved and used as the category to retrieve the posts in that category. If the category of posts you want to display is called "Events" then assign the Custom Field "category" with a value of "Events" to the Page. Note that this will adhere to pagination rules meaning that four (4) posts will display per page with links to older/newer posts provided.

Save this to pageofposts.php and then assign PageofPosts as the Template when creating the action Page:

<?php
/*
Template Name: Page Of Posts with Custom Fields
*/

get_header(); ?>
<div id="content" class="narrowcolumn">
<?php
if (is_page() ) {
$category = get_post_meta($posts[0]->ID, 'category', true);
}
if ($category) {
 $cat = get_cat_ID($category);
 $paged = (get_query_var('paged')) ? get_query_var('paged') : 1;
 $post_per_page = 4; // -1 shows all posts
 $do_not_show_stickies = 1; // 0 to show stickies
 $args=array(
  'category__in' => array($cat),
  'orderby' => 'date',
  'order' => 'DESC',
  'paged' => $paged,
  'posts_per_page' => $post_per_page,
  'ignore_sticky_posts' => $do_not_show_stickies
 );
 $temp = $wp_query; // assign orginal query to temp variable for later use  
 $wp_query = null;
 $wp_query = new WP_Query($args); 
 if( have_posts() ) : 
		while ($wp_query->have_posts()) : $wp_query->the_post(); ?>
	  <div <?php post_class() ?> id="post-<?php the_ID(); ?>">
    <h2><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>
    <small><?php the_time('F jS, Y') ?> <!-- by <?php the_author() ?> --></small>
    <div class="entry">
     <?php the_content('Read the rest of this entry »'); ?>
    </div>
    <p class="postmetadata"><?php the_tags('Tags: ', ', ', '<br />'); ?> Posted in <?php the_category(', ') ?> | <?php edit_post_link('Edit', '', ' | '); ?> <?php comments_popup_link('No Comments »', '1 Comment »', '% Comments »'); ?></p>
   </div>
  <?php endwhile; ?>
  <div class="navigation">
   <div class="alignleft"><?php next_posts_link('« Older Entries') ?></div>
   <div class="alignright"><?php previous_posts_link('Newer Entries »') ?></div>
  </div>
 <?php else : ?>
		<h2 class="center">Not Found</h2>
		<p class="center">Sorry, but you are looking for something that isn't here.</p>
		<?php get_search_form(); ?>

	<?php endif; 
	
	$wp_query = $temp; //reset back to original query
	
} // if ($category)
?>
	</div>
<?php get_sidebar(); ?>
<?php get_footer(); ?>

Example Using Custom Post Types

Custom Post Types allow WordPress sites to display many different types of content. This example displaying the posts on a Page belonging to a custom post type. In this case, the custom post type is book. The custom Page Template below can work in any Theme or as a Child Theme template file.

<?php
/**
 * Template Name: Page of Books
 *
 * Selectable from a dropdown menu on the edit page screen.
 */
?>

<?php get_header(); ?>
		<div id="container">
			<div id="content">
<?php 
$type = 'book';
$args=array(
 'post_type' => $type,
 'post_status' => 'publish',
 'paged' => $paged,
 'posts_per_page' => 2,
 'ignore_sticky_posts'=> 1
);
$temp = $wp_query; // assign ordinal query to temp variable for later use  
$wp_query = null;
$wp_query = new WP_Query($args); 
?>
<?php get_template_part( 'loop', 'index' );?>
	</div><!-- #content -->
</div><!-- #container -->
<?php get_sidebar(); ?>
<?php get_footer(); ?>

The Dynamic Nature of WordPress Pages

A web page can be static or dynamic. Static pages, such as a regular HTML page that you might create with Dreamweaver, are those which have been created once and do not have to be regenerated every time a person visits the page. In contrast, dynamic pages, such as those you create with WordPress, do need to be regenerated every time they are viewed; code for what to generate on the page has been specified by the author, but not the actual page itself. These use extensive PHP code which is evaluated each time the page is visited, and the content is thus generated upon each new visit.

Almost everything in WordPress is generated dynamically, including Pages. Everything published in WordPress (Posts, Pages, Comments, Blogrolls, Categories, etc.) is stored in the MySQL database. When the site is accessed, the database information is used by your WordPress Templates from your current Theme to generate the web page being requested.

An example of a static page might be an HTML document (without any PHP code). The problem with purely static pages is that they are difficult to maintain. Changes you make to your WordPress settings, Themes and Templates will not be propagated to pages coded only in HTML. The Page feature of WordPress was developed to alleviate this problem. By using Pages, users no longer have to update their static pages every time they change the style of their site. If written properly, their dynamic Pages will update along with the rest of your blog.

Despite the dynamic nature of Pages, many people refer to them as being static. They are actually called "pseudo-static" web pages. In other words, a Page contains static information but is generated dynamically. Thus, either "static," "dynamic," or "pseudo-static" may be validly used to describe the nature of the WordPress Page feature.