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.
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.
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:
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">
If you now reload the webpage, the site should be back to normal. What the MODx parser does is that when it encounters the chunk call, it pulls in the contents of the chunk and places them in the section where the call was made. If you are accustomed to PHP coding, you will recognize that this is basically similar to the concept of using file includes.
OK, so now that we know what to do, go ahead and do the same with the footer code. In my case, I will take all the code from the beginning of the footer div to just before the closing body tag and place it in the 7in1-footer chunk that we created, and then place a call to that chunk in the appropriate place. So now the bottom of my template code looks like this:
<!-- end bottom_widgets --></pre> <div class="clear"></div> <div id="footer_lid" class="grid_16 pngfix"></div> <pre> [[$7in1-footer]]
Again, there is no set way to do this, and you can divide your template up in whatever way makes the most sense to you, or not divide it at all! 🙂 The purpose of this demonstration is mainly to show you how to work with chunks and what the tag syntax is for calling chunks into your template.
For my purposes, I’m going to subdivide my home template further, adding one more chunk. This section of the template appears basically on every page on the website:
So I think it’s reasonable to place the code for that into its own chunk and call it into the templates. I will call that chunk 7in1-bottomwidgets and so now the bottom part of my template code looks like this:
<!-- end front_content --></pre> <div class="clear"></div> <div id="bottom_lid" class="grid_16 pngfix"></div> <pre> [[$7in1-bottomwidgets]]</pre> <div id="footer_lid" class="grid_16 pngfix"></div> <pre> [[$7in1-footer]]
As you can see, depending on what our template looks like we can continue splitting it further and further into separate chunks, or not at all. You will find that as you proceed you will create and refine your own preferences as far as working with chunks in templates is concerned. But learning the concept of chunks is important and you’re going to run into them again and again, so it’s good to know what they are, and what they can be used for.
This brings this part of the tutorial to an end.
In the next installment, we’re going to dig deeper and explore the basics on template variables and how to use them to create multiple editable areas on our page. So stay tuned, subscribe to the Coding Pad RSS feed, and let’s continue learning MODx Revolution
If you have any questions or corrections or just want to say hey, please feel free to drop me a note in the comments below. And remember to visit Themeforest to explore the selection of templates on offer.
Go to Part 6: Working with MODX Revolution Template Variables