Creating Templates in MODx Part I (part IV in the series)

I’m continuing my series of hi-res videos of the MODx content management system, this time I’m stepping through how you can easily take existing HTML and CSS layouts and adapt them for use with MODx. For my example, I take Eric Meyer’s “Complex Spiral” demo and within a few minutes, I have it adapted for use with my site.

It’s an exciting time to be writing about this platform: the first book about MODx was published by Packt Publishing, and we anticipate the release of their “2.0” version (dubbed “Revolution”) later this year.

A video used to be embedded here but the service that it was hosted on has shut down.

I include the image below as a quick reference for the placeholder tags used by MODx. Refer to the wiki page for a more complete list.

MODx uses simple placeholders for templates
MODx uses simple placeholders for templates

Summary: Creating a Custom MODx Template

  1. Create a working HTML/CSS/Javascript web page. Make sure it works!
  2. Upload the template files to your web server (e.g. CSS, Javascript). Note that the actual template code will live in the MODx database, not on the file system, but you do upload the related assets to your webserver. The recommended location for assets is in a dedicated folder in /assets/templates — make sure that you update your image paths or Javascript paths so that a page at the root of the site can safely reference the assets contained in the /assets/templates/name_of_your_template folder.
    * In the video, I upload the HTML file too just as a final check to make sure it works in the new location.
  3. Replace appropriate areas of your HTML with MODx placeholders. Refer to the image above or to the wiki page so you know which placeholders are available.
  4. Login to the MODx Manager, create a new template in Resources→Manage Resources→Templates. Be sure to save it and give it a good name.
  5. Edit a page and choose to use the new template, and save the page! In other words, you need to tell your MODx documents to use your new template.
You upload the template code to the database, but it still can reference files on the webserver
You upload the template code to the database, but it still can reference files on the webserver

Clarifications

MODx handles templates differently than some CMS’s, and I didn’t point this out in the video. A MODx template lives in the MODx database. You cut and paste the HTML into the MODx manager Resources–>Manage Resources–>Templates. Even though your template code lives in the database, it can still reference files on the web server. For example, if you upload your CSS and Javascript files to /assets/templates/my_template/, then your HTML should use paths like href=”/assets/templates/my_template/style.css”.

Keep Watching…

Part two of this video shows how to add Chunks and Snippets to your template for more dynamic functionality.

9 thoughts on “Creating Templates in MODx Part I (part IV in the series)

  1. Good job Everett! Clear and concise video. However, in the above summary, “Creating a Custom MODx Template”, it would have been probably helpful to include what you said in the video about pasting your template’s code in modx. When I read the summary I got confused thinking you were going to call the template as an include. I hope I am making sense (friday and all). Well done!

    cheers/k

    [EDIT: Thanks, Kongondo! I made edits to the page per your suggestions. Please continue to share your feedback so we can improve future videos! — Everett ]

    1. Don’t think that just because we changed the template on this site that I gave up on MODx. This site was running on WordPress long before my involvement in it. I’ve spoken with Brian at length about reasons for switching to MODx, but as you might guess, we’re both busy guys, and switching CMS’s is a time intensive operation, especially with a large site. This site is a blog, and WordPress works very well for that: there are lots of existing plugins available, too. If blogging is all you need to do, then I would recommend WordPress.

      MODx offers much greater flexibility and extendibility for programmers and front-end designers, so the more we discuss custom enhancements to this site, the more WordPress becomes limiting and the more likely a switch to MODx becomes (Uh, Brian? Are you reading this?).

      MODx just released the beta of their new version, named Revolution, and it promises to be even more powerful and well-built than its predecessor. I’ve worked with a lot of CMS’s and frameworks, and nothing I’ve seen has caught my eye as much as this.

  2. Everton – No one has given up on MODx. TipsFor.us ran on WordPress long before Everett wrote this article series. He has an affinity for MODx and continues to use it on several sites that he has built.

    On TipsFor.us, we publish through WordPress, but we write about a variety of subjects, including other CMSs. I’ve written a few article about Blogger, for instance.

  3. Everett: Great video. I hadn’t seen it before. I put a link to it on Bob’s Guides.

    Just a quick note: Those things that are referred to as “Placeholders” in the video are now called “Resource Tags” (though various old names for them are still hanging around here and there).

    Every document has a number of Resource Fields (basically, the fields of that document’s record in the database — e.g. pagetitle, longtitle, alias, description, content, etc.). The Resource Tag contains the name of a field and the Tag is replaced by the content of that field (from the database) for the current document.

    Resource Tags are also used for Template Variables, which are essentially custom Resource Fields created by the user in the MODx Manager.

  4. Thank you so much for creating this video. I’m a new MODx user– having toyed with Joomla, Drupal, and TYPO3….and finding them somewhat unwieldy. Your video has put the MODx templating, via the import-HTML route, into perspective for me.

    Ken

  5. Thank you for your video tutorial! I was planning to use modx on my next project and I need a new template for that, but had no idea where to start.

    It’s really amazing how simple is to use modx. I usually use joomla and wordpress for my websites, but I will give a try to modx.

    Thanks again for your easy to understand and helpful tutorial!

Comments are closed.