Using the Modx Template

One of the strengths of Modx is its ability to use any number of templates for the construction of its front end website.  You can assign each page a different template.  Templates are basically HTML and CSS code with Modx Tags (see Commonly Used Tags in Modx for more information on Tags) to provide the structure and content of the webpage.  Tags can be used to provide static or dynamic content on the page while the HTML and CSS provide the rest of the page design.  The following tutorial will simply explain how to create a new template.

How to Make a New Template in Modx

1. Login to the Modx Administrator Dashboard
2. Click on the ELEMENTS tab of the Resource Tree in the left hand side as per below:
   
   
   
   Note the two options to create a template when right-clicking on the TEMPLATES icon in the tree view.  You can create a new template using the default form, or you can create new template with the option QUICK CREATE TEMPLATE.  Click on CREATE NEW TEMPLATE to view the default form.
   
   
3. When you click on CREATE NEW TEMPLATE (through the icon or by right-clicking on TEMPLATES in the tree) you will see the following:
   
   
   There are many variables for creating a template, but we will concentrate on presenting how to create a simple one.  If you wish to see more details on creating a template, you can find more information here:  Templates documentation.
   
   The first field to fill is the NAME. Type in a name for the template.
   
   
4. Next, click on DESCRIPTION and give your template a brief description.  For example:  "This is my test template."
   
   
5. Leave the values on the right set to their default entries.  Then click on the TEMPLATE CODE(HTML) field in order enter the code for you template.  If you want take a look at an example of this, click on the BASE TEMPLATE  in the tree and you'll see the following:
   
   
   
   
   
6. After you have finished adding your code, click on SAVE in the top right-hand corner in order to save your entries. 

Quick Template Entry Form

As you can see, creating a template can be a relatively quick task.  If you want to simply add a template without worrying about any of the other settings and tabs, you can also use the QUICK CREATE TEMPLATE option seen by right-clicking on the TEMPLATE icon in the tree-view.

Here's the abbreviated form:



To use the form, click on each field to add your entries, then click on SAVE (located in the bottom right hand corner in this form) in order to save your template.

Understanding the relationship of the Template to the Web Page created by Modx

In order to understand the template's relationship to the web page created by Modx on the front end, we need to show the page and the template assigned to it.  The following screen shots shows how the template is used for the web page ultimately displayed:

This template is assigned to the DEMO WEB PAGE and appears in the RESOURCES tab and the Modx dashboard as follows:





Taking a closer look at the settings for the DEMO WEB PAGE, we can see that it is assigned to the BASE TEMPLATE and that its page title is "Demo Web Page".  The assignment of the template is on the right under Uses Template.



Note that if you hover over the fields, you can see a pop-up description similar to the one for [[*pagetitle]] in the above screenshot. We are looking at these settings in order to understand the correlation between the page and a template. When viewing the page that is created by Modx, you will see something similar to the following:




Using your web browser, you can right-click on the page and select VIEW SOURCE. You will see the following:



We are using the view source option of the web browser in order to see the code outputted by Modx when a page is displayed. The Modx template pulls the SITE NAME (represented by the [[++site name]] tag) from the system settings.  The PAGE TITLE (represented in the template by the tag [[*pagetitle]]) is shown beside it as per the template format.  You can see this in the third line of the base template code. The content (represented by the [[*content]] tag) is the rest of the page. 

The template is an important part of using Modx.  In essence, it is the skeleton of your website while the content is assigned per each created resource page to provide the body of your website.  As you become more familiar with the different parts of Modx you can build more advanced structures to meet your website needs.  For the next tutorial on using Templates of Modx, please go to Assigning Templates to Resources in Modx.