Modx & blogging part 5: Template integration


Articles, Modx, Styling

This is where we start the process of replacing the standard templates that comes with Articles with the free Caprice template that we've selected to use. We will be concentrating first on the Articles summary page, but the principles will apply to all pages.

There are probably many ways to go about this. I've decided to first take the Articles content and insert it into the new template. Then I'll look at common site elements like menus, sidebars, footers etc and turn them into chunks, thus making site wide changes much easier to manage for these elements.

Initial changes

Lets start with the ArticlesContainerTemplate. This is the template that creates the Articles blog summary page and is the equivalent of the Caprice blog.html page. Looking closely at the template, the following Articles elements provide the majority of content for the page:

[[!SimpleSearchForm? &landing=`6`]]

Latest Comments

`]] [[+tags]] [[+archives]]

We need to work out where each of these elements lives inside blog.html, which is about to become our new ArticlesContainerTemplate. Make a copy of blog.html and paste it into ArticlesContainerTemplate - remember again not to use the default, but the copy we created way back in lesson 2.

After saving the template if you look at the resulting page it would have no styling as we have not yet moved the Caprice stylesheet to our site. We'll do this now.

If you look at the files and directories that come with the Caprice template you will see the following:

Caprice file and directory layout

We do not need any of the html pages (as any we do want will be copied directly into Modx templates) but we do want the stylesheet(s) and other support files highlighted above. Actually that is not strictly true for this exercise - the only file that is mandatory is style.css - the others may be needed for other parts of the site but won't be used here.

Copy style.css and (optionally) the other directories as well up to your web site. I have chosen to place them in a directory called site that sits off the root of my site. Into here I put all the non-Modx sourced elements for my site. Put the files wherever you want for your site but take note below to modify the changes that will need to be made to the template.

At the moment, style.css can't be seen by the template because it has an incorrect path:

In my case it needs to be:

If you are using a different location you'll need to change it accordingly.

Any images, links, scripts etc in the new template are pointing to the wrong directory also. This can be fixed by doing a global search and replace as follows:

Search for: "style/

Replace with: "site/style/ (or your path if different)

Save the changes. The blog page will now be starting to look like the original Caprice template again but there is still no 'real' content appearing. To fix that we need to first remove most of the dummy content that came with the template and replace it with Articles content.


The Caprice template places blog entries in a nested set of <div>s with an outside <div> class of "post". There are a number of these in the sample template - we only need one - so remove all the others. In the one that is left, remove the 'Lorum ipsum' paragraph (including the tags) and replace it with [[*content]] (the content field). The relevant section of the template should look like this:


and the page should look like this:

New template with some changes

Right hand sidebar

Next, we'll populate the right hand sidebar with real Articles data. In the template, this is covered by the "secondary" div. Find this section of the template and replace it with the code below:

[[+comments_enabled:is=`1`:then=` `]]

There is still a lot to be done, but it is starting to look like a real blog. You may have noticed that we haven't yet touched the header and footer blocks for each article and yet they are appearing twice - once with dummy data from the new template, and once with real data from the [[*content]] field. We'll address the reasons for this (and fix it) as well as getting searching operational, in the next post.

After a bit more cleanup and removal of dummy data, the blog summary page is looking like this:

Starting to come together...

Add a Comment