Artisteer Switching Sidebars

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.

The Template

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.

Artisteer 3 Sidebar Templates (882)

Lets look at the default layout with the left and right sidebars.

default

The Code

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>.

code1

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.

code2

two-left

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.

code3

two-right

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.

select-template

Default Right Template

default-right

Secondary Right Template

secondary-right

Default Left Template

default-left

Secondary Left Template

secondary-left

Notices

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.

Membership

Registration and Membership is no longer required for downloading files or interacting with Digital Raindrops, posting a comment or topic in the forum does use Captcha to reduce spammers.

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.

2 thoughts on “Artisteer Switching Sidebars

  1. I found your help about turning 3 columns into two on the Artisteer forum. I did what i think you advised, and saved a new twocolumn-page.php page, but it doesn’t show up in my templates list, so I must have done something wrong. Plus, my php page doesn’t seem to look the same either.

    Is there anything I may have missed apart from deleting the line:

    In my new php page?

    Thanks so much for being so generous with your help in the forums, it’s how we all learn! (slowly, in some cases)

    Mary

Leave a Reply

Connections

Connect with Us
Follow Digital Raindrops on Twitter Join Digital Raindrops on Facebook
Share

Related Posts

Posted in Artisteer

googlefonts11.png

As Artisteer users one of the first things many of us do is add code to hide the titles, we often do this for the simple reason that the default fonts are safe and boring, so in this post we … Continue reading

Read More

Posted in Tips

colorizer-1_thumb.png

We thought we would use the WordPress Twenty Eleven theme and the the Farbtastic color picker to colorize our theme from the website front page instead of the admin area. We have been looking at the $_SESSION variable, so we thought … Continue reading

Read More