Adding new Pages and Templates to your Jamroom

Before you have been using Jamroom very long, there will likely come a time when you would like to add a new "page" or section to your Jamroom site - maybe a page that contains "contact" information, or an "about" page feature the owners of your business.  Regardless of the content you are looking to add, Jamroom makes it easy for you to harness the power of the Jamroom templates, and create any type of output you would like.  The key to this is Jamroom's Template Parser - "index.php".  Any template passed to the index.php script, that is found in the active skin directory, will be parsed and presented.

For example, the default install of Jamroom features the "Cobalt" Jamroom Skin.  Within the jamroom/skins/Cobalt directory, you will find a file called "jr_community.tpl" - this is an example of an Index template that is parsed and presented by the index.php script.  You can think of the index.php as a general purpose template display tool.

To help with understanding how this works, we're going to create a "Contact Us" template for our Jamroom that displays a contact page containing information to a viewer.  When finished you should be able to create additional pages that suit your needs, using the same steps outline below.

Step One: Create new Template

The first step in our process is to create our template file.  The template file is a Jamroom Template file - that is, it is a file that can contain HTML, Javascript, and possibly some template "variables" that will be rendered at view time.  Our template here is going to be very simple, but it works to illustrate how the Jamroom Template parser works.  We're going to create a file called "jr_contact.tpl" in the jamroom/skins/Cobalt directory (if you are using a different skin then use the proper directory):

Of course this is VERY simple, and not likely to suit your needs, but it points out some features that we can see:

• The template file contains mostly straight HTML - this makes it easy to work with
• Where we want our "dynamic" content to go, we have used Template Variables - these can be thought of as "placeholders" - their value will be filled in by Jamroom when the page is sent to the viewer.

Step Two: View Template using Jamroom Template Parser

The next step is to view your handiwork - load up your browser, and "load up" your new template:

http://yoursite.com/index.php?t=contact

Make sure and load the proper domain and Jamroom directory that your Jamroom is installed in.  If successful, you should see a small contact page in your browser.  That's it ;)  You have successfully created your first custom template.

Now you will want to basically repeat this process over and over, editing your template, viewing your template, until it gets to the point that you are ready for it to go "live" - at that point, simply add it to your menu, or link to it from another page, and you are done.

FAQ: How do I add pages that look like the other pages in my Jamroom Skin?

The following example is just one way to add a page to your site that will look like the other main pages from the Cobalt skin.

• Create the new template
  

The first step for creating a custom page is to create a new template in your current skin directory (this guide will assume you are using the default Cobalt skin).  You can do this in either your favorite text editor or through the built in Template Editor in the Admin Control Panel of your Jamroom (jamroom tools > Edit Templates > Create A New Template).

• Adding the main code to your template

Once you have created the template, add the following code to it:

{include file="$SKIN_DIR/jr_overall_header.tpl"} {include file="$SKIN_DIR/jr_index_menu.tpl"} <!-- BEGIN MAIN CONTAINER --> <div class="container"> <!-- MAIN CONTENT --> <div class="content"> YOUR MAIN CONTENT CODE HERE </div> <!-- END MAIN CONTENT --> <!-- BEGIN SIDE CONTENT --> <div class="content-right">   {include file="$SKIN_DIR/jr_index_side.tpl"} </div> <!-- END SIDE CONTENT --> </div> <!-- END CONTAINER --> {include file="$SKIN_DIR/jr_overall_footer.tpl"}

After you have added that code, place the code that you would like to appear in the main section of your page where the words "YOUR MAIN CONTENT CODE HERE" are in the above code (between the <div class="content"> and </div> tags).

After you have placed your code in the correct area, save your template and upload it to your Active Skin directory for viewing.

Tips for managing your templates

• Try to choose a naming convention for your templates that includes a descriptor of the content - i.e.

• If you find that you are re-using HTML, or a section of variables over and over again in your templates, store it in a separate template and then "include" it where you need it in all of your other templates.  make sure and give the template a .inc.tpl extension instead of just a .tpl extension - that way you know it is an "include" template.  So for example, if you need to have a a "copyright" tag included in each one of your templates, first add just that bit of code to a template, let's say "copyright.inc.tpl:

• If you want to get a "dump" of all of the Template variables that are available to you in the Jamroom templates (and there are A LOT), add the following line of code to your template where you would like to see a table of available templates: