Technology

Creating new templates in WordPress

Posted by Pixafy Team

wordpress-category

The great thing about WordPress is not only is it easy to manage your own site content, but it’s easy to manage how your site looks. The Appearance tab on the left side of WordPress’ dashboard is full of all the bells and whistles needed to make your site visually stunning. And if you’ve tinkered around with the Editor in the Appearance tab, I’m sure by now you’ve realized how easy it can be to edit your current theme.

But what if the options available to you aren’t enough? Having a general style for your pages and blog posts is fine, but what if you want each page to have its own spotlight, and what if you want each category of posts to have it’s own flair?  This can get really complex depending on how far you’d like to go, so for now we’ll just cover some basic techniques – how to create a page template and how to create a template for a category.

Page template

Some themes such as WordPress’ Twenty Twelve theme come with separate template files so that you can have a separate homepage design with it’s own sidebar of widgets. Assuming that your homepage is a Page and your theme does not already have this feature, you can make a template of your very own.

In your WordPress directory of files, you should see wp-content > themes > whatever your theme folder is. Depending on your theme, by default, WordPress gets its content from page.php inside of your theme folder. If you directly edit this file, it would affect all Pages.

*Tip: If there’s only a subtle difference between all of your Page styles and you don’t want to make entire templates for each Page, you can edit the page.php/loop-page.php/content-page.php directly and use conditional tags. Or you can make a template of your own with the conditionals inside.

So to maintain organization and to make changes easily reversible to the default theme styles, making a template is recommended. A great way to start is to make a copy of page.php. If you’re using Twenty-Twelve or a theme based on Twenty-Twelve, you can go into the page-templates folder and make a copy of front-page.php as well, but for this example, we’ll make a copy of page.php. Then you can rename it to anything you’d like. For the sake of this tutorial, we’ll call it “about-template.php” for an about page.

Once this file is created, now what? How does WordPress know what to do with this? One way WordPress finds its Page templates is by the PHP that is commented out inside of the files. If you open your about-template.php, there will most likely be a PHP comment on top. If there isn’t, you can write one yourself like below or add this in to the already existing comment:

<?php /* Template Name: About Template */ ?>

Save your file. Now, in the WordPress Dashboard, if you don’t already have a page to test this on, we can make one. Make a page called “About” and on the right side, you will see a panel called “Page Attributes.”

*Tip: If you don’t see the box, navigate to the top right of the page to a little tab called “Screen Options” – open it and make sure “Page Attributes” is checked off. Checked means visible; unchecked means invisible.

In the Page Attributes box, under the template drop down, you should see the name that you gave the file inside the PHP comment, not the actual name of the file. In other words, you should see About Template, not about-template.php. Whatever you wrote in that PHP comment should be what appears in that drop-down menu.  Pick that template name from the list, click the update button, and voila, your template is applied to this page. Now you’re free to tinker around on your template without interfering with other Pages unless the template is applied elsewhere.

The second way WordPress finds it’s Page templates without the process of having to go to a Page and physically apply a template, is to name the template file beginning with “page-” and either the slug or the ID of the page.

Using the About Page example above, if we re-name our template from about-template to page-about.php instead, WordPress will automatically apply this template to the About Page without having to assign it using the Page Attributes drop-down menu. This is the easiest way to apply a template to a Page, but it can offer less control, as if the Page slug changes, the template will no longer apply if there is no PHP comment inside saying otherwise. If the template is physically applied via the drop down, then even the slug changes, the template will still be assigned on the dashboard unless you physically remove it.

One final note: normally, the loop is called in page.php/your new template. If you don’t want to manually include the loop in the same template file, you can call it separately like page.php does by creating your own loop/content file. Make a copy of loop-page.php/content-page.php. Re-name these to something like loop-about.php/content-about.php. In your about-template.php (which is a copy of page.php in case you need to fetch it again) where it says either:

get_template_part( 'content', get_post_format() );

or

get_template_part( 'loop', ‘page’ );

Replace it with your new loop/content files like so:

get_template_part( 'content', ‘about’ );

or

get_template_part( 'loop', ‘about’ );

Category template

A Category template is for an archive of categories – a list of posts under a specific category. For example, if you have a Page as your homepage, and have applied a “blog” category to all of your posts intended for your blog, you can see this with yourSite’sPath/category/blog assuming that you have your permalinks set to Post Name.

If you already have categories, you can see what an archive looks like by going to the Posts tab on the left side of your WordPress dashboard, and going to Categories. On the Categories page, on the right side there is a table of all your categories. Hover over one of them and click on the “view” option that becomes available. The page that it takes you to is the archive of that category.

By default, WordPress gets its content with Category.php. We can make a template, like the Page template, by making a copy of this file to start. WordPress finds category templates by the name of the file, just as page templates do, instead of any PHP comments inside. There are two ways to name this file – either by slug or ID.

You can find the slug of a category by navigating to Posts > Categories on your dashboard, and clicking on a category for details. It will have the slug listed to the left of the table. For the ID, instead of clicking into the category for details, hover over it and in your browser you should see something like category&tag_ID=15 (15 being the unique number it is assigned). You can also see the ID by viewing the archive, and inspecting the page in your browser. On the body tag, it should have a class called category-15, assuming again that 15 is our ID.

So to re-name our file with either of these methods, we would use:

category-blog.php

or

category-15.php

And that’s it. The template file name should always start with the words “category-”. Unlike Pages, we don’t need a dropdown or PHP comment of any sort. WordPress will look for files named this way first before it defaults to files like category.php.

*Tip: To style the loop/content files called in category.php/your template if it’s still an exact copy, check out our earlier post: Create special templates for posts in a category.

Now that you have the basics of templates at your disposal – Page templates and category templates – you can take your site a step further visually. But there is always more to do and more to learn, so if you’re interested in some new techniques – stay tuned to our future post, Family Heirarchy – pages within pages.

How do you use WordPress’s templating engine to achieve cool results? Share with us in the comments!