When discussions commenced about the recent Oneupweb rebrand which, of course, included a complete redesign of our corporate website, we knew that one of our goals was to implement a Content Management System (CMS). After much research into feature sets of the multiple CMS options available to us—both paid and open source, i.e. free—and weighing those options against our own internal needs, WordPress became our obvious choice.
What ensued was, first and foremost, a slight freak out on my part because I knew I was about to enter uncharted territory and ultimately, an opportunity—albeit forced—to learn some valuable skills about custom WordPress theme development.
As a traditional web designer and front end developer, who’s been used to a particular way of developing websites since the days of strategically fitting ImageReady sliced images into straight tables, the idea of using a blogging platform—yes, a blogging platform—to develop our new website was completely foreign to me. My idea of traditional website development—in the here and now of 2009—starts with a well thought out site map that clearly defines file structure and navigation, and ends with pretty, relatively-linked standards compliant CSS-based pages, complete with creative copy, miscellaneous forms, scripts and sweet applications mixed nicely in between.
So, after dragging my feet for a few days on the project, I finally accepted that I had no choice but to step outside my comfort zone and start work on our new, WordPress-based website. Imagine my surprise when I took my first step over that line and discovered that the only real major difference in development comes from the use of a database to store page and post content—eliminating the need for a traditional file structure and linking system—while the remaining differences still fell within familiar territory. But said discovery wasn’t handed to me on a silver platter—it came through a series of trials and errors (and, of course, some assistance from the more left-brained designers and developers in the company). What follows is a detailed description of the one lesson I wish I would have learned prior to commencing development on my first custom WordPress theme:
You aren’t limited to the default theme files for displaying your posts and/or pages—you can create as many custom page and post templates needed for your custom theme.
Think of your page and post templates as files within a traditional website structure that are simply “called” to a particular page or post from your WordPress admin area, rather than being traditionally linked together. OneUpWeb.com actually uses a custom page template for each page in the site, and a custom post template for each category. Please note that there are very slight differences between page and post templates—in fact, the current WordPress build (2.7.1 at posting time) doesn’t even offer custom post templates as a standard option, so developers must turn to the Custom Post Templates plug-in to create them—and trust me, this plug-in is a must have!
So, how are custom page and post templates created?
Unless you’re developing a theme for public distribution, in which you must follow a specific set of rules for default compatibility, you can create your template files in whatever manner best fits your website needs and development style. Most default theme index.php files (the template that will, by default, display your multiple post pages) consist of, and are ordered in the following manner:
header.php
theloop.php
wp-comments.php
sidebar.php
searchform.php
footer.php
The separation of these PHP files is simply a way to call in blocks of code, in an organized fashion, that will fit together in the same way as a standard HTML or XHTML file—just separately! This means that your header.php file might contain an opening containing div tag, while the footer.php file contains its respective closing div tag. Keep in mind, though, that the most important block of code is theloop.php—this is the code that will call the post and page information from your database, and without this, none of your post or page content will display.
I should also note that once a user clicks through to a single blog post (usually by clicking the post title link), the default template file used is single.php, rather than index.php. All publicly distributed themes will include this file in their build. However, feel free to use as many different single post templates as needed—just don’t forget that you need the Custom Post Templates plug-in in order to create them.
Creating Custom PAGE Templates
So, assuming you have a basic understanding of the default file layout based on the above information (and if you don’t, this page in the WordPress Codex is chock full of information), page templates are defined by two things:
- File name, i.e. skippy.php. You can name these files anything you want, EXCEPT for those listed on this page—this file name list is reserved for default theme builds. The uniquely named file must be uploaded into your theme folder at the same level as the default index.php, single.php. header.php, etc. files.
- The following code that is placed at the very top of your template file:
<?php
/*
Template Name: Skippy
*/
?>
In the above example, the template name of Skippy will appear in the Page Template drop down menu of your WordPress admin, located in the “Attributes” module:
Creating Custom POST Templates
Once your Custom Post Templates plug-in is installed, the steps to creating custom post templates are almost identical to those taken to create custom page templates, with one exception—where the template name is defined at the top of the file, simply add the word “Posts” as shown in the example below:
<?php
/*
Template Name Posts: Kirby
*/
?>
In the above example, the template name of Kirby will appear in the Post Template drop down menu, which appears as a separate module in your admin area:
There you have it—a quick lesson on customizing your WordPress blog design via the creation of custom post and page templates. To give you an idea of WordPress’ flexibility, take a look at Oneupweb’s recently redesigned WordPress-based website, and consider the players:
# of Categories = 14
# of Posts = 635 (althouh our massive Glossary section is responsible for 328 of these!)
# of Pages = 42
# of Page Tempates = 56
# of Post Templates = 11
Talk about breaking the default mold.
GD Star Rating
loading...
