We have has several requests to re-create our popular Multiple Template tutorial, as there was a change in the page structure when Artisteer released version 2.4 we have created this tutorial with version 2.4.

You will learn better if you follow along with your own theme, with Artisteer Version 2.4 follow these guidelines, create yourself a theme, set the Sheet > Width to 1000px, then Layout > Columns > Three Columns at the bottom of the drop down panel you will see “Width Options” set ‘Column 1 Width:’ to 20% and ‘Column 2 Width’ to 20%, export your theme.

You can see the live theme we created below with the Templates Page here:

Create a Theme

Your layout might look something like this one we created just using the “suggest options” for each element, it is worth spending time getting used to the Artisteer product rather than rushing in and creating themes, once you know your way around the product it becomes much more usable, many changes that are requested can be done within the Artisteer interface.

Stylesheet

With version 2.4 Artisteer have done a lot of the work for us, open style.css and locate this block of code.

We do not need to change anything here.

/* begin LayoutCell, content */
.art-content-layout .art-content
{
   width: 60%;
}
.art-content-layout .art-content .art-block
{
   background-color: #ABCBE3;
}
.art-content-layout .art-content-sidebar1
{
   width: 80%;
}
.art-content-layout .art-content-sidebar2
{
   width: 80%;
}
.art-content-layout .art-content-wide
{
   width: 100%;
}
/* end LayoutCell, content */

As you can see Artisteer have added extra styles in this version so we now have 4 that we can use for our new ‘Page Templates’.
.art-content-layout .art-content (two sidebars)
.art-content-layout .art-content-sidebar1
.art-content-layout .art-content-sidebar2
.art-content-layout .art-content-wide (no sidebars)

Sample Page

First lets create a sample page we can use to make our templates, open the file in your theme folder called page.php

The first few lines will look like these:

<?php get_header(); ?>
<div class="art-content-layout">
    <div class="art-content-layout-row">
<?php include (TEMPLATEPATH . '/sidebar1.php'); ?><div  class="art-layout-cell art-content">

We will add in code for our template name and sidebars, we will have to at the top and two at the bottom of the file and will delete them as we need later.

At the top of the file add the template code and sidebar2.php  line.

Insert lines numbered 01 through to 05 and line number 11

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

<?php get_header(); ?>
<div class="art-content-layout">
    <div class="art-content-layout-row">
<?php include (TEMPLATEPATH . '/sidebar1.php'); ?>
<?php include (TEMPLATEPATH . '/sidebar2.php'); ?>
<div class="art-layout-cell art-content">

<?php if (have_posts()) : while (have_posts()) : the_post(); ?>

Add the extra line for sidebar1.php at the bottom of the file as well:

Insert Line  number 3:

</div>

<?php include (TEMPLATEPATH . '/sidebar1.php'); ?>
<?php include (TEMPLATEPATH . '/sidebar2.php'); ?>
    </div>
</div>
<div class="cleared"></div>

<?php get_footer(); ?>

Save the file as sample.php

Templates

1. Open sample.php
2. Change ‘Template Name: Sample’ to Template name: Wide Page
3. Delete first <?php include (TEMPLATEPATH . ‘/sidebar1.php’); ?>
4. Delete first <?php include (TEMPLATEPATH . ‘/sidebar2.php’); ?>
5. Change <div class=”art-layout-cell art-content”> to <div class=”art-layout-cell art-content-wide”>
6. Delete second <?php include (TEMPLATEPATH . ‘/sidebar1.php’); ?>
7. Delete second <?php include (TEMPLATEPATH . ‘/sidebar2.php’); ?>
8. Save file as page-wide.php
9. Close file page-wide.php

1. Open sample.php
2. Change ‘Template Name: Sample’ to Template name: One Left Page
3. Delete first <?php include (TEMPLATEPATH . ‘/sidebar2.php’); ?>
4. Change <div class=”art-layout-cell art-content”> to <div class=”art-layout-cell art-content-sidebar1″>
5. Delete second <?php include (TEMPLATEPATH . ‘/sidebar1.php’); ?>
6. Delete second <?php include (TEMPLATEPATH . ‘/sidebar2.php’); ?>
7. Save file as page-one-left.php
8. Close file page-one-left.php

1. Open sample.php
2. Change ‘Template Name: Sample’ to Template name: Two Left Page
3. Delete second <?php include (TEMPLATEPATH . ‘/sidebar1.php’); ?>
4. Delete second <?php include (TEMPLATEPATH . ‘/sidebar2.php’); ?>
5. Save file as page-two-left.php
6. Close file page-two-left.php

1. Open sample.php
2. Change ‘Template Name: Sample’ to Template name: One Right Page
3. Delete first <?php include (TEMPLATEPATH . ‘/sidebar1.php’); ?>
4. Delete first <?php include (TEMPLATEPATH . ‘/sidebar2.php’); ?>
5. Change <div class=”art-layout-cell art-content”> to <div class=”art-layout-cell art-content-sidebar2″>
6. Delete second <?php include (TEMPLATEPATH . ‘/sidebar2.php’); ?>
7. Save file as page-one-right.php
8. Close file page-one-right.php

1. Open sample.php
2. Change ‘Template Name: Sample’ to Template name: Two Right Page
3. Delete first <?php include (TEMPLATEPATH . ‘/sidebar1.php’); ?>
4. Delete first <?php include (TEMPLATEPATH . ‘/sidebar2.php’); ?>
5. Save file as page-two-right.php
6. Close file page-two-right.php

Upload the new pages to your WordPress install, de-activate the theme and reactivate the theme so you can see the template pages, apply the Templates as required.

Notice

Code disclaimer information
This document contains programming examples therefore, www.DigitalRaindrops.net grants you a nonexclusive copyright license to use all programming code examples from which you can generate similar function tailored to your own specific needs.

All sample code is provided by www.DigitalRaindrops.net for learning illustrative purposes only.

These examples have not been thoroughly tested under all conditions. www.DigitalRaindrops.net, therefore, cannot guarantee or imply reliability, serviceability, or function of these examples.

All programs contained herein are provided to you “AS IS” without any warranties of any kind. The implied warranties of non-infringement, merchantability and fitness for a particular purpose are expressly disclaimed.

Membership

We hope you will benefit from our tutorials Membership to this website is not required, however the downloading of any themes or files is restricted to site supporters.

You can register for a 10 year ‘Free Account’ from the members page which will give you access to the source files and free themes, as we introduce premium themes and content these will only be downloadable with a subscription, any revenue from subscriptions is used to support the site costs.

this website is a tool to support and promote WordPress and Artisteer, please support, share and give credit for any benefits you gain from the tutorials on this website.