Create a custom page template

You really like your blog. The layout is great. And you’ve got exactly what you want in the sidebar. Except for one thing… you don’t want the sidebar to show up on your ProofBuddy pages.

Well, fortunately WordPress makes it relatively easy to customize a template that’s only used for ProofBuddy pages.

Before we start though, this page is describing something different than the Templates link under the ProofBuddy menu. If you just want to easily change the layout of your album, cart, or checkout pages; but want to keep the overall page layout the same you’ll want to edit templates there. This page describes a way to make WordPress use a different template file which happens above the level of ProofBuddy.

You’ll also need either a bit of PHP / HTML experience or willingness to give it a shot.

The Twenty Twelve Theme

We’re going to go through this tutorial using the Twenty Twelve theme that comes with WordPress. If you’re already using this theme then you should be able to just follow along. If you’re using a different theme, and you probably are, then you’ll have a bit more work to do. Nothing too bad, but if you’d rather just have us do it, we do offer customizations so let us know how we can help.

Creating a Child Theme

First thing we want to do is create a child theme. We’re going to do this because of the way WordPress handles updates. If you are using a theme and that theme is updated either through the update page in WordPress or when WordPress itself it upgraded any customizations you do directly to the theme will be overwritten. And we don’t want that.

A child theme needs to have a folder under the /wp-content/themes/ folder on your server and only requires a single file – style.css. We’re going to call the folder /my-theme/ for this tutorial so your style.css would be /wp-content/themes/my-theme/style.css.

The style.css file for your child theme needs to contain at least the following.

Theme Name: My Child Theme
Template: twentytwelve

@import url("../twentytwelve/style.css")

Lines 1-4 are the CSS file header and required for WordPress to recognize your child theme folder as a theme. The /* and */ mark off a comment, and there are other lines you can put if you want. Take a look at the WordPress codex page on Child Themes for the full list.

Line 2 is the name of your theme and what you’ll select in the WordPress admin.

Line 3 is the folder of the parent theme, in this case twentytwelve. Note that it matches the folder name of the theme, not the written name – “twentytwelve” instead of “Twenty Twelve”.

And line 6 imports the existing style.css file from the Twenty Twelve theme so you don’t have to copy and paste.

If you want to customize your CSS, place it below the @import and anything you put in will override the theme CSS. Take a look at our tips post on using custom CSS for a bit more on how you can do more with CSS.

Once you get the folder created on your server with your style.css uploaded go ahead and login to your WordPress site and select your new theme. At this point your site should not change at all. It’s still using the files in the Twenty Twelve theme as a fallback. Only files that you put in the /my-theme/ folder will be used.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>