How to Use Page Templates in WordPress

Before I had a custom theme designed by Ryan Burrell, I would find free themes and do my best to modify them into a simulacrum of how I wanted my site to appear. Because I’m not a coder by any stretch of the imagination, this was often a painful process, and the documentation provided by WordPress was often confusing to me. It would tell me the code I needed, but not how to actually do anything with it.

When I began messing with page templates in WordPress, it took a while before I figured out the very simple tricks of how to actually implement them. Templates allow you to impress a great deal of variety on your site, with different pages looking different ways, and I’ll share a few basics with you in regards to setting them up.

Note: You can only use templates on Pages, not on Posts. For the sake of this exercise, we’re going to take a look at an Archive page and how you can modify its appearance and contents.

Name and create your template

There is one very simple component to creating a page template, and that is the meta data located at the top of your new template page. To start off, go into your theme’s files ((For those using a hosted WordPress solution that employs CPanel, that’s probably something like public_html/wp-content/themes/theme_name)) and create a new file titled archives.php.

Note: You have to be careful when naming template files to avoid overwriting existing files in the template. In this case, I already have an archive.php (used to display a list of posts within an archive, such as the page for September, 2009), so I had to name my template something else. ((In addition, some names are reserved by WordPress (such as index or sidebar) so avoid using these names. For a more detailed (and slightly bewildering) explanation, check out Template Hierarchy and Using Themes in the WordPress Codex.))

After you have created this file, open it for editing and place the following at the beginning of it:

 * @package WordPress
 * @subpackage Default_Theme
Template Name: Archives

The key, which I was missing for-freaking-ever, was that “Template Name: <name>” part. It wasn’t mentioned anywhere in the codex (at the time) so even though I had my template all created, I wasn’t able to select it for a page.

With that done, you can build your template. See the attached archives.rtf file for a full example of what my archives template looks like.

Select your template

Once your template file is built and ready, you’ll be able to see it when you create a new page in WordPress. Just select it from the drop down menu on the right!

Select the template using the drop down menu on your new page.
Select the template using the drop down menu on your new page.

Using Different Sidebars

I was asked recently how you would use different sidebars on different pages depending on the template, ((Rather than using a different sidebar for all pages, as my other guide details)) and the process should be pretty straight-forward. ((Though I haven’t tested this myself and, again, not being a coder I’m not confident in my logic here)) Just omit the call for the standard sidebar (using the WordPress get_sidebar tag) and call a different one using the following code:

You would, of course, have to have a sidebar2.php file in your template directory for this to work, but you get the idea.

Branding Emotionally

This post is part of an ongoing series of collaborative conversations. See that initial post for a table of contents of all articles in the series.

As I began to talk with Ryan about pursuing a new design for SilverPen Publishing, I lamented the fact that I have never really been satisfied with my website. This has resulted in changing its appearance and sometimes overall organization once or twice a year since I first set it up in 2004. I never quite knew what I wanted, and I’m not capable of designing it anyways, so I just found some pre-fabricated theme, slapped it on, and convinced myself that it’s good enough to use.

Of course, it never was good enough, and because my site’s design has never been how I truly wanted it to be, I have never been satisfied for long. This results in my changing the design after a few short months and, as Ryan pointed out, that prevents my readers from ever establishing a true connection with my site.

This connection, or at least what creates this connection, is referred to as “branding,” and the consideration of the subject is relatively new to me. As a writer, I continually hope that people will read what I write and continue visiting because they liked what they read. That might be the case eventually, but it takes a lot of work to get there.

Everyone knows you can’t judge a book by its cover, but we also know that when we’re strolling down an aisle at Barnes & Noble, it’s the covers and the titles that catch our eyes more than anything. Unless we went in looking for a specific author, and even if we did, we’re often going to browse around and pick something up that is pretty and visually interesting.

The same goes for a website. Something that is visually appealing, well designed, and easy to use is going to attract repeat visitors far more than a plain black and white page. This is even more important when the primary content is text-based; webcomic artists can have a spartan page because their primary content is visually appealing, but writers have no recourse to ocular stimulation beyond the design of their site or the inclusion of a photograph with their article.

Branding is more than having a good design, though. Continuity is important to maintain that connection with your readers. If your site changes on a regular basis, repeat visitors may think they’ve stumbled upon a different site entirely, not realizing that you’re just spastic and can’t settle on something. Especially if they don’t visit often, or are returning months later to find a particular article, maintaining a consistent site design can make all the difference between frustrating and exciting them.

By way of example, I have trouble remembering exactly where something is when I’m reading, so when I return to look for a particular quote or page, my search is a contextual one. I try to locate what I’m looking for based on its relation to other things. This might include how far down a page I recall the quote being, or the series of steps I took to reach a particular article. But if everything looks different visually or has been moved around, there’s a decent chance I’ll never find it. And if I can’t find something the first time, I’ll likely never go back and look again.

As readers become more familiar with a look, they begin to recognize it as indicative of a site. It becomes comfortable and evocative, and the easy recognition of particular elements will allow you to communicate more clearly with your readers. Using the same logo on your site and business cards will help people relate the two and, in turn, relate them to you as a person. Connections are formed in the mind that will help people remember your work more clearly and with greater longevity.

The key is to find a design you really like, that really suits you, and with which you are really comfortable. All three of those are crucial because the second step is to hold onto it. You’ve got to remain steady for a while if you’re going to establish any sort of emotional connection with your readers. Otherwise, the next time they return and you’ve changed everything up on them yet again, there’s a decent chance they’ll surf away, never to return.

Using a Second Sidebar for Different WordPress Pages

This post was originally written when I was using a different theme. That doesn’t affect the content, just wanted to let you know that my current theme (designed by Ryan Burrell) doesn’t use this particular method. Rather, it employs various templates to display bars as necessary. For more information, check out my guide How to use page templates in WordPress.

I wrote sometime ago about the visual design of a website, particularly a WordPress blog, and lamented the long sidebar that plagues so many sites. Like anyone else, I want to show everything I have to offer to my readers, but I know that my readers don’t necessarily want the same. End-users want the information they want and nothing else that might distract them from that information. Readers want data to be concisely presented and easy-to-read. A sidebar as long as my arm detracts from these goals.

Therefore, when I added some things to my WordPress sidebar (like a blogroll) that made it particularly long, I knew something had to be done. It’s all fine and well on the main page where ten blog entries make for a rather long site (and therefore the sidebar doesn’t look out of place). But when looking at a single post, the sidebar added a dozen inches below the comment box until you reached the footer. No good.

The WordPress Codex has some tips on creating a second sidebar and using this for other pages (such as when viewing just a single post), but beyond giving me the PHP tag for the sidebar, it didn’t do me a lot of good. The theme I use did not have the sidebar statement in the default location (which is normally sidebar.php in your theme’s files), and when I did find the code I needed to change, the tag listed in the WordPress Codex didn’t work.

My sidebar actually extends up from the footer, so it was the footer.php I needed to edit. Removing the standard sidebar tag, I entered the following:

When I first made this change, I discovered that, while it worked great for posts, my pages still had the longer sidebar. Since my Contact page is pretty short, this ran into the same problem as before: the page content had ended, but the sidebar just kept going. Therefore, the code needed to be modified slightly to accommodate pages as well as single posts.

Using an elseif statement, we are able to use sidebar2.php on both pages and single posts. If you have additional templates on which you wish to use a different sidebar (say you wanted a different sidebar on the category, archive, and portfolio pages as well), you might considering using a switch, but with my limited knowledge of PHP, using if/elseif/else statements worked just fine for me.