Today we will look into creating custom templates for a WordPress theme created with Artisteer. These themes are used when creating websites, to change the look and feel of the site.
What are templates?
Templates are basically variations on the layout of your default theme. You use custom templates when you want a page to look different from the rest of the other pages on your website or blog. When building or creating a website, you need to think on the layout first. For example, when I created this website I needed the home page to be the whole width of the page, with no sidebars on either side.
For this example I have created a theme that has a left sidebar, an article center, and a right sidebar. This will be called the “Default Template”. Next, we are going to create three custom templates: one page with no sidebars (full width), one page with the left sidebar and the center article (no right sidebar), and one page with the center article and the right sidebar (no left sidebar). I will show you how to do this quick and easy.
Step 1 – Create Artisteer Theme (Default Template)
Go into Artisteer and create the following theme for my WordPress Website:
Step 2 – Create template files
As you can see, this theme has two sidebars (left and right) and an article center. What I want to do is create three different templates:
Sidebar Left with Center
Center Only
Center with Right Sidebar
After creating the theme you want, export it into a directory. Go to this directory and find the file “page.php”, and make three copies of it and call them:
page-sb1-center.php – sidebar left with center
page-center-php – center only
page-center-sb2.php – center with right sidebar
You can actually call them anything you want, I like to use descriptive names.
Step 3 – Research the definitions
Let’s take a look at the original page.php file:
I have highlighted the two lines we will be editing. The first line:
defines the left sidebar (sidebar 1) and the center content. The second highlighted line:
defines the right sidebar (sidebar 2). Next, look at is the “style.css” file. Open this file and do a search for “art-content” (got this from class=”art-content”). The first result will give you the high level definition. Search again. The second time you will get to the definition of the block. Here you will see three definitions that look something like this (NOTE: I am using Artisteer 2.2. The nomenclature has changed a bit, so if you have an earlier version of Artisteer the definition names might look a bit different):
These are the three definitions that we are looking for:
art-content-sidebar1 – defines the content (center) area with sidebar 1
art-content-sidebar2 – defines the content (center) area with sidebar 2
art-content-wide – defines the content (center) area alone, full width with no sidebars
Step 4 – edit the files
To create a template file, you need to add the following code to the beginning of the files you are editing:
Where “name” is the name of the template you are creating. This is also the name that will be displayed by WordPress when you are in the “Add Page” screen.
First file: Page-sb1-center.php
Add the following code to the top of the page:
Replace the line:
With:
Delete the line (at the bottom of the file):
Save the file. The finished file will look like this:
Second file: Page-center-php
Add the following code to the top of the page:
Replace the whole line:
With:
Delete the line (at the bottom of the file):
Save the file. The finished file will look like this:
Third file: Page-center-sb2.php
Add the following code to the top of the page:
Replace the whole line:
With:
Save the file. The finished file will look like this:
Step 5 – Create a page and apply template definition
Download the theme files to your WordPress installation, and activate the theme. Go to Pages, then Add New, and click on Templates (right side). Select the template you want to apply and click on Preview to make sure you have the right template. And that’s it. Very simple, and very flexible.
I hope this tutorial has been helpful, let me know what you think. To learn more secrets, click on the link Make a Website using WordPress.
10 comments
Leave a Reply
Add that Professional look and feel to your website...
Check out this Outstanding Website Graphics Package at a killer price!
Now that your WordPress website is up, have you Optimized it for the Search Engines?
Learn how to optimize your website so that the search engines can find it!
Need Traffic for your Website?
Check out this great Video Training on Getting Facebook Traffic!
 |
 |
|
 |
 |
|
 |
 |
Great article. You’ve answered a lot of questions!! It does however create a new question.
How will this effect widgets? My concern is will the widgets work with the variation of columns, no columns, one column etc.
Thanks for the great information.
Hi Les, Thank you for your comments. Yes, the widgets work fine even after you have made some of the modifications I mention in the article. For example, on this website, I use these modifications. The main sales page is set for a full page with no columns, and the rest of the website has a column on the right with widgets on it. It seems to be working fine.
Thanks for taking time to do this video tutorial. It helped me to create a full width page on my blog.
Cheers.
Fantastic Tutorial – was looking for something just like this – quick question for you – how do you add the captcha code to comments like you have here?
Thank you!
Hi Jon,
Check out this plugin for the Captcha:
http://wordpress.org/extend/plugins/si-captcha-for-wordpress/
Ovidio.
Hi – thanks for the great tutorial, its exactly what I was looking for.
I like the simplicity of designing a fully featured page and then
stripping it of the items you dont need.
Any chance you can do an update for Artisteer 3 ?
Thanks for this…
It would be a dream, if you can also add a workaround for a template without a header. Just the navigation bar and maybe the footer.
Thanks!
I believe you can do this on the latest version of Artisteer.
Great tutorial. Any chance you can do an update for Artisteer 3.1 ?
Actually, a lot of this functionality is already present in Artisteer 3.1. For example, they have added page templates for full page on the new product. Check it out.