Creating Templates in MODx Part II (part V in the series)

May 1, 2009 - Reading time: 5 minutes

Now that you are able to create basic MODx templates from watching the previous video, let's learn how to extend their functionality even further with the inclusion of reusable chunks of code and dynamic PHP snippets.

Vocabulary

You only have to learn a couple new terms to understand what MODx is talking about — it’s not a steep learning curve, so jump in!

1. Chunk — any bit of reusable text (usually HTML). Text used in a site’s footer is commonly placed into a chunk. MODx references chunks using double curly-braces: {{name_of_your_chunk}}, and they can be used almost anywhere, including page content and templates. Chunks can also contain Snippets!
2. Snippet— this is a bit of PHP code (I remember Snippet by its double-P’s: sni-PhP-et). You can literally cut and paste almost any working PHP script into a MODx Snippet; once it has been created, you reference it using either double-square brackets or with a bracket and an exclamation point: [[Like_this]] or [!Like_this!], depending on whether you want it to always execute, or whether its output can be cached. See the MODx Wiki for more information.

Clarification

To clarify the process here, first you create a Chunk or a Snippet by logging into the MODx Manager and navigating to Resources->Manage Resources, then selecting the appropriate tab (for Snippet or for Chunk). You paste in the code you want to use, then save it. Back in your documents or templates, you can reference the Chunks and Snippets by name, flagging the names with either “{{ name }}” (for Chunks) or “[[ name ]]” (for Snippets). When MODx parses the document or template, the text in the Chunk will replace the tag, or in the case of a Snippet, the code will execute and its output will replace the tag.

Template Tips

1. If you keep pasting the same bit of text into lots and lots of pages, consider adding that text into a Chunk. Also consider adding the reference to that chunk to your template.
2. Set up a good working Snippet to auto-generate your menus. Wayfinder is a very flexible Snippet designed explicitly for this task, and it is included with MODx. Check the official site for up-to-date documentation; there are also lots of examples on the MODx Wiki
3. Plan your site and its templates before trying to code them; then make sure you code them before adding them to MODx.
4. If your site has too many templates, you probably are doing something inefficiently. Ask around: is there a better way to accomplish what you’re trying to do?
5. When adding your templates and its associated chunks/snippets to MODx, take advantage of the “category” field. It offers a simple way to keep your components organized.

Other Tutorials: don’t just take our word for it

1. Bob’s Guides — Bob is very active in the MODx Forums, and he knows what he’s talking about.
2. The Coding Pad

Download MODx Templates

You can also download MODx templates from a number of other sites! And since it’s so easy to integrate existing templates, you can download templates for virtually any platform and incorporate them into MODx.

• MODxCMS — the official repository
• https://www.tattoocms.it/
• https://www.free-css.com/

Summary

After watching these two videos, I hope you can see how simple it is to get CMS functionality out of existing HTML/CSS using MODx. Again, the big thing I didn’t explicitly point out in the videos is that MODx stores its template code in its database: you can create and use a MODx template without uploading a single file to your webserver. Of course, if you want to reference CSS or Javascript files on your webserver, it’s accomplished in exactly the same way as you would do it on a static site: just make sure your paths to your resources are correct. I’ll cover how to write your own Snippets in another video. For now, just review the wiki page about MODx placeholders as you build your own templates. Please note, I did make one slip up in the video… Snippet values should usually include backticks, like this: [[MySnippet? &parameter1=`value`]].

-- Everett Griffiths