Modx Revolution comes with a basic but helpful template as reproduced below:

<html>
<head>
<title>[[++site_name]] - [[*pagetitle]]</title>
<base href="[[++site_url]]" />
</head>
<body>
[[*content]]
</body>
</html>

As we can see, the syntax is pure html interspersed with modx tags. For example, when we view http://localhost/myrevo in our browser, the title of the Home resource will appear as 'MyRevo - Home' because the template has picked up our site name and also the page title from the resource. The page itself is empty simply because nothing has been entered in the Resource Content area of the Home page.

Something else we can notice is that site_name and site_url tags are preceded by ++ while pagetitle and content both have an asterisk at the beginning. The ++ indicates a system setting while an asterisk signifies a document tag. When we add a Chunk, it will have a $ sign before it but a Snippet will not have any identifier, unless we are calling the snippet uncached, in which case it will be preceded by an exclamation mark - see Metax usage below. A comprehensive listing of these and other tags is available at http://rtfm.modx.com/display/revolution20/Commonly+Used+Template+Tags. As beginners, it will be useful to print out this page for reference as we design our templates.

At this point, we should pause to conceptualize our templates. Given our site's preview snapshots, we are looking at a core template (Base Template) which is then adapted for Products (Products Template), and also for Services (Service Template). We will use Wayfinder to construct the menus, Simplesearch for search, Breadcrumbs for the 'you are here' navigational aid, and Personalize to determine what to display depending on whether the website user is guest or member. Within the templates' head, we will use Metax to automatically display our meta data.

Our core Base Template has the following basic structure which does not currently have any Modx Revolution tags:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<title></title>

</head>
 
<body>
<div id="topwrapper">
<div id="top">
<div id="sitename"></div><!--end sitename-->
<div id="sebx"></div><!--end sebx-->
</div><!--end top-->
</div><!--end topwrapper-->
 
<div id="navigationwrapper"> 
<div id="navigation"></div><!--end navigation-->
</div><!--end navigationwrapper-->
 
<div id="container">
<div id="contentwrapper">
 
<div class="crumbsgreeter">
<div class="breadcrumbs"></div><!--end breadcrumbs-->
<div class="greeter"></div><!--end greeter-->
</div><!--end crumbsgreeter-->
 
<div id="content">
<div id="pagetitle"></div><!--end pagetitle-->

</div><!--end content-->
 
<div id="sidebar"></div><!--end sidebar-->
 
</div><!--end contentwrapper-->
</div><!--end container-->
 
<div id="footerwrapper">
<div id="footer">
<div id="footerleft"></div><!--end footerleft-->
<div id="footerright"></div><!--end footerright--> 
</div><!--end footer-->
</div><!--end footerwrapper-->
 
</body>
</html>

Required Folders

Our Modx Revolution website will make use of the file system to store our css and image files. We will create a folder under c:/www/myrevo/assets and call it Templates. Within Templates, we will create folders named Styles and Images.

Building the Templates

Under the Elements tab of the Manager, we expand Templates and click on Base Template to open it. We then copy the code for our basic structure above, and paste that in to replace the contents of Base Template. We will edit the Base Template in sections, as follows:

Head Section

For the first item in the head section, we will type in [[!Metax]] into line 4 (line numbers are only visible with javascript enabled). This calls our Metax snippet (uncached, by preceding it with !) to provide the template with our base url which is http://localhost/myrevo. The base url can also be entered directly with <base href="[[++site_url]]" /> but Metax already provides us with it, although we can only see it in source code. This base url is important for links referencing because it signals to Modx Revolution the beginning of our website. It will also adapt to the proper web address when the installation is moved to a live server.

That single line of Metax also supplies an array of meta data, including description and keyword, as can be seen by looking at the page source after publishing a page. The description is part of the standard Modx Revolution page properties. We will create a Template Variable in Modx Revolution Development - Part 06 - Chunks, Snippets and Template Variables for the Keyword so that it becomes available to our pages when we create them.

Between the Title tag (line 5), we type in [[*pagetitle]] | [[++site_name]]

Our last item (line 6) in the head section is our css file which we link in as:
<link rel="stylesheet" type="text/css" media="screen"
href="assets/templates/styles/style1.css" />
.

The head should now appear as follows:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
[[!MetaX]]
<title>[[*pagetitle]] | [[++site_name]]</title>
<link rel="stylesheet" type="text/css" media="screen" href="assets/templates/styles/style1.css" />
</head>

Body Section

On our sample website image, we have the sitename at top left and the search box at top right of the page. Navigation is below, while underneath that we have the breadcrumbs and login status. Moving down, we have contents to the left and the sidebar to the right with the footer split between copyright notice and a couple of links to the right.

SiteName and Search Box

We start with the sitename by converting line 12, <div id="sitename"></div>, to:
<div id="sitename"><a href="[[++site_url]]">[[++site_name]]</a></div>.
The sitename is clickable to get back to the home page, i.e. http://localhost/myrevo, for our local development project.

The SimpleSearch package we installed earlier will take care of our site search. To place the search form, we change line 13, <div id="sebx"> </div>, to:
<div id="sebx"> [[SimpleSearchForm? &tpl=`MySearchForm`
&method=`post` &landing=`91` &highlightResults=`1`
&highlightTag=`strong` &highlightClass=`search-highlight`]]
</div>

In the above code, we have &tpl=`MySearchForm`. This does not exist yet but will later be easily adapted from the standard form that comes with the SimpleSearch snippet. Also we have given a landing value of 91. This value is just a placeholder. When we look at creating resources in a latter instalment, we will create a Search Results page for displaying the search results. The ID of that page is what we will then provide for the landing value. The form code will highlight search terms in red which we define in our css class of search-highlight.

Navigation

Our navigation is driven by Wayfinder. We implement it by amending line 18, <div id="navigation"></div>, to read: <div id="navigation">
[[!Wayfinder? &startId=`0` &includeDocs= `1,2,3,4` ]] </div>

Wayfinder needs to know the startId of the site. In our case, this is 0, the root of our site. We then instruct Wayfinder to include only certain documents. Other properties are available but startid and includeDocs are all we need for our menu. We will use the default behaviour which lists the menu items in the order they appear on the Resources tree; we change the position of a menu item by simple drag and drop in the Resources tree.

Breadcrumbs and Login Status

To display Breadcrumbs, we just change line 25, <div class="breadcrumbs"></div>, to:
<div class="breadcrumbs"> <p>[[breadcrumbs]]</p> </div>
The Breadcrumbs will not appear on the Home page although the sample image has one, as illustration of its position.

Personalize is used to display a message depending on the user's login status. The messages are entered via the chunks header_for_members and header_for_guests. We will create these later. For now, we amend line 26, <div class="greeter"></div>, to:
<div class="greeter"><p>[[!Personalize? &yesChunk=`header_for_members`
& noChunk=`header_for_guests` &ph=`name`]]</p>
</div>.

Page Title

We want our page title to be shown at the beginning of the content. The page title will also be contained within a h1 tag. We achieve this by changing line 30, <div id="pagetitle"></div>, to:
<div id="pagetitle"><h1><a href="[[~[[*id]]]]">[[*pagetitle]]</a></h1> </div>
The page title is clickable but points to itself. That explains the presence of the link reference [[~[[*id]]]].

Content

Immediately below Page Title, at line 31, we enter [[*content]] to pull in the page content.

Sidebar

This is the only area of the Base Template that differentiates it from Product Template and Service Template. We will use Chunks to specify what to include in each case. For the Base Template that we are currently working on, we will update line 34 to: <div id="sidebar">[[$mainSidebar]]</div>. The equivalent for Products will be [[$productSidebar]], and for Services [[$serviceSidebar]]. We will add these to their respective template later.

Footer

The copyright information outputs site name and also the current year. Since we are relying on the date function in php, we must create a snippet for it. The snippet will be called Copyright and it will be created in a short while. For now, we change line 41 to:
<div id="footerleft"><p>[[Copyright]]</p></div>.

Wayfinder will help us again with the items on the right of our Footer. We haven't created the referenced resources yet but we can go ahead to put in the placeholder in line 42 by entering [[!Wayfinder? &startId=`0` &includeDocs= `7,8,9` ]] within <div id="footerright"></div>.

Updated Template

The updated template should now appear as follows:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
[[!MetaX]]
<title>[[*pagetitle]] | [[++site_name]]</title>
<link rel="stylesheet" type="text/css" media="screen" href="assets/templates/styles/style1.css" />
</head>
 
<body>
<div id="topwrapper">
<div id="top">
<div id="sitename"><a href="[[++site_url]]">[[++site_name]]</a></div><!--end sitename-->
<div id="sebx">[[SimpleSearchForm? &tpl=`MySearchForm` &method=`post` &landing=`91` &highlightResults=`1` &highlightTag=`strong` &highlightClass=`search-highlight`]]</div><!--end sebx-->
</div><!--end top-->
</div><!--end topwrapper-->
 
<div id="navigationwrapper"> 
<div id="navigation">[[!Wayfinder? &startId=`0` &includeDocs= `1,2,3,4` ]]</div><!--end navigation-->
</div><!--end navigationwrapper-->
 
<div id="container">
<div id="contentwrapper">
 
<div class="crumbsgreeter">
<div class="breadcrumbs"><p>[[breadcrumbs]]</p></div><!--end breadcrumbs-->
<div class="greeter"><p>[[!Personalize? &yesChunk=`header_for_members` & noChunk=`header_for_guests` &ph=`name`]]</p></div><!--end greeter-->
</div><!--end crumbsgreeter-->
 
<div id="content">
<div id="pagetitle"><h1><a href="[[~[[*id]]]]">[[*pagetitle]]</a></h1></div><!--end pagetitle-->
[[*content]]
</div><!--end content-->
 
<div id="sidebar">[[$mainSidebar]]</div><!--end sidebar-->
 
</div><!--end contentwrapper-->
</div><!--end container-->
 
<div id="footerwrapper">
<div id="footer">
<div id="footerleft"><p>[[Copyright]]</p></div><!--end footerleft-->
<div id="footerright">[[!Wayfinder? &startId=`0` &includeDocs= `7,8,9`]]</div><!--end footerright--> 
</div><!--end footer-->
</div><!--end footerwrapper-->
 
</body>
</html>

We will complete our Base Template by creating the missing chunks, snippets and template variables in Modx Revolution Development - Part 06 - Chunks, Snippets and Template Variables


Comments (0)



Add a new comment:

This thread has been closed from taking new comments.
  • twitter
  • linkedin
  • facebook
  • email
  • buzz
  • ping
  • stumbleupon
  • google
  • delicious
  • digg
  • newsvine
  • technorati
  • reddit
  • rss