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.
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.
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:
Tell WordPress to display each post from the Design Portfolio category, but only display the featured image.
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
|Two-column layout||Yes. The <div
id=”main”> styling is defined in CSS with a
|No. The <div id=”main”
class=”fullwidth”> is defined in CSS with a
width of 900px.
|Call to the post/page title <?php
|Call to the post/page content <?php
|Call to the featured image <?php
|Call to the Sidebar template <?php
|Call to the Footer template <?php
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.