Starting from Scratch: Tips for MODX Templates

Starting from Scratch: Tips for MODX Templates

One of the great strengths of MODX is the extreme flexibility of its templates. As they say on the modx.com home page, “MODX is creative freedom,” giving you “complete control over your site and content.” MODX templates are at the heart of this guiding principle. The creative freedom promised by MODX, like many freedoms, comes at a cost. In this case, the cost is a lack of hand-holding when it comes to template creation. You are given a blank slate, and what you do with it is up to you. The following are some brief guidelines you should keep in mind when creating your own MODX templates.

Use the front-end tools you like

MODX doesn’t care if you are a Zurb Foundation fan or a Twitter Bootstrap junkie. In fact, MODX doesn’t even care if you are building a website! You can render content stored in MODX as just about anything: XML, JSON, even the source code for native tablet apps (yes, we’ve done that at ByteJam and we’re quite proud of it!)

Plan to use full-page caching for your site

We love XFPC, the full page caching “Extra” for MODX. It provides a massive performance boost to almost any MODX site. It works best, though, if you use it right from the beginning. Plan to make all dynamically rendered content (welcome messages, randomly rotating callouts, etc.) handled via Ajax. Either use the XFPCAjax snippet outlined in the XFPC documentation or craft your own solution.

To this end, put all your Javascript in the footer so you leverage XFPC’s automatic Javascript minification!

Avoid code duplication in templates

You probably avoid duplicate code regardless, so keep with the trend when building these templates. Use a chunk for common header, footer markup and includes. Also, you should have a snippet for header/footer of site. This is analogous to include files for header and footer in old-school sites.

Push template variables as far as they will go

Template variables are great way to drop discrete chunks of content at various places in your templates. Although, keep in mind they’re pretty powerful. Make sure you fully understand the seven bindings that can be used with them: @CHUNK, @DIRECTORY, @EVAL, @FILE, @INHERIT, @RESOURCE, and @SELECT. I’ll save an in-depth discussion of these for a later blog post, but essentially, they open up the world to you. You can pull from external data sources, the file system, or execute code to get your content. Combine these with output filters (see below) and you can do some pretty amazing things.

Use [If?| when it makes sense

This one is simple–avoid nested ifs. Know when to create custom snippets instead of convoluted ‘[IFs].’ Use them to show/hide content blocks rather than create new templates.

Be prepared for multi-language support

How? Use Babel to easily manage different languages. If you have additional content that isn’t coming from your content well or template variables, use MODX’s built-in lexicon support. Create a dummy namespace if need be, to keep them all organized in one nice little spot.

Build in SEO support from the beginning

Use SEOPro, SEOTab, and put the hooks into your template from the very beginning. And you should probably place them in the header snippet mentioned earlier.

Format raw data with output filters

Output filters are an elegant, extensible way to format content. There are a ton of output filters directly built into MODX. They are all listed in this article - Input and Output Filters. If you need to do something that is not on this list, you can easily make your own. They are nothing more than MODX snippets with a few special, yet simple, conventions.