MODx Revolution for Complete Beginners Part 5 – Working with Chunks

Welcome to Part 5 of the MODx Revolution for Complete Beginners series.  In the last installment, we started looking at how to work with templates in MODx Revolution.  We begun with a static HTML/CSS template and ported it into our MODx Revolution install, changed the paths to the assets, and started learning the MODx Revolution tag syntax and how to use it.  In this installment, we’re going to continue working on our template and explore the concept of chunks.

Catch up:

Part 1: Introduction
Part 2: Installation
Part 3: Basic Configuration and Installing Extras
Part 4: Working with Templates

As we work through this series we’re building a resource website for learning MODx Revolution.  If you join this series later, I am adding plenty of screenshots as I go to ensure that you have something to compare your own progress with.  Additionally, I am using the 7-in-1 Business Success Site template that can be purchased from Themeforest.  If you’re working along using a template that you’ve created or downloaded from elsewhere you should be just fine, the concepts are the same no matter what template you use, and if something doesn’t work like it should feel free to leave a comment with your code snippets and what’s looking different and myself or others will try to assist you.

So let’s get hands on! 🙂  So far our website looks exactly like the template that we downloaded because we have all the paths to the css, js and image files pointing to the appropriate place.  So let’s talk about chunks.

What is a Chunk?

Chunks are pieces of HTML code or text.  The important thing to note about chunks is that they’re purely HTML or text, not logic. You cannot have PHP code in a chunk, it simply won’t execute.  PHP code needs to be placed in a snippet (which we will explore in a later post).  This snippet can then be called within a chunk. However, chunks in and of themselves cannot contain raw PHP code.

Why use Chunks?

You can use chunks for various purposes. Some examples include organizing your template into manageable pieces, storing HTML or text that will be used again and again in your site, and storing mini-templates for your menus, etc.  This may be as clear as mud right now but it will become more obvious as we continue.

In this tutorial, I am going to be using chunks to organize my template into more manageable pieces.  As I mentioned at the beginning of the series, these tutorials will reflect how I like to do things, which is not by any means the only or best way to do things.  So feel free to skip this or to just read it to understand chunks and to become familiar with their syntax, and then organize your template (or not) how you want it.

If we look at the template code that we’re working with, you can see that it’s a long page of code, and I find that when I need to find or edit some part of it I easily and quickly get lost and frustrated.  To avoid this, I like to look at the code and break it into logical sections, and then store those in separate places as chunks that I can then call into the main template.

We can see that this template is divided into three distinct sections, the head, the footer and the stuff inbetween, as are most templates out there.  This immediately tells us that we can split our template into these three parts.  That’s a good start, after which we can then dissect these further and see if there are more things we could divide out. So the first thing we’re going to do is to create two new chunks which we call 7in1-header and 7in1-footer.

To create a new chunk, we go into the manager and in the left side tree, go into the Elements tab. We can create a new chunk in one of two ways: either right-click on Chunk and select “New Chunk” or use the Chunk shortcut icon.

In the screen that appears when we do this, we then enter the information requested – the name of the chunk, a description, and a category if you so desire.

Save this chunk for now, we will insert the code shortly.  Go ahead and do the same for the footer chunk.

If we now look at the resource tree, we can see our two new chunks under the chunks section.

So we now have our chunks ready for use. All we need to do is cut the relevant sections of code from our template and place them in the chunks.  In my case, I will open the 7in1 Home template that we created in the last installment and cut all the code that’s between the opening and closing <head> tags.  I will then paste this into the 7in1-header chunk that  I just created and save that.

If we were to preview the site now we would notice that it no longer looks like it should.

What’s happening is that the site no longer sees the css files and js files since we’ve cut all that information out of the main template.  But since it’s now stored in a chunk, all what we simply need to do is call that chunk into the head of the template.

How to Call a Chunk in MODx Revolution

The tag syntax for chunks in MODx Revolution is simply:

[[$chunkName]]

So in our case, we’re simply going to go to our template and place the call to our 7in1-header chunk in the space where we removed the header code.  Therefore the top part of our template code will now look like this:

[[$7in1-header]]</pre>
<div id="wrapper-1" class="pngfix">
<div id="wrapper-2" class="pngfix">