Web Pro Manager

Web Pro Manager CMS

User Tools


Templating the Front-End of Your New Web Pro Manager Installation

What's a template?

As far as websites go, a template is a base file that holds the design and layout of your web page, but offers little or no content itself. Think of a template like a blank sheet of company letterhead… it displays the logo, maybe the company address, and sets up the page to be used for new content without going through the hassle of adding the logo and address every time. A website template works the same way; the template sets up the page for content to be added to (Figure 2.1).

Figure 2.1 The template file for Web Pro Manager – basically the same web page, but without the content and navigation.

A website template is coded in HTML and is usually created from a design made in Photoshop or some other image editing program. A website template contains HTML, images, JavaScript and CSS styles, and it most likely is built-up from several of these types of files.

From this point on, I'll assume that you have your own template coded in HTML, and that all related files (images, stylesheets, etc…) are packaged with your template. If you do not have a template file yet, do not proceed until you create one.

You'll need to install your template to get the site designed the way you’d like it to be. Web Pro Manager gives you access to templates for 3 page types:

  • Home
  • Content
  • Search

Why three? Because it's pretty likely that certain pages, like the homepage of your site, look dramatically different than others. With separate template files, you can easily setup a unique design for your homepage versus that of a content page without any extra hassle.

Installing your template

  1. First, make sure that your template files are all in one main folder. That folder can contain subfolders with images and stylesheets, but no file that makes up the template should be out of that one main folder.

  2. Change the name of that main folder to “tmpl”.

  3. If you have one HTML template file for your website, change the name of the file to home.html, and make 2 duplicates: content.html and search.html. If you actually have a separate HTML template file for the “inner” pages of your website, change the name of that to content.html and make a duplicate of it: search.html. In the end, your new “tmpl” folder should contain 3 template files and all of the other files that make up your templates (Figure 2.2).



    Figure 2.2 A sample file structure for your template folder.


Finalizing your template

Before you finish, you need to tell Web Pro Manager what parts of your template will have content that’s editable by the user. In the case of WPM, this content will be created by one or more components that are dragged and dropped onto the page. We will call these parts of your template Component Columns and they will be defined in your template with a tag.

Figure 2.3 The default template has only two editable areas, or Component Columns: the main content section and the sidebar.

Here's how you update your templates to define your Component Columns:

  1. Open your first template, home.html.

  2. Find the place where your first Component Column begins. For instance, find an area of the template that contains changeable navigation, content or a sidebar.

  3. Add the following tag in that space:
    [#compColumnComps_COLID=1#]

    This tag should also replace all “dummy” content you have there, if needed. Here's a sample snippet from the default template to show you what it should look like after your edit:

    <div id="content">
    	[#compColumnComps_COLID=1#]
    	<div style="clear: both;">&nbsp;</div>
    </div>
  4. Repeat this step for each Component Column in your template, but raising the number of the tag by one each time. For instance, your second Component Column tag added should be:
    [#compColumnComps_COLID=2#]
  5. Repeat steps 1-4 for each of your other templates.

  6. Once all tags have been added, replace the “tmpl” folder in the root directory of your Web Pro Manager installation with the one you've been working on. You can now test out your template and see how it looks live on your website.

Special tags

The Component Column tag is only one of several tags available for use in your template. Following are the other tags that can be added:

[#siteTitle#]
This tag is replaced with the title of your website (e.g. “My Website”) as defined in System Settings.

[#siteName#]
This tag is replaced by the Site URL Name of your website (e.g. “Mywebsite.com”) as defined in System Settings.

[#siteTmplPath#]
This tag is replaced with the full path to your site’s template and is a good idea to use in front of the SRC attribute to any linked files in your template… for example:

<link href="[#siteTmplPath#]css/style.css" rel="stylesheet" type="text/css" media="screen" />

[#showDateTime#]
This tag is replaced by the date. You can provide an optional FORMAT parameter to the tag to specifiy how you would like the date to display (ex: [#showDateTime_FORMAT=year#]) with possible values of year, standard, fullText, or time.

[#compPageNav#]
This tag is replaced by a linked list of pages in the section (navigation) that you specify with optional parameters for display control. This tag works well for a main navigation that changes infrequently. It requires one parameter NAVID which specifies the section from which to pull the pages for the navigation (ex: [#compPageNav _NAVID=3#]). Two other parameters can be used, FILE and FILE-ACTIVE, to specify the template files for the individual navigation items (ex: [#compPageNav_FILE=nav/hdrnavitem.html_FILE-ACTIVE=nav/hdrnavitemactive.html#]) where the file specified points to a file in the “tmpl/comp” folder.

[#compLangNav #]
This tag is replaced, if more than one language is present, by a separate mini-template file of your choosing to display a clickable list of links of available languages on the site (ex: English | French | German). It takes one parameter, FILE, which is used to specify the mini-template file in the “tmpl/comp” folder you want to show when multiple languages are present (ex: [#compLangNav_FILE=nav/navLang.html#]).

[#langChange #]
This tag is replaced by a list of languages present in your WPM settings. It can be used by itself in your template, or be called by the tag [#compLangNav #] to allow for its display only when more than one language is present. This tag takes one parameter, FORMAT, with possible values of slim, standard, or full (ex: [#langChange_FORMAT=slim#]).



Additional templates for different languages

Your main templates (home.html, content.html, search.html) should use the Default Language you set for your website. If you have more than one language for your site, you’ll probably have different templates for each language.

To use a template for an additional language, name it like this: [template]_[language-code].html. So, if you have a Spanish language homepage template, you would call it home_es.html. If you have German language content page template, you would name it content_de.html. Web Pro Manager will search for these language-specific templates first and use them if found. If not, they will use the default template for that page type.

Here are the default languages supported by Web Pro Manager and their corresponding language codes:

  • English (en)
  • German (de)
  • Spanish (es)
  • French (fr)
  • Italian (it)
  • Portuguese (pt)
  • Serbian (sb)

Adding more languages

If you have an additional language which is not listed above, you can easily add it to Web Pro Manager by adding a new file to the “lang/def” folder.

The name of the file should be its language code and it should have an extension of PHP (e.g. en.php, de.php, …) It must have the same formatting as the other language files in that folder. To make your life easier, just make a duplicate of any language file that is already there. You’ll need to edit the variables defined in that file as well.

Related: Customizing Web Pro Manager