It was good to see that Artisteer 3 has moved to a Release Candidate version, we are happy at Digital Raindrops because the structure of the code is a lot closer to that used in the WordPress 3.1 default theme.
While over on the Artisteer Forum the question was asked about switching sidebars in a template page with the new structure, how could this be done and what changes are needed, we thought we would have a look and it is really easy.
We have used Artisteer Version 3 RC and one of the sample templates, changed the output to WordPress and exported the template, we need to start with a three column template so we do not have to mess with any of the main code, for each layout we have created a template page.
The theme we used can be downloaded from this page, all the themes template pages have code comments <!– This is a code comment –> where we have added or changed the sidebars, downloading and looking at the code is a good practice as we will have reference points to refer to, copying code from the website can lead to mistakes.
Lets look at the default layout with the left and right sidebars.
Unlike earlier versions of Artisteer the leading template generating software, where a lot of page elements were fixed width and we had to add elements to the style.css we do not have to do that in this version and the new structure.
All we have to do is to create the template pages, then add, remove or move the sidebars for the different layouts, we have most combinations two left, two right, default left, default right, secondary left, secondary right, the one column template page is part of the Artisteer export as standard.
The file we use to create our template page is page.php this is the one in the above image, lets look at the code and see where the sidebars are called, the left sidebar can be found at lines 4 to 7, the right sidebar 29 to 32, when we look at code we think in blocks that start with a tag and end with a closing tag, our left sidebar tags are <div class=”art-layout-cell art-sidebar1″> and </div>.
Creating a template page is quite quick and easy, we need a unique name for our template page, we are also adding comments so we know where to start and finish, first thing we do is save page.php as page-both-left.php, notice that we have started with page- we prefer to keep our files together and this acts as a prefix.
We cut lines 29 to 32 and paste these see lines 10 and 24 below, add a couple of line breaks and add code comments two both sidebar code blocks, then we add our template code, this is the first five lines in the image below, look at the files in the download and compare page-both-left.php to page.php.
To create the page-both-right.php change the template name in the code cut the two blocks of sidebar code and paste this in the file where the right sidebar code was.
We now have two templates with two sidebars, all we do to create the other template pages is to open page-both-right.php and page-both-left.php, then just change the template page name and delete one of the sidebars, remembering to save the template with a new name.
Opening the other pages in the download looking at the template name, sidebar code and comments, will show how the other pages are created, applying the templates we do from Admin -> Pages -> Pages, select a page and Quick Edit, using the template dropdown to apply a template.
Default Right Template
Secondary Right Template
Default Left Template
Secondary Left Template
We do require your feedback to improve our themes and tutorials, please leave your comments good or bad.
Code disclaimer information
If this document contains programming examples, www.DigitalRaindrops.net grants you a nonexclusive copyright license to use all programming code from which you can generate similar functions tailored to your own specific needs.
All sample code is provided by http://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.
Registration is now open: New Member Registration
Membership is now open: Existing Member Login
Visit the: Forum and Feedback
This website is a tool to support and promote WordPress and Artisteer theme development, please support, share and give credit for any benefits you gain from the tutorials on this website.