Creating Custom WordPress Pages

One of the powers of WordPress has always been its custom Pages feature. It’s one of the least understood, most under-utilized, and most often misused feature WP has. In order to harness the power of WordPress, and to drive a non-blog site, understanding and exploiting custom Page templates is essential. I’ll show you here how to create a custom WordPress Page and show you some examples of how we’ve used custom Page templates in our clients’ web sites.

You can read more about WordPress Pages in the WordPress Codex, but in a nutshell, just remember that Pages aren’t generally meant to contain post information. They are used to contain static content on your web site. And since you can’t generally place live PHP code into the “content” area of a Page or Post without a plugin, if you have this type of code in your static content, the solution is to place that code into a special Page template. There are as many ways to use WP’s custom Page templates as your imagination allows. So let’s create a new Page template now, shall we?

The first thing you’ll want to do is open the original WordPress Page template (page.php) in your favorite text editor. [NOTE: Microsoft Word is not a text editor!] Use Save As to make a copy of it. Give your new Page template a meaningful name and a *.php extension. If your text editor lets you, save it in UTF-8 format. Now we can perform surgery on our new file.

In order to make WordPress recognize the new template, you’ll need to put some code at the top:

<?php
/*
Template Name: My First Custom Page
*/
?>
<?php get_header() ?>

Some hints on naming your page template. WordPress automatically appends the word “Template” to the name in the Page Template selection area (the dropdown list of Page templates you see when you are creating or editing a Post or Page). So if you name your new template “My New Page Template” you will see My New Page Template Template in the dropdown!

The default theme’s Page template doesn’t have comment code in place, and that’s appropriate. Comments really have no place on a static page, other than in very limited circumstances. If you see comment code in your Page template, it might be because the particular theme you are using provides it. But if you aren’t going to allow comments on the page, go ahead and remove that code.

You can add just about any kind of feature or functionality to a custom Page template. The sky — and your imagination — is the limit, so have fun! Once you’ve got your new template the way you want it, upload it to your theme folder and don’t forget to change permissions to 766 so that you can edit it later from within your Theme Management area. Voila, you’re done!

Examples of Page Templates and Their Uses

We’ve had occasion to craft custom Page templates for our various web design clients.

Custom Links Pages

One of the most interesting customizations is WP Links (previously known as Bookmarks). You can use a Page template to serve different categories of Links. We’ll talk in a later article more about the WP Links feature, but for now, let me show you the code we used to create a custom membership listing. We set up a category called “members” under WP Links and began to add our member band listings (which consisted of the band name, its web site link and a brief description). In our custom Page template, we placed this code:

<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<div class="post">
<h2>Proud Member Bands of BLUSD</h2>
<p>Is your band listed below? If not, just have at least one person in your band become a member of BLUSD, and we will add your band to the list. If you have a website, a direct link to your site will be included.</p>

<p>Also, <strong>all BLUES bands</strong> (members or not), be sure to forward your monthly gig schedule to our Gig Calendar Editor by the 20th of each month.</p>

<ul class="bands">
	<?php wp_list_bookmarks('category=2&title_li=&show_description=true&between=:  '); ?>
</ul>
<br /><br />
<div class="top">Back to the <a href="#">top</a>.</div>
<div class="note"><?php edit_post_link('[Edit]'); ?></div>
</div><!-- /post -->
<?php endwhile; endif; ?>

Here’s the resulting page: Custom Membership Page

One Column Page Template

Another great use for a custom Page template is to create a one-column page without the WordPress sidebar contents. You’ll need to be sure to create a special division in your stylesheet for the wide content style and make sure that you structure your pages so that the sidebar isn’t loaded from within your index.php or page.php template.

<div id="wide-content">
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<div class="post" id="post-<?php the_ID(); ?>">
	 <h3 class="storytitle"><a href="<?php the_permalink() ?>" rel="bookmark"><?php the_ttftitle(); ?></a></h3>
	<div class="storycontent">
		<?php the_content(); ?>
	</div><!-- /storycontent -->
</div><!-- /post -->
<?php endwhile; else: ?>
<p><?php _e('Sorry, no posts matched your criteria.'); ?></p>
<?php endif; ?>

<?php posts_nav_link(' &#8212; ', __('&laquo; Older Posts'), __('Newer Posts &raquo;')); ?>
</div><!-- /wide-content -->

Custom Archive Pages

Here’s a custom archive page I created for my personal blog awhile back.

<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<div class="post">
	<h3 class="storytitle"><?php the_title(); ?> - <?php bloginfo('name'); ?></h3>
	<h4>All Internal Pages:</h4>
	<ul>
	<?php wp_list_pages('title_li='); ?>
	</ul>
	<h4>Last 50 Entries:</h4>
	<ul>
	<?php $archive_query = new WP_Query('showposts=50');
	while ($archive_query->have_posts()) : $archive_query->the_post(); ?>
	<li><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title(); ?>"><?php the_title(); ?></a> (<?php comments_number('0', '1', '%'); ?>)</li>
	<?php endwhile; ?>
	</ul>
	<h4>Archives by Month:</h4>
	<ul>
	<?php wp_get_archives('type=monthly&optioncount=1'); ?>
	</ul>
	<h4>Archives by Category:</h4>
	<ul>
	<?php wp_list_cats('sort_column=name&optioncount=1'); ?>
	</ul>
	<h4>Available RSS Feeds:</h4>
	<ul>
	<li><a href="<?php bloginfo('rdf_url'); ?>" title="RDF/RSS 1.0 feed"><acronym title="Resource Description Framework">RDF</acronym>/<acronym title="Really Simple Syndication">RSS</acronym> 1.0 feed</a></li>
	<li><a href="<?php bloginfo('rss_url'); ?>" title="RSS 0.92 feed"><acronym title="Really Simple Syndication">RSS</acronym> 0.92 feed</a></li>
	<li><a href="<?php bloginfo('rss2_url'); ?>" title="RSS 2.0 feed"><acronym title="Really Simple Syndication">RSS</acronym> 2.0 feed</a></li>
	<li><a href="<?php bloginfo('atom_url'); ?>" title="Atom feed">Atom feed</a></li>
	</ul>
	<?php endwhile; endif; ?>
</div> <!-- /post -->

So you see, there are a lot of ways you can use a custom WordPress Page. Do you have one that you want to share? Drop a comment!

Resources: Here’s a link to a Wikipedia list of Text Editors. We highly recommend, and enthusiastically use, EditPlus. Find the one that suits you best. If you develop web sites for a living, or are a serious hobbyist, you’ll appreciate it.

Joni

Joni Mueller has been designing web sites for hire since 2003, when she first blew up her web host’s server by insisting on running Greymatter. Since then, Joni has designed for Blogger and Movable Type, TextPattern, WordPress and CMS Made Simple. She lives with her cat and shoe collection in a bucolic old section of Houston called Idylwood. For some strange reason, Joni likes to refer to herself in the third person. When she’s not working on web design, she’s ordering lawyers around. And blogging about it. Or both.

www.jonimueller.com