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:

    Templates in Resource Tree

    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:

    Blank template form
    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:

    Base Template in resource tree

  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:

Quick Create Template 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:

Base template code:

<title>[[++site_name]] - [[*pagetitle]]</title>
<base href="/help/[[++site_url]]" />

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

Demo page displayed in Modx Admin dashboard

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.

Demo page settings

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:

Page viewed in the browser

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

Web Browser source view

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.


Understanding the relationship of the Template to the Web Page created by Modx
Did you find this article helpful?

We value your feedback!

Why was this article not helpful? (Check all that apply)
The article is too difficult or too technical to follow.
There is a step or detail missing from the instructions.
The information is incorrect or out-of-date.
It does not resolve the question/problem I have.
How did you find this article?
Please tell us how we can improve this article:
Email Address

new! - Enter your name and email address above and we will post your feedback in the comments on this page!

Did you find this article helpful?

Post a Comment

Email Address:
Phone Number:

Please note: Your name and comment will be displayed, but we will not show your email address.

Related Questions

Here are a few questions related to this article that our customers have asked:
Ooops! It looks like there are no questions about this page.
Would you like to ask a question about this page? If so, click the button below!
Need More Help?

Help Center Search

Current Customers

Email: Ticket: Submit a Support Ticket
Call: 877-595-4HUB (4482)
757-416-6627 (Intl.)
Chat: Click To Chat Now

Ask the Community

Get help with your questions from our community of like-minded hosting users and Web Hosting Hub Staff.

Not a Customer?

Get web hosting from a company that is here to help.