Modx Revolution 2.0.0 and above.
You should have a working version of Modx Revolution so you can follow along.
Make sure that you have the following packages installed before you begin this tutorial
Package Page: http://modxcms.com/extras/package/552
Package Page: http://modxcms.com/extras/package/487
These optional packages are not required to complete this tutorial, but you may find them helpful.
The Tutorial, version 1.0
Create a Category
The first thing we want to do is create a category. This will help us keep all of our pieces easily organized. As you create more templates, chunks, snippets and plugins this becomes very important.
- Click on the Elements tab
- Right click on Categories, you will see New Category appear, left click on it.
- For the Name field type in: Webdeveloper
Note the Parent field allows you to have nested or sub categories.
Create Template Variables
NOTE: you cannot have HTML tags in the name, description, etc when you are creating the TV!
- Again in the Elements tab, right click on Template Variables and click on New Template Variable.
- We are only going to use the General Information tab. We will fill in the Variable Name, Caption, Description, Category (Webdeveloper), Input Type and for one TV Default Value. Only enter/change the values listed, see the list below of the TVs you should create.
- More info on Creating TVs
TVs to create:
- Variable Name: meta-keywords
Caption: SEO Keywords
Description: 5 to 7 keywords related to this page.
Input Type: Text
- Variable Name: meta-description
Caption: SEO Description
Description: A 25 words or less description related to this page.
Input Type: Textarea (mini)
Default Value: [[*introtext]]
- Variable Name: webdeveloper-css
Caption: Embedded CSS
Description: Enter in your CSS, remember to wrap in style tags
Input Type: Textarea
- Variable Name: webdeveloper-js
Description: Enter in your JS, remember to wrap in script tags
Input Type: Textarea
Create the Template
Now that we have created some TVs lets create a Template. We want to make a template that will be flexible by allowing us to create more templates using some common elements like banner, navigation menu and footer. Once you get an understanding of this you will see how to make sub templates and many more options.
- Again under the Elements tab right click on Templates and then left click on New Template
- Fill in the Template name: WebdevelopmentTemplate1
- Description: Our first Template!
- Select the category: Webdeveloper
- Paste in the HTML code from the WebdevelopmentTemplate1.html file
- Now click on the Template Variables tab and check all of the ones we created in step 2
About the “[[”, this is the start of a Tag. I used two types in our template, the first type you see is [[*, this is for the TVs that we created. Our template will now import the value of those TVs for each page/resource. The [[$ is for Chunks. Chunks are simply little bits of HTML. Now we need to create the banner, navigation and footer Chunks.
Create the Chunks
- Under the Elements tab, right click on Chunks and then left click on New Chunk.
- Fill in the Name: webdeveloper-banner
- Description: HTML Banner
- Category: Webdeveloper
- Chunk code (html): Paste in the HTML code from the webdeveloper-banner.html file
Now do the same and create these two chunks:
- Name: webdeveloper-navigation
Description: This is the main navigation HTML
Chunk code (html): Paste in the HTML code from the webdeveloper-navigation.html file
- Name: webdeveloper-footer
Description: This is the footer HTML
Chunk code (html): Paste in the HTML code from the webdeveloper-footer.html file
The CSS file
Now the last piece in our example, the CSS file. We need to have the CSS file uploaded to:
(the folder where you have modx)assets/templates/webdeveloper/css/layout.css. You can do this two ways, via FTP or the File manager.
Using the File Manager:
- Click on the Files Tab
- Navigate to assets/templates – note if these folder/directory are not here you will have to create them.
- Create the Directory webdeveloper by right clicking on the folder templates. Then left click on Create Directory Here.
- Do the same with css
- Now right click on the css folder/directory and left click Upload Files
- Click the add button and select the layout.css file
- Click the Upload button then Close.
Create a test page
- Click on the Resources tab
- Right click on web and hover over Create and then click on Create a Document Here
- Now select the Template WebdevelopmentTemplate1 and an alert message will pop up, click Yes.
- You can name the file whatever you would like.
- Now click on the Template Variables tab, and you will see the text fields we created!
- Open up the file testpage-data.txt and copy and paste into the appropriate fields
- Now save and preview and you should see your page!