Movable Type 3 vs. Movable Type 4: A Modular Site Approach
Adam Cleaveland from Cleave Design sent over this question, and I thought it was particularly relevant, especially in light of the new approach Movable Type 4 takes with it's default templates:
"I am having a very hard time understanding the "Templates" within MT. I'm used to just being able to make a change within the header.php in Wordpress that affects every page. However, with Movable Type, it seems that if I make any chance in the template, I have to make that change in every different template I have (Main Index, Master Archive, Search Template, Comment-Pending Template, Comment-Error Template, etc., etc.). Am I just completely missing something? Or is this the only way to go about doing it?"
The question he raises is a good one. The first thing is not to confuse "template tags" with "template modules". As MT is currently bundled, each "template" has all of the code needed for a full page. The main index page has all of the html header information, the banner has all the banner information, sidebar, etc. Now, it's nice because most information like the blog name and description and meta tags are all stored in MT and get put into the page by using template tags (i.e. ). But essentially if you want to change the HTML for the header or the banner or anything else, you have to change it on that particular template. So, for example, adding a div above the banner would require opening each template and adding the div above the banner.
Now, there are ways around this; in fact, that's one of the reasons Six Apart is changing it's approach with the new Movable Type 4. It makes a lot more sense (even though it's a bit more confusing for the beginner). The basic approach is this: commonly used chunks of code are stored as template "modules" and then called to from each template. Makes MUCH more sense because you don't repeat code. If the header code is the same for all of your pages, then the only thing you need on each page is a call to the template module () that holds your header code. It's all in one place.
Of course, sometimes you've got things in those modules that need to be custom for each page, like the entry title in the HTML header area. Movable Type handles nearly all of that stuff with template tags. Put in between your tags and Movable Type figures out the context and puts the right information in there. Sometimes, though, there are things you might want to, for example, add to your sidebar for particular pages; Movable Type allows you to set variables and call them from your templates. This gives you the ability to add specific content or check against a Boolean "switch" to turn parts of your module on or off. </p>
<p><img src="/assets/templateapproach-mt4.gif" alt="" /></p>
<p>Lots of developers use a similar approach with PHP. Common elements like the header and footer get created as index templates and then included with a simple PHP include. This saves you considerably on rebuilds because MT is only building one file that all your pages include instead of building the same code for every page. It's not always the best option, but it's often worth considering.</p>
<p>The learning curve for this new approach is slightly higher because you have to be able to follow the linking; but the power it brings you is tremendous. Instead of trying to scrounge through all of your templates and replace code each time a change is made to these common elements, you can just change it in one place and MT will build it out across your site.</p>
<a name="more"></a>
</div>
<div class="section">
<h2>TrackBacks</h2>
<h3>Articles That Link To This One</h3>
<p>TrackBack URL for this entry:<br />http://plasticmind.com/cgi-bin/mt4/mt-tb.cgi/764</p>
</div>
<div class="section">
<h2>Comments</h2><a name="comments"></a>
<a id="c045964"></a>
<div class="comment">
<div class="comment-content">
<p>thanks for this excellent post on the template changes. it is a lot of working converting movable type's templates over from 3.35 to 4 - but worth it.</p>
</div>
<p class="comment-footer">
Posted by:
<a title="http://www.metisinternet.com" href="http://plasticmind.com/cgi-bin/mt4/mt-comments.fcgi?__mode=red;id=45964">metisinternet</a> on
<a href="#comment-45964">September 26, 2007 3:53 PM</a>
</p>
</div>
<a id="c061163"></a>
<div class="comment">
<div class="comment-content">
<p>I've modularized the **** out of my mt 3.x install,<br />
and I Freaking CRIED when I saw MT4's Unmitigated Cluster**** of templates and CSS.</p>
<p>Let the developers run away with the release, eh?</p>
<p>Maybe 6A should hire someone in, erm... UX or IA, maybe.</p>
<p>This release really brings back the old saying about MySQL: it's only free if your time is worth nothing.</p>
<p>Yuk!</p>
<p>-> Hence, I would have Loved to see more detail in this post.</p>
</div>
<p class="comment-footer">
Posted by:
<a title="http://www.metavitae.com" href="http://plasticmind.com/cgi-bin/mt4/mt-comments.fcgi?__mode=red;id=61163">Will</a> on
<a href="#comment-61163">December 3, 2007 10:56 PM</a>
</p>
</div>
</div>
<div class="comments-open" id="comments-open">
<h2 class="comments-open-header">Leave a comment</h2>
<div class="comments-open-content">
<div id="comment-form-external-auth">
<script type="text/javascript">
<!--
writeCommenterGreeting(commenter_name, 2310, 21, commenter_id, commenter_url);
//-->
</script>
</div>
<form method="post" action="http://plasticmind.com/cgi-bin/mt4/mt-comments.fcgi" name="comments_form" id="comments-form" onsubmit="if (this.bakecookie.checked) rememberMe(this)">
<input type="hidden" name="static" value="1" />
<input type="hidden" name="entry_id" value="2310" />
<input type="hidden" name="__lang" value="en" />
<div id="comments-open-data">
<div id="comment-form-name">
<label for="comment-author">Name</label>
<input id="comment-author" name="author" size="30" value="" />
</div>
<div id="comment-form-email">
<label for="comment-email">Email Address</label>
<input id="comment-email" name="email" size="30" value="" />
</div>
<div id="comment-form-url">
<label for="comment-url">URL</label>
<input id="comment-url" name="url" size="30" value="" />
</div>
<div id="comment-form-remember-me">
<label for="comment-bake-cookie"><input type="checkbox" id="comment-bake-cookie" name="bakecookie" onclick="if (!this.checked) forgetMe(document.comments_form)" value="1" />
Remember personal info?</label>
</div>
</div>
<div id="comments-open-text">
<label for="comment-text">Comments (You may use HTML tags for style)</label>
<textarea id="comment-text" name="text" rows="15" cols="50"></textarea>
</div>
<p id="comments-open-challenge"><input type="hidden" id="commchallenge_beacon" name="commchallenge_beacon" value="1" /><label for="commchallenge_answer">Type the letter x <strong>(required)</strong>:</label><br /><input type="text" id="commchallenge_answer" name="commchallenge_answer" /></p><script type="text/javascript">
<!--
if (commenter_name) { hideDocumentElement('comments-open-challenge'); } else { showDocumentElement('comments-open-challenge'); }
// -->
</script>
<div id="comments-open-footer">
<input type="submit" accesskey="v" name="preview" id="comment-preview" value="Preview" />
<input type="submit" accesskey="s" name="post" id="comment-submit" value="Submit" />
</div>
</form>
</div>
</div>
</div>
<div id="sidebar">
<div id="sidebarinner">
<div class="sidemod" id="search">
<h2>Search Me</h2>
<form action="http://www.movabletweak.com/search.php" method="get" id="searchform">
<input type="hidden" name="IncludeBlogs" value="21" />
<input class="field" name="search" size="20" />
<input type="submit" value="GO" class="button" />
<input type="hidden" name="Template" value="mtweak" />
</form>
</div>
<div class="sidemod" id="category">
<h2>Category Me</h2>
<ul>
<li><a href="http://www.movabletweak.com/announcements/" title="">Announcements</a>
</li>
<li><a href="http://www.movabletweak.com/app/" title="">App</a>
</li>
<li><a href="http://www.movabletweak.com/architecture/" title="">Architecture</a>
</li>
<li><a href="http://www.movabletweak.com/beginners/" title="">Beginners</a>
</li>
<li><a href="http://www.movabletweak.com/beta/" title="">Beta</a>
</li>
<li><a href="http://www.movabletweak.com/categories/" title="">Categories</a>
</li>
<li><a href="http://www.movabletweak.com/comments/" title="">Comments</a>
</li>
<li><a href="http://www.movabletweak.com/customfields/" title="">CustomFields</a>
</li>
<li><a href="http://www.movabletweak.com/design/" title="">Design</a>
</li>
<li><a href="http://www.movabletweak.com/forms/" title="">Forms</a>
</li>
<li><a href="http://www.movabletweak.com/freebies/" title="">Freebies</a>
</li>
<li><a href="http://www.movabletweak.com/images/" title="">Images</a>
</li>
<li><a href="http://www.movabletweak.com/misc/" title="">Misc.</a>
</li>
<li><a href="http://www.movabletweak.com/plugins/" title="">Plugins</a>
</li>
<li><a href="http://www.movabletweak.com/templates/" title="">Templates</a>
</li>
<li><a href="http://www.movabletweak.com/users/" title="">Users</a>
</li>
</ul>
</div>
<div class="sidemod" id="recent">
<h2>Recent Tips</h2>
<ul>
<li class="module-list-item"><a href="http://www.movabletweak.com/app/migrating_customfields_movable_type.php">Migrating CustomFields to Movable Type Professional 4.1</a></li>
<li class="module-list-item"><a href="http://www.movabletweak.com/templates/email_list_of_all_authors.php">Get An Email List of All Authors On Your System</a></li>
<li class="module-list-item"><a href="http://www.movabletweak.com/templates/image_customfields_in_movable.php">Image CustomFields in Movable Type 4.1</a></li>
<li class="module-list-item"><a href="http://www.movabletweak.com/templates/movable_type_template_map_pdf.php">Movable Type Template Map (.PDF)</a></li>
<li class="module-list-item"><a href="http://www.movabletweak.com/templates/list_random_authors.php">List Random Authors (via PHP)</a></li>
<li class="module-list-item"><a href="http://www.movabletweak.com/templates/rotating_banner_ads_mt_style.php">Rotating Banner Ads MT Style</a></li>
<li class="module-list-item"><a href="http://www.movabletweak.com/categories/creative_subcategories.php">Creative Ways To Use Subcategories</a></li>
<li class="module-list-item"><a href="http://www.movabletweak.com/app/a_brief_review_of_movable_type.php">A Brief Review of Movable Type 4.0</a></li>
<li class="module-list-item"><a href="http://www.movabletweak.com/freebies/lovable_type_aww.php">Lovable Type (aww)</a></li>
<li class="module-list-item"><a href="http://www.movabletweak.com/app/reordering-extra-fields.php">Tricking RightFields Into Showing Your Extra Fields First</a></li>
</ul>
</div>
<div class="sidemod" id="solutions">
<h2>Custom Solutions</h2>
<p><strong>Movable Tweak</strong> is a free information service of Plasticind Design. Our goal is to provide comprehensive, affordable web design that is a pleasure to use. Interested in custom solutions for your site? Let us know via our <a href="http://plasticmind.com/contact/">online contact form</a>.</p><p><a href="http://plasticmind.com/"><img src="/images/pmbadge.png" alt="Plasticmind Design" /></a></p>
</div>
<div class="sidemod" id="stats">
<h2>Vital Stats</h2>
<ul>
<li>This site powered by <a href="http://www.sixapart.com/movabletype/">Movable Type 4.1</a></li>
<li><a href="http://www.movabletweak.com/atom.xml">Subscribe to this site's feed</a></li>
</ul>
</div>
</div>
</div>
</div>
<div id="mainbottom"> </div>
</div>
<div id="footer">
<ul>
<li>Content © 2007 <a href="http://plasticmind.com/contact/">Jesse Gardner</a></li>
<li>Design © 2007 <a href="http://plasticmind.com">PlasticMind Design</a></li>
<li class="last"><a href="http://www.movabletweak.com/atom.xml">Site Feed</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="http://www.google-analytics.com/urchin.js" type="text/javascript">
</script>
<script type="text/javascript">
_uacct = "UA-1045764-5";
urchinTracker();
</script>
</body>
</html>
24 Jul 2007 ~ Link ~ Category: Architecture ~ Comments: 2