All About WordPress Custom Page Templates
WordPress is a powerful CMS, and it happens to be my personal choice as a web developer. At Blueprint, I have a chance to do custom WordPress theme development for clients. Some custom themes are simpler than others, and that depends on the each clients’ needs. Sometimes, when I am working on a custom WordPress theme, I find myself needing different templates for different Pages. That is where custom WordPress Page Templates come in.
What are custom Page Templates?
There is already a default Page Template in most WordPress themes called page.php which defines how a Page would look. If you have a custom Page Template, you can choose to use it when you are creating a Page in your WordPress dashboard to have it look different from the default Page.
Creating custom Page Templates are easy. All you do is place this in the very beginning of the custom Page Template:
<?php /* Template Name: Custom Template Name */ ?>
Default (page.php) vs. Full Page (custom Page Template) on Blueprint
Using custom Page Templates in WordPress theme development
One of the things I do often is create different banners for different pages. Let’s say I have a page template called custom.php for a custom Page Template. I can use WordPress conditional tags to define how banners will look different on Pages using custom.php.
<?php if(is_page_template('custom.php')) { ?>
<div id="banner" class="custom-page">
</div>
<?php } ?>
Let’s say I have a different background image for custom.php. I can define that through CSS in different ways. One way is to create a new stylesheet and use a conditional tag to use it on custom Page templates. Or I can just include the CSS in the main stylesheet, style.css.
To use the second method, the <body> tag needs to look like this:
<body <?php body_class(); ?>>
This function includes different CSS classes in the body tag automatically depending on which page you are seeing on a WordPress-installed website. On a Page using custom.php, you should see this class in the code: page-template-page-landing-php. What you would do then in style.css is this:
body.page-template-page-landing-php {
background-image: url("images/custom-background.jpg");
}
Conclusion
WordPress offers a lot of ways to customize it, and, along with making custom WordPress plugins, custom Page Templates are one way to customize WordPress to your needs. Learning about how to use custom Page Templates in WordPress development could really help bring your vision to life.
By: Blueprint
The comments are closed.
No reviews yet
