MODX: Total creative freedom

Many web site builders shy away from the MODX CMS because they think (or have heard) that it’s primarily for developers who are skilled at PHP and JavaScript coding.

While MODX has powerful components for skilled coders to use, there are many advantages for less tech-savvy designers too. The most important of these is the creative freedom that MODX provides. It allows you to easily make your web site look exactly the way you want it to, with no compromises.

MODX was developed by web programmers who were frustrated with the creative limitations of other CMS platforms. They hated having to work on systems that had built-in notions of how a web site should be built and where to put things so they would work.

They also wanted to do a better job of separating the content of a web site from the code that presented that content — a practice that makes it much easier to redesign and maintain websites.

 

Templates

What might be called the “first principle” of MODX is, whenever possible, to let the site designer do whatever he or she wants, and do it easily. At the heart of this creative freedom are MODX templates and MODX tags.

A MODX template is nothing more than a page of HTML code (and optionally MODX tags and JavaScript). You can pick a page on a non-CMS site and paste the HTML code for that page into a MODX template, adjust the URLs for any CSS files, and then tell MODX to use that template when showing a particular document on the site. That would take less than 5 minutes, and when you viewed the MODX page, it would look exactly the same as it did on the original site. The one restriction is that you can’t have any PHP code on the page (more on that later).

Pasting the code for a whole page into a template would ignore many of the powerful features of MODX, but it helps demonstrate just how much freedom you have in creating MODX web sites.

 

Tags

The main power of MODX comes from MODX tags. Essentially, MODX tags represent things that you move out of the template and put somewhere else for convenience and added flexibility. What remains in the template is typically the HTML shell and the MODX tags.

The basic operation of the MODX engine is incredibly simple. When a web page is requested by a browser, MODX checks to see what template is associated with that page. It gets the template, replaces any MODX tags in the template, and sends it off to the browser. That’s it.

The ability to have a dynamic, creative web site in MODX comes from what the tags can represent. There are a number of kinds of tags, and each one is replaced by something different. All the tags are optional and any tag can go anywhere in the template. Let’s look at a simple example involving what are called “chunk” tags.

Note: The examples here are for MODX Revolution. MODX Evolution uses a slightly different tag style, but the concepts are the same.

In MODX, a “chunk” is just a bit of HTML code that you want to use on more than one page. It might be a header, footer, sidebar, menu, or anything else. Let’s say it’s a footer that you want to show on every page (or some subset of your pages). You create the chunk in the MODX Manager, type in the HTML code for the footer, give it a name (FooterChunk), and then save it. Now, in your template, you just put the following tag where you want that footer to appear:

[[$FooterChunk]]

Every page that uses that template will show the footer chunk in that location. If you decide to change the text or HTML of the footer, you just edit the FooterChunk and the new version will appear on all your pages. If you want the footer somewhere else on the page, you just move the tag in the template.

Another kind of tag in MODX is the “resource content” tag (usually referred to as a “content” tag for short). In MODX, each web page corresponds to a document stored in the MODX database. When you create a new page for a MODX web site, you’re presented with a form that you can fill in with information about the document.

There are text input fields for a Title, Longtitle, Description, Summary, Alias (to be used in the URL), Content (the main content of the page) and Menu Title (automatically used in menus). There are checkboxes that indicate whether the document is published and whether it should be hidden from menus.

There are also date fields to indicate future publication or unpublication dates and the date when the document was published.

There are other fields as well, but here again we see the flexibility of MODX — all the fields except the Title and Alias are optional! Every page has to have a title and something to put in the URL of the page, but it’s entirely up to you whether to use the other fields or not. What goes in the other fields is also largely up to you. You almost certainly want to put the main content of the page in the content field, but you don’t have to. If you want to use the Long Title field to store the astrological sign of the user profiled on the page, go right ahead.

To get back to the “content” tags, they represent the fields of the form. When MODX sees a content tag, it replaces it with the value of the named form field. At the spot where you want the main content of the page to appear, for example, you put this tag in the template:

[[*content]]

Where you want the Long Title of the page to appear (if you want it at all), you put this tag:

[[*longtitle]]

For the main title, you’d use this tag:

[[*pagetitle]]

If you decide you want the Title or Long Title to appear somewhere else, you just move the tags in your template. If you don’t want to show the Long Title, you remove the tag from your template. If you want whatever is in the Long Title to appear in the page footer, you can even move its tag into the FooterChunk we mentioned earlier. To use an unlikely example, you could even put the URL of the path to the CSS file you want to use for the page into the Long Title field and put this tag in the head section of your template:

<link rel="stylesheet" type="text/css" href="[[*longtitle]]" />

MODX is very simple-minded when it comes to tags. When it sees a MODX tag, it replaces it with what it represents. It doesn’t care what it is or why you’re putting it there. It assumes that you know what you want and acts accordingly. There’s no struggling to figure out what MODX wants or why it’s not doing what you want because it just does what you tell it to. Trust me, it’s a pleasant change from having to deal with a CMS that thinks it knows more about what you want than you do, or has preconceived notions about how things should be displayed or where they should be located.

 

Snippets

Earlier in the article, I mentioned PHP code. In MODX, PHP code goes in a snippet, which is just any bit of PHP code you want to use on the site. When MODX sees a snippet tag, it replaces it with whatever is returned from the snippet. Putting PHP code in snippets makes the site much more secure and easier to maintain because the code is separated from the content. If some hacker manages to put a page on your site that contains malicious PHP code, MODX will ignore the code because it’s not in a snippet.

If you’re not a PHP coder, you’ll still use snippet tags because there are MODX add-on components (usually called “extras” in MODX) that will do a lot of the heavy lifting on your site.

The Wayfinder snippet, for example, will produce a menu from the documents on your site. If you create a new page, it will automatically appear in the menu. In its simplest form, you just put a tag like this where you want the menu to appear:

[[Wayfinder]]

MODX will replace that tag with a menu of all the pages on your site. By default, Wayfinder displays the menu options as links in an unordered list, but you can configure it to create any kind of menu you want.I’ve seen drop-down flyout menus, horizontal menus, vertical menus, fisheye menus, megamenus, popup menus, and even circular menus, all produced with Wayfinder. In fact, I have yet to see a menu that can’t be produced with Wayfinder.

You can also use Wayfinder to show menus from just a part of your site and you can have more than one Wayfinder menu on the same page. Remember the “Hide From Menus” and “Published” checkboxes we mentioned earlier? Wayfinder won’t show unpublished or hidden pages unless you tell it to.

Another often-used snippet is getResources. The getResources snippet will show selections of documents on your site, formatted however you like (using MODX tags, of course), sorted, selected, and displayed however you want them. A common use of getResources would be to show the title and summary of the five or ten most recently created documents on the site, each with a link to the full document.

Both Wayfinder and getResources use chunks for their formatting (this kind of chunk is called a Tpl chunk in MODX) with HTML code and MODX tags for the various elements to be shown. If you want to change the formatting or content of their output, you can simply edit the Tpl chunks (or create your own).

 

Blogging with MODX

At one time, it was somewhat difficult to create a blog in MODX (a definite drawback for many people). Now, however, the Articles extra is a full-featured blog component for MODX that’s easy to use and configure. Articles has comments, tags, moderation, threaded discussions, and everything else you might want for your blog, making MODX an attractive alternative to WordPress.

 

In Conclusion

This article has barely scratched the surface of MODX. Hopefully I’ve whetted your appetite about MODX and shown you a little about how much freedom it gives you in creating the web site you have in your head. Moving a non-MODX site to MODX is surprisingly easy. For a brief description of the process, see this page.

If you are a web designer and you want a CMS that allows you the creative freedom to make your site look exactly the way you want it to, you should definitely give MODX a try.

  • Todd Ruehmer

    I was required to use MODX for a solid year for work, and I KNOW that it’s primarily for developers who are skilled at PHP and JavaScript coding.

    • http://ronaldlokers.nl Ronald Lokers

      It depends on what you want to do. I have built sites with simple stuff like a menu, guestbook, image gallery and contact form in a week without any knowledge about the system.

      For the more customized stuff you indeed need to be skilled in coding, especially if you want to create components for MODX. But coding the templates (html/css/js) as just as easy as creating a static site.

  • http://twitter.com/fresh2 FRESHMEDIA

    MODX was really easy to install, and a dream to work with, even though the admin is slow. We completed 3 projects on MODX, but can never return in faith….

    I have had so much agony and almost lost a client because of a lack of support for basic MODX functionality. If we don’t know how to fix it, surely someone must know. We had some great support from the forums on one issue, but NO reponse on another critical matter… it is such a pity!

    • http://superdit.com aditia

      I’m giving up MODX cause so many component need to be learned before customizing something, for me this kind of cms may be compared with joomla or drupal in learning curve

  • http://www.facebook.com/profile.php?id=501928008 Jean-Marc Buytaert

    I’ve worked with several CMSs and blogging platform. The first one, ExpressionEngine, was a terrible experience, but mainly because I had no idea what I was doing, and the documentation was awful.

    The next one was a nightmare to understand: Drupal. Granted, it is robust, and there’s so much you can do with it, but updating the modules, and just coding/theming a website was just hell.

    Then I found the wonderful world of WordPress. What a relief! A lot user-friendlier than EE or Drupal, easier to code with, easy plugin updates, although not all plugins are compatible, which can be a problem.

    Finally, right after a job interview, I installed MODX on my machine to learn it as it was a requirement for the job. After the easiest installation ever, I was sold. Everything makes sense, it’s easy to navigate around, easy to code, and everything just… works!

    On top of that, MODX has an RTFM which is great documentation for all the different plugins/extras, and the MODX Community is simply amazing. Always here to help, fast to respond, and very friendly. Plus, the MODX Forum is very helpful as well.

    I’ve converted to MODX and refuse to work on any other platforms (maybe WP but for rare occasions), and I recommend everyone to give MODX a shot.

  • http://twitter.com/pigment_ab Pigment

    I have done Joomla, Concrete5, ModX and now doing Expression Engine. My clients did not understand Joomla at all. And I hated building templates They destroyed the pages and layout in Concrete5 but I loved the templating. In Modx I loved building and ould strip the admin so they only could reach what they needed. … but … I had to leave Modx for EE because there is no real file manager. I know basic PHP and I must say I could work in ModX (i build normal sites) without any PHP-coding. If ModX could build a filemanager worth the name I might think of going back. I really loved it and everything they let me control. The cach control is amazing.
    But the clients like so more than just a “tree” with image-files.

  • lossendae

    One way to describe MODx against a more popular tool, is that you don’t have to be in “the loop” to get things done.
    No hacks, no blackbox, no walker to remove unneeded/unwanted html markup.

    The only downside (at least for me) is that everything is stocked in the database.
    And despite the option to have static based files for all elements (chunks, snippets, etc…), you still need to always go back and forth in the admin, more than i would want to.

  • http://twitter.com/9thwave 9thwave

    The positives of MODX are that for a front-end developer you really do have creative freedom. I could not get on with the likes of WordPress or Drupal because of the long winded approach to templating.
    With MODX I create my HTML/CSS pages and then port them to MODX using ‘chunks’ of code. There is a learning curve but it’s certainly worth a modicum of blood, sweat and tears.
    The other real plus (there are many) that i’ve found is the relative ease in which the admin area can be simplified for clients, you can just leave them what’s needed.
    There are too many plus points to write about but for any front-end developer I would highly recommend giving MODX a whirl.

  • cgizma

    In IT Support I’m finding myself to need to know MODX a lot more

  • http://www.mayhemandchaos.com/ Sal Baldovinos

    LOVE MODx – we use it exclusively at my company! We’re even a partner company :)

  • http://www.facebook.com/joost.brommert Joost Brommert

    I’ve been using Joomla and WordPress in the past, but I will never go back! MODX Revo is the best CMF I’ve seen! Love it!

  • http://twitter.com/myradon Raymond Uphoff

    I think it’s lean and clean CMS. Big bummer my company is going for Drupal to develop future web-apps. Primarily lead-dev is not willing to dig/not digging into MODx and has set it’s mind to Drupal; has Firebird-DB support and made 2 sites with it. The only thing MODx Revo is lacking is tons of clear tuts, (cook)books and simple ABC-documentation. And the Dev-modules for Drupal are awesome. Still I MODx-fan by the way. It’s like chicken and the egg; userbase vs. docs. 

    I started to get around with MODx, before company made switch to Drupal, but it’s a big puzzle  to have some overview. I bought the MODX: The Official guide. It’s to techno talk for me as a UI-designer/ front-end developer.

  • http://www.blackbookoperations.com/ Black Book Operations

    Well, it sounds good, looks good, but as with a lot of other people, time is of the essence and i guess most will stick to the cms’s they are used to working with or the ones they have to use top down (company call). Whenever there is a ton of time left or courses out there that people can follow during company time, that might up the anty a bit. but agaian, as with every cms, one works with drupal, others with joomla, I myself prefer wordpress (if the plugins turn into a nightmare: write your custom built ones, but indeed, needs some php effort in here).

  • http://twitter.com/jonathanhaslett Jonathan Haslett

    I <3 #modx. IMHO the most under-rated CMS out there. I've avoided it on blog centric sites but I'm going to look into the Articles package :)

  • http://www.facebook.com/frank.overland Frank Overland

    I’m a designer who has been working with MODx for over 5 years, it is the best system for creative and programming freedom. If you can’t figure out how the basic snippet features work, and insisted on bulky, conflict-ridden crappy plug-ins  you shouldn’t do 72. Go back to 300.

  • Ray4job

    Modx is very flexible an is getting better all the time. I used concrete 5 and Opencart before which are great but if you want to do something thats outside the box a little then Modx is the best choice.

    If you want to very good tutorial that will help you set up a Modx website start to finish then look no further than http://codingpad.maryspad.com/2010/08/18/modx-revolution-for-beginners-part-1-introduction/ really great tutorial.

  • Ray4job

    Modx is very flexible an is getting better all the time. I used concrete 5 and Opencart before which are great but if you want to do something thats outside the box a little then Modx is the best choice.

    If you want to very good tutorial that will help you set up a Modx website start to finish then look no further than http://codingpad.maryspad.com/2010/08/18/modx-revolution-for-beginners-part-1-introduction/ really great tutorial.