Online Test Banks
Score higher
See Online Test Banks
eLearning
Learning anything is easy
Browse Online Courses
Mobile Apps
Learning on the go
Explore Mobile Apps
Dummies Store
Shop for books and more
Start Shopping

How to Make Custom Page Templates in WordPress

Using WordPress Page and Category templates, you can provide a different type of reader experience by defining the style with CSS and the features and functions with template tags. You see this often on websites that offer more than simply a blog.

Websites that sell products or services, or news websites that focus on articles, content, and advertising, use different page, or content, templates to achieve various layouts and styles all within the same website, using the tools WordPress gives them.

The default Page template (page.php)

You can see that the standard Page template (page.php) file displays regular static pages on this site in a two-column format. The content is on the left, and a sidebar is on the right of the About page.

image0.jpg

The default Page template that creates the display uses basic WordPress template tags to call in the header, content, sidebar, and footer files. The code within the template looks like this in the page.php template file for this theme.

<?php get_header(); ?>
<div id="main">
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<div id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
<h3 class="title"><a href="<?php the_permalink() ?>" rel="bookmark"><?php the_title(); ?></a></h3>
<div class="entry">
<?php the_content(__('(more...)')); ?>
</div>
<?php endwhile; else: ?>
<p><?php _e('Sorry, no posts matched your criteria.'); ?></p>
<?php endif; ?>
</div>
</div>
<div id="side">
  <ul>
  <?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('Blog') ) : ?>
  <?php endif; ?>
  </ul>
<?php get_footer(); ?>

How to create a new category Page template

You can use the Page template (page.php) to define the layout and style for all the internal pages on your website, providing a standard and consistent style for your visitors. However, if your website also publishes a portfolio of work that you’ve done for clients, you probably want that page to have a different style from the rest of the pages because it presents images that represent your past work.

To accomplish this, create a Design Portfolio category on your site, and for every entry you want to appear on the Portfolio page, create a post and assign it to the Design Portfolio category. You can see that it’s mainly made up of thumbnail images that are clickable through to a full article providing a case study on the design project itself.

To accomplish this display, create a specific template for the Design Portfolio category: category-portfolio.php. Every post you create that’s assigned to the Design Portfolio category appears in the format that you’ve defined in the category-design-portfolio.php template in your theme folder.

image1.jpg

If you want the Portfolio page to display a listing of images only, assign a featured image to each portfolio post, and then in the category-portfolio.php template, do the following by using this code:

  1. Tell WordPress to display each post from the Design Portfolio category, but only display the featured image.

  2. Link that featured image to the individual post page.

The code to create the Design Portfolio display looks like this:

<?php get_header(); ?>
<div id="main" class=”fullwidth”>
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<div id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
<div class="entry">
<a href="<?php the_permalink(); ?>"><?php the_post_thumbnail('thumbnail'); ?></a></div>
<?php endwhile; else: ?>
<p><?php _e('Sorry, no posts matched your criteria.'); ?></p>
<?php endif; ?>
</div>
</div>
<?php get_footer(); ?>

Compare two Page templates

The differences between the default Page template and the Category template are subtle.

Element In Page Template? In Category Template?
Call to the Header template <?php get_header(); ?> Yes Yes
Two-column layout Yes. The <div id=”main”> styling is defined in CSS with a width: 600px. No. The <div id=”main” class=”fullwidth”> is defined in CSS with a width of 900px.
Call to the post/page title <?php the_title(); ?> Yes No
Call to the post/page content <?php the_content(); ?> Yes No
Call to the featured image <?php the_post_thumbnail(); ?> No Yes
Call to the Sidebar template <?php the_sidebar(); ?> Yes No
Call to the Footer template <?php the_footer(); ?> Yes Yes

The differences between the standard, default page layout and the portfolio category page layout are but one example of the power behind the WordPress theme engine. The theme engine allows you to designate and define custom looks, layouts, and designs for different types of content. This feature helps you create unique websites for you and your clients and is the true power behind using WordPress as a CMS.

A lot of people still think of WordPress as simply a blogging platform where you can have and display a typical blog on your domain; however, with the example, you can see how you can have a blog and so much more on your website with just a few simple tweaks and adjustments to the templates that power your website theme.

  • Add a Comment
  • Print
  • Share
blog comments powered by Disqus
Advertisement

Inside Dummies.com

Dummies.com Sweepstakes

Win $500. Easy.