Earlier, in Modx Revolution Development - Part 03 - Basic Systems Settings, we dipped our toes in Modx Revolution Resources when we created some required pages for Site Settings. We have also made provisions for specific pages which IDs are required for completing our exercises in Modx Revolution Development - Part 05 - Building Templates and Modx Revolution Development - Part 06 - Chunks, Snippets and Template Variables.

As a reminder, the three images below (click to enlarge) give the final impression of our MyRevo website. From the images, we need the following pages:

  • Navigation:
    • Home
    • About Us
    • Our Mission
    • Products
      • Product 1
      • Product 2
    • Services
      • Service 1
      • Service 2
    • Contact Us
    • Sitemap
  • Right Footer:
    • rss
    • privacy policy
    • disclaimer
  • Other Functional Pages:
    • Search Results
    • GoogleSiteMap

We have planned that Products and Services will have their own template while everything else will use the Base Template except that, with RSS we will be introducing a new template while a blank one will be created for GoogleSiteMap. As we create our pages, we will be switching between Resources and Elements in order to finish off our templates.

When we open Home, we can see the standard Modx Revolution resource layout comprising tabs for Create/Edit Documents, Page Settings, Template Variables and Access Permissions. When we rest our mouse on any of the properties on Create/Edit Documents and Page Settings, we get to see a pop up of the modx tag and its description. Most of them are self explanatory. We will update Home as follows:

  • Create/Edit Documents:
    • Uses Template: Base Template - no other template yet.
    • Published: ticked - we can untick to defer publication until we are ready.
    • Title: Home
    • Long Title: My Revo website Home
    • Description: some site description text - becomes the meta description in source code.
    • Resource Alias: blank - We are using Friendly URLs, so Modx Revolution will create this automatically from the Title
    • Link Attributes: blank - not used but if we do not wish search engines to follow links on this page, for example, we will put in rel="nofollow".
    • Summary (introtext): blank - not used.
    • Parent Resource: leave empty - home does not have a parent.
    • Menu Title: Home - what we want to see on our menu.
    • Menu Index: leave as is - this is the position of the item on the Resource tree. When we move items around in the Resource tree, their new position will also be updated here.
    • Hide From Menus: unticked
    • Resource Content: some lorem ipsum text using TinyMCE wysiwyg for the body content - we can also use the code view in TinyMCE.
  • Page Settings:
    • Container: unticked - Home doe not have any children.
    • Rich Text: tick to use TinyMCE - untick to suppress TinyMCE and enter code directly into the Resource Content field.
    • Published On: automatic
    • Published Date: blank - used for specifying a future publication date.
    • Searchable: ticked - untick to block the resource from appearing in site search, sitemap or googlesitemap
    • Other items not listed: leave at default setting
  • Template Variables:
    • Keyword: enter page specific keywords
  • Access Permissions:
    • This is where we will control who gets to see this page. Membership is not operational yet, and as the Home page is usually public, we do not have any permissions to assign.
  • Save the page

Apart from Home, the three other pages we created earlier will not appear on any menu since they are for system notification purposes only. We can filter them off menus by ignoring them in Wayfinder calls but we will simply suppress them by ticking their Hide From Menu property which then causes them to be greyed out on the Resources tree. We should also update their content and other relevant attributes with something meaningful, as exemplified by the Home update.

With above example, we should now have enough experience to create more resources. The order we create the pages is not too material because we can re-arrange them as we like in the Resources tree, but maintaining a certain order at the outset comes in handy when referencing IDs. Therefore, we will create our resources in the following order:

  • About Us - uses Base Template
  • Our Mission - uses Base Template
  • Contact Us: - uses Base Template
    • We use the Formit package we installed earlier to generate our contact form. As this is code, we will untick Rich Text under Page Settings and then type in the code below in the Resource Content area:
      [[!FormIt?   &hooks=`spam,email`
      &emailSubject=`Contact Form Email`
      &successMessage=`Your email has been sent. Thank you.`
      <p class="sentmsg">[[+fi.successMessage]]</p>
      <form id="form1" class="contactform" action="[[~[[*id]]]]" method="post">
      <p><input name="email2" type="hidden" /></p>
      <p><label>Name <span>(required)</span><span class="errmsg">[[!+fi.error.name]]</span>:<br /> <input id="name" name="name" size="60" type="text" value="[[!+fi.name]]" /> </label></p>
      <p class="skip"><label>Please leave this field blank: <input id="email" name="email" size="60" type="text" /></label></p>
      <p><label>E-Mail Address <span>(required)</span><span class="errmsg">[[!+fi.error.realemail]]</span>:<br /> <input id="realemail" name="realemail" size="60" type="text" value="[[!+fi.realemail]]" /></label></p>
      <p><label>Message <span class="errmsg">[[!+fi.error.bodymessage]]</span>:<br /><textarea id="bodymessage" cols="50" rows="5" name="bodymessage">[[!+fi.bodymessage]]</textarea> </label></p>
      <p><label> <input id="submit" name="submit" type="submit" value="Submit" /></label></p>

    • We also create a new chunk named MyEmailChunk and paste in the following code:
      Message from the website. 
      [[+name]] ([[+realemail]]) sent the following email from the Contact Form:
    • The emailTo address also needs changing to a working email address.

  • Sitemap: - uses Base Template
    Page Settings: untick Rich Text
    Resource Content field:
    [[!sitemapFriend? &type=`html` &showHidden=`0` &useFurls=`0` ]]
  • Search Results: - uses Base Template
    Page Settings: untick Rich Text
    Page Settings: tick Hide From Menu
    Page Settings: untick Searchable
    Resource Content field:
    [[!SimpleSearch?  &containerTpl=`mySearchContainerTpl` &pageTpl=`mySearchPageTpl` &currentPageTpl=`mySearchCurrentPageTpl` &tpl=`mySearchTpl` &showExtract=`1` &hideMenu=`0`]]
    • Search Results Chunks Required: - We will put each of the following 4 chunks in a New category called mySearchForms which we create within Elements by right-click on Category folder --> New Category -->mySearchForms. Categories are purely for organisation convenience.
      1. Name of Chunk: mySearchContainerTpl
        • Code:
          <p class="sisea-results">[[+resultInfo]]</p> 
          <div class="sisea-paging"><span class="sisea-result-pages">[[%sisea.result_pages? &namespace=`sisea` &topic=`default`]]</span>[[+paging]]</div> 
          <div class="sisea-results-list">[[+results]]</div> 
          <div class="sisea-paging"><span class="sisea-result-pages">[[%sisea.result_pages? &namespace=`sisea` &topic=`default`]]</span>[[+paging]]</div>
      2. Name of Chunk: mySearchCurrentPageTpl
        • Code:
          <span class="sisea-page sisea-current-page">[[+text]]</span>
      3. Name of Chunk: mySearchPageTpl
        • Code:
          <span class="sisea-page"><a href="[[+link]]">[[+text]]</a>[[+separator]]</span>
      4. Name of Chunk: mySearchTpl
        • Code:
          <div class="sisea-result">
              <p>[[+idx]]. <a href="[[~[[+id]]]]" title="[[+longtitle]]">[[+pagetitle]]</a></p>
              <div class="extract"><p>[[+extract]]</p></div>
  • GoogleSiteMap - uses GoogleSiteMap Template
    • In Elements, we right-click on Templates --> Quick Create Template and give it the name GoogleSiteMap then Save. No template code or anything else is required. In Resources, we create a new page named GoogleSiteMap as follows:
      Page Settings: untick Rich Text
      Page Settings: Content Type: XML
      Page Settings: untick Searchable
      Resource Content field:
  • rss - uses RSS Template
    • New Template:
      • Name: RSS
      • Code:
        <?xml version="1.0"?>
        <rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom">
    • New Chunk:
      • Name: myRSS
      • Code:
        <description><![CDATA[ [[+introtext:default=`[[+content:myEllipsis=`300`]]`]] ]]> </description>
        <pubDate>[[+publishedon:strtotime:date=`%a, %d %b %Y %H:%M:%S -0600`]]</pubDate>
        <guid isPermaLink="false">[[++site_url]][[~[[+id]]]]</guid>
    • New Snippet: - to pull in summary decription from pages.
      • Name: myEllipsis
      • Code:
        $output = $input;
        $limit = intval($options) ? intval($options) : 100;
        if ($usemb) {
            if (mb_strlen($output, $encoding) > $limit) {
                $output = mb_substr($output, 0, $limit, $encoding) . '&hellip;</p>';
        } else if (strlen($output) > $limit) {
            $output = substr($output, 0, $limit) . '&hellip;</p>';
        return $output;
    • New Resource:
      • Name: RSS
      • Template: RSS
      • Code:
        <atom:link href="[[++site_url]]/rss-feeds.xml" rel="self" type="application/rss+xml" />
        <title>MyRevo RSS Feeds</title>
        <description>Latest updates from MyRevo</description>
        [[!getResources? &parents=`14,15` &amp;hideContainers=`1` &includeContent=`1` &includeTVs=`1` &amp;limit=`10` &tpl=`myRSS` ]]
        We are asking our getResources package that we installed earlier to list items under Resources with IDs of 14 and 15. These should correspond to the IDs of Products and Services pages, given the order we are creating the pages.
      • Page Settings: Content Type: XML
  • privacy policy: - uses Base Template
  • disclaimer: - uses Base Template
  • Products:
    We create a New Resource named Products to initially use the Base Template.
  • Services:
    We create a New Resource named Services to initially use the Base Template.

Templates Update

Now that we have the IDs of the main pages, we can complete our Base Template. Working from the top, we amend our Base Template as follows:

  • Line item: <div id="sebx">[[SimpleSearchForm? &tpl=`MySearchForm` &method=`post` &landing=`91` &highlightResults=`1` &highlightTag=`strong` &highlightClass=`search-highlight`]]</div> becomes:
    <div id="sebx">[[SimpleSearchForm? &tpl=`MySearchForm` &method=`post` &landing=`9` &highlightResults=`1` &highlightTag=`strong` &highlightClass=`search-highlight`]]</div>
  • Line item: <div id="navigation">[[!Wayfinder? &startId=`0` &includeDocs= `1,2,3,4` ]]</div> becomes:
    <div id="navigation">[[!Wayfinder? &startId=`0` &includeDocs= `1,5,6,7,8,14,15` ]]</div>
  • Line item: <div id="footerright">[[!Wayfinder? &startId=`0` &includeDocs= `7,8,9`]]</div> becomes:
    <div id="footerright">[[!Wayfinder? &startId=`0` &includeDocs= `11,12,13`]]</div>

With Base Template complete, we can duplicate it by right-clicking on it then Duplicate Template and give it the name of Product Template. We repeat for Service Template.

Towards the bottom half of the Product Template we amend the chunk on the line: <div id="sidebar">[[$mainSidebar]]</div><!--end sidebar--> to:
<div id="sidebar">[[$productSidebar]]</div><!--end sidebar-->
and for Service Template, we change it to:
<div id="sidebar">[[$serviceSidebar]]</div><!--end sidebar-->.

We then go into Chunks. For productSidebar, we change the chunk code to: <h3>New Products</h3>[[!Wayfinder? &startId=`14`]]
Similarly, we change the startId in the chunk code for serviceSidebar to 15.

Review and Update of Products and Services Pages

We want Products and Services to lie between Our Mission and Contact Us on the Main Menu, so we drag and drop them into their new position in the Resource tree. We have to be careful during drag and drop because we do not wish to mistakenly create a folder in the process. Whenever we drag a resource, we get a guide line. When we drag over another resource, the guide line disappears but the resource that comes into view becomes highlighted with a green + icon. If we release our mouse here, the dragged resource will become a child of the highlighted resource. We should therefore ensure that when we drop the Product resource, for example, that the guide line is visible between Our Mission and Contact Us.

The Products and Service pages can now be amended to use their respective Templates. We also ensure that Container is ticked on Page Settings for both resources. We do this for them to become parent folders in order to enable us create pages directly under them.

The final task in this section is to create the child pages for both Products and Services. We right-click on each parent folder and choose Quick Create --> Documents and create the following sub-pages. It should be noted that in Quick Create or Quick Update mode, we do not get the benefits of TinyMCE since everything is in code.

  • Products Children Pages:
    • Product 1: - uses Product Template
    • Product 2: - uses Product Template
  • Services Children Pages:
    • Service 1: - uses Service Template
    • Service 2: - uses Service Template

Our next destination will be Modx Revolution Development Part 08 - Membership

Comments (0)

Add a new comment:

This thread has been closed from taking new comments.