Artisteer themes, by default give you a one-column page template as well as a template with your sidebar(s) if you choose to create a theme with a sidebar. In your page editor in WordPress, you’ll see in the right hand column just below the “Publish” button, there is a drop-down menu that gives you your page template options. So, on any page, you can choose either the one-column or default page template.

What if you want a unique page styling or design for a specific page on your blog other than just one or two column options? You would simply need to create a new page template. With a new page template, you could have a completely different header styling, call to a separate menu, create a splash page with a separate widget area for sliders, and the list could go on and on.

I’m going to give you an example of how I used this technique to create a unique home page for a recent design project. You’ll notice in the example images below, the home page has a large banner area with a slider to one side and some text to the right, but no regular sidebar. The second image is the default page template with the regular sidebar and no extra banner area in the top.

First, I’ll show you how to create the new page template, then I’ll show you how to modify and style it.

1.) Make a New Page Template: Open a copy of your page.php or your onecolumn-page.php file in a text editor like Notepad (In my case, I opened up the onecolumn-page.php file because I didn’t want the regular sidebar to appear on this page.) Add the following code to the top of the file and be sure to give your template name something that defines what type of page you are making:

<?php
/*
Template Name: splash-page
*/
?>

2.) Save Your New Template: Hit Save As, and rename this page as something different (matching the template name you gave it). Just make sure that you include the -page.php part at the end. In my case, I entitled my page splash-page.php.

3.) Edit Your New Template: What you add or take away from the template is completely up to you. In my case, I wanted to have a different header for the page. The only change I made to this new page template, though, was to call to a new header file. To do this, I just adjusted the following code from this:

<?php get_header(); ?>

to this

<?php get_header('2'); ?>

Notice that in the first line, there is nothing within the parenthesis. this just tells WordPress to find the first header.php file it finds. In the second version, I’ve added 2 in quotation marks because I want WordPress to find the header-2.php file that I created.

3.) Create a New Header File: Open up your header.php file, and save it as header-2.php. Now, add the changes that you want within that new header. In my case, I added some extra sidebars to the header. See my tutorial on how to add a widgetized sidebar into your header.

The following is what I added to the end of my new header file because I wanted my sidebars to rest directly on top of the page content.

This is what the bottom of the original header file looked like after the final div of the menu code:

    <div class="cleared reset-box"></div>
    <div class="art-sheet">
        <div class="art-sheet-body">

This is how the code looked after I added my banner to the new header file:

   <div class="banner">
    <div class="banner-center">
	<div class="banner-left-wrapper"><?php get_sidebar('banner1'); ?></div>
        <div class="banner-right-wrapper"><?php get_sidebar('banner2'); ?></div>
    </div>
    </div>
    <div class="cleared reset-box"></div>
    <div class="art-sheet">
        <div class="art-sheet-body">

Note: This is a great way to add a secondary menu that can only be found on certain pages (for example, if you want different menu items shown on a certain page.) Use my post on how to create a secondary menu to see how you can do this. All you have to do is register a new menu, then replace the primary menu from the new header file with your new secondary menu, and if you want it to look the same as your other menu, you don’t have to adjust anything else.

4.) Style Your New Header: This would apply only if you are adding something that you want to look completely different (rather than just a different menu). In my case, I just needed to add style to the new sidebar area and the wrappers that surrounded it. This is what my code looked like that I added to my css file:

/* begin Banner */
div.banner
{
  position: relative;
  width: 100%;
  height: 285px;
  background-image: url('images/banner.jpg');
  background-repeat: repeat-x;
  overflow: hidden;
}

div.banner-center
{
  position: relative;
  width: 900px;
  height: 285px;
  margin: 0 auto;
}

div.banner-left-wrapper
{
  position: absolute;
  display: block;
  width: 555px;
  height: 265px;
  top: 10px;
  left: 10px;
  border: 1px dashed #965b4c;
}

div.banner-right-wrapper
{
  position: absolute;
  display: block;
  width: 300px;
  height: 285px;
  top: 5px;
  right: 10px;
}
/* end Banner */

That’s all there is to it. The possibilities for styling or editing the code are endless. Remember, that you can also call to a new footer in the new page template that you create, modify the way that the loop is displayed, or call to different sidebars.

Other Suggestions:

• If you want to adjust how categories appear, simply create a new archive.php, modify, and save it as category-(insert ID here with no parenthesis).php file.
• This would also apply to styling a single post, etc.

© 2011 – 2012, reflectingthedesigner.com. All rights reserved.