close ad
 
Important WebAssist Announcement
open ad
View Menu

Web development tutorial

Custom templates in PowerStore

Tutorial created by Ray Borduin, WebAssist

Categories: PowerStore

rating
4 ratings | Sign in to rate this tutorial | View comments

Hey buddies and budettes, we're glad you could join us today. Well, "glad" might be a little misleading... in reality, we're enthralled! You're here, and you love us!

Today we're going to show you how to use your custom template in PowerStore. This will let you take the beautiful little template you've created, and slam it into PowerStore, then set which pages are going to use the template. This will allow you to make your powerstore look EXACTLY how you want it, and that is pretty cool.

next sectionarrow down
arrow downWhat you need to start

PowerStore installed and running
An existing template you wish to use in PowerStore
An understanding of the theme_settings.xml API list (See PowerStore theme_settings.xml API documentation)

next sectionarrow down
arrow downMake a New template

The first step that we're going to do is create a basic template with Dreamweaver.

Or instead of creating a template, you can use one of our free Dreamweaver templates, create a folder in the root of your site called Templates and place it there. Then you can skip past Step 1 and go down to the Step 2 where we make the template work in PowerStore.

Step 1: Make a new template

  1. Click File > New
  2. Select Blank Template
  3. Select PHP template as the Template Type
  4. Select 1 column fixed, centered as the Layout
    This can really be any template you want, but we'll do this one because keeping it simple is the name of the game, you dig?
  5. Click Create


Your template is now being created by Dreamweaver andas soon as that bad boy has cooked up proper, we're going to need to change the regions on the page to be editable.

Step 2: Make the template usable by PowerStore

PowerStore requires a few editable regions on its templates so it knows where to put your tasty content. These must be certain, existing names.

The editable regions' content is pulled from the theme itself if the editable regions are empty on a page. If areas of your page that have the new theme we create applied appear empty, you need to enter the desired information into the editable region in the template.
  1. In code view, find the <head> section of the HTML in your template
  2. Around the <title> tags, look for the doctitle editable region. If it doesn't exist, add the following code to make the <title> section editable like so:
    <!-- TemplateBeginEditable name="doctitle" -->
    <title>This will be your <title> tag</title> 
    <!-- TemplateEndEditable -->

  3. Directly underneath the doctitle editable region, look for the head editable region. If it doesn't exist, copy and paste the following code to make the head editable region:
    <!-- TemplateBeginEditable name="head" -->
    <!-- TemplateEndEditable -->

  4. In code view, click your cursor at the very top of the page before any content. This will be right after the <body> tag
    You may wish to put this in another location on your page if you are using your own template. Do the same thing and place your cursor where you want the content to appear, just be sure an editable region is not within another editable region
  5. Click Insert > Template Objects > Editable Region
  6. Enter the name for the editable region as searchform
  7. Click OK
    This creates a new editable region named searchform. This is used by PowerStore to enter the search form for your pages.
  8. Select all body content in the template
    Again, the placement of the next editable region will vary depending on your own personal template. Place the cursor where it would look best if you're using a different template than the one created for this tutorial
  9. Click Insert > Template Objects > Editable Region
  10. Enter the name for the editable region as main
  11. Click OK
    This creates a new editable region named main. This is used by PowerStore to display the main content for your page
  12. In code view, click your cursor at the very end of your page after all content, but before the ending </body> tag
    The placement of this editable region needs to be at the very end of your page right before the closing </body> tag
  13. Click Insert > Template Objects > Editable Region
  14. Enter the name for the editable region as end
  15. Click OK
    This creates a new editable region named end. This is used by PowerStore to wrap up all the goodness that just happened on your page
  16. For searchform and end, remove the line of text that is inserted into each, so the editable regions are empty
  17. Click File > Save as Template
  18. Enter the name newtemplate
    This is going to save the template as newtemplate.dwt.php in your Templates folder


Now you have your template all nice and neat. Save it, and we'll move on to the next step.

next sectionarrow down
arrow downCreate a New Theme

Our next step is to create a new theme within PowerStore to which we will add our custom template. The reason we're creating a new one is to protect the sovereignty of the existing themes. Solidarity.

Step 1: Duplicate an Existing Theme

  1. Open the install directory of your PowerStore
  2. Open the webassist folder
  3. Open the themes folder
  4. Duplicate the Default folder
  5. Rename the newly created duplicate folder "NewTemplate"
  6. Open the PowerStore admin
  7. Set NewTemplate as the default theme

Step 2: Copy Your Template Into the Theme

  1. Open the NewTemplate folder
  2. Open the templates folder
  3. Copy the new template you wanted to add to your PowerStore ( this will be in your root directory/Templates )
  4. Paste the file, or drag it into the templates folder


Next up is the fun part... and by fun, I mean much more tediously complex. If you're technosqeemish, you might want to look away

next sectionarrow down
arrow downAdding Theme to Pages

Don't quit on me now, soldier! We've been through too much to give up here!

The next step involves editing an XML file that tells PowerStore which pages use which template. This will allow us to either replace all templates being used with the new one, or to create a seperate directory, or select files that have the new template applied to them

  1. Open the NewTemplate folder in your PowerStore site
  2. Open the theme_settings.xml file
    This is where all the interesting backend stuff to your theme is stored. For more information, look at the theme_settings.xml API list
  3. Look for the following line:
    <theme_map default="page.dwt.php">

  4. Change the line to the following:
    <theme_map default="newtemplate.dwt.php">

  5. Save the theme_setting.xml file
  6. View your site, and go to any page besides the index or admin pages


This sets all pages besides those in the admin directory and the main index file of your site to use the new theme

next sectionarrow down
arrow downMake New Themed Pages

The very last thing we're going to do is create a new page, then apply our theme to only this new page. This is pretty superfluous, but very handy when you need a custom page that isn't included in PowerStore

  1. Create a new page from the "themed_content" template (File > New > Page from Template). Save it as test.php in your PowerStore root directory (the directory with the rest of your PowerStore pages )
  2. In code view, enter the following code at the very top of the test.php page:
    <?php
    require_once('webassist/themes/theme_open.php');
    $WAIncludeContent = new WA_Include(__FILE__);
    ?>

  3. Enter the following code at the very bottom of the page:
    <?php require_once('webassist/themes/theme_close.php'); ?>

  4. Save test.php
  5. Return to your theme_settings.xml file
  6. Look for the following line:
    <theme_map default="newtemplate.dwt.php">

  7. Change the line to the following:
    <theme_map default="page.dwt.php">

  8. Within the <theme_pages> tag, copy an existing <theme_page> line
  9. Paste the line after the last <theme_page> line
  10. Change the value for reg to the following:
    /test\.php/i

  11. This makes it so only the test page will use the template
  12. Change the value of page to the following:
    newtemplate.dwt.php

  13. This sets the template the test page will use to be our custom template. Your line should look like so:
    <theme_page reg="/test\.php/i" page="newtemplate.dwt.php" />

  14. Save the theme_setting.xml file
  15. View test.php


This reset all your pages by default to use the page.dwt.php template, and only your new test.php page to use the new template.

arrow downWhat to do next...

Neato! You've done it. Now, for those of you with a really nice template, you're all done. Just add the content you need in the areas of the template, and you're set.

For those that used the quick Dreamweaver template as an example, you should go and make a real template to use in your next PowerStore site.

arrow downReviews and comments

Comments will be sent to the author of this tutorial and may not be answered immediately. For general help from WebAssist, please visit technical support.

Sign in to add comments
rating
4 ratings | Sign in to rate this tutorial

Build websites with a little help from your friends

Your friends over here at WebAssist! These Dreamweaver extensions will assist you in building unlimited, custom websites.

Build websites from already-built web applications

These out-of-the-box solutions provide you proven, tested applications that can be up and running now.  Build a store, a gallery, or a web-based email solution.

Want your website pre-built and hosted?

Everything else!

Close Windowclose

Rate your experience or provide feedback on this page

Account or customer service questions?
Please user our contact form.

Need technical support?
Please visit support to ask a question

Content

rating

Layout

rating

Ease of use

rating

security code refresh image

We do not respond to comments submitted from this page directly, but we do read and analyze any feedback and will use it to help make your experience better in the future.

go to page top