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="entry-details"> <ul class="left"> <li> <!-- ADDTHIS BUTTON BEGIN --> <script type="text/javascript"> addthis_pub = 'plasticmind'; </script><a href="http://www.addthis.com/bookmark.php" onMouseOver="return addthis_open(this, '', '[URL]', '[TITLE]')" onMouseOut="addthis_close()" onClick="return addthis_sendto()"><img src="http://s9.addthis.com/button1-bm.gif" width="125" height="16" border="0" alt="" /></a><script type="text/javascript" src="http://s7.addthis.com/js/152/addthis_widget.js"></script> <!-- ADDTHIS BUTTON END --> </li> <li>posted on 24 July 2007</li> <li>by Jesse</li> </ul> <ul class="right"> <li><a href="#comments">Comments (2)</a></li> <li>in the chapter, "<a href="http://blog.plasticmind.com/movable-type/">Movable Type</a>"</li> </ul> <br class="clear" /> </div> </div> <div class="module" id="comments"> <h2><span>Inter</span>Action:</h2> <div class="comment" id="comment-124360"> <h3><em><a href="#comment-124360" title="Permalink to this comment">26 September 2007</a></em><span>1. </span> <a title="http://www.metisinternet.com" href="http://plasticmind.com/cgi-bin/mt/mt-comments.cgi?__mode=red;id=124360">metisinternet</a>:</h3> <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> <div class="comment" id="comment-124361"> <h3><em><a href="#comment-124361" title="Permalink to this comment"> 3 December 2007</a></em><span>2. </span> <a title="http://www.metavitae.com" href="http://plasticmind.com/cgi-bin/mt/mt-comments.cgi?__mode=red;id=124361">Will</a>:</h3> <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> <hr /> </div> <div class="module" id="comment-form"> <h2><span>Your</span>Thoughts?</h2> <div id="comment-form-external-auth"> <script type="text/javascript"> <!-- writeCommenterGreeting(commenter_name, 4682, 28, commenter_id, commenter_url); //--> </script> </div> <form method="post" action="http://plasticmind.com/cgi-bin/mt/mt-comments.cgi" name="comments_form" id="comments-form" onsubmit="if (this.bakecookie.checked) rememberMe(this)"> <fieldset> <input type="hidden" name="static" value="1" /> <input type="hidden" name="entry_id" value="4682" /> <input type="hidden" name="__lang" value="en" /> <div id="comments-open-data"> <div id="comment-form-name"> <label for="comment-author">Name:</label> <input class="form-field" id="comment-author" name="author" size="30" value="" /> </div> <div id="comment-form-email"> <label for="comment-email">Email:</label> <input class="form-field" id="comment-email" name="email" size="30" value="" /> </div> <div id="comment-form-url"> <label for="comment-url">URL:</label> <input class="form-field" 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">Thoughts:</label> <textarea class="form-field" id="comment-text" name="text" rows="15" cols="50"></textarea> </div> <div> <p id="comments-open-challenge"><input type="hidden" id="commchallenge_beacon" name="commchallenge_beacon" value="1" /><label for="commchallenge_answer">Please type 'x' in the box <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> <div id="comments-open-footer"> <input type="image" src="http://plasticmind.com/i/blog-button-post.png" alt="Send" value="Submit" id="comment-submit" accesskey="v" name="post" class="form-button" /> <input type="image" src="http://plasticmind.com/i/blog-button-preview.png" alt="Preview" value="Preview" id="comment-preview" name="preview" class="form-button" accesskey="s" /> </div> </fieldset> </form> </div> <hr /> </div> </div> <div id="column2"> <div class="first module" id="minutia"> <h2><span class="fade">(Minutia)</span></h2> <div id="minutia-in"> <div id="minutia-in2"> <ul class="minutia-column1"> <li><div class="minutia-label">Author:</div> <div class="minutia-content">Jesse</div></li> <li><div class="minutia-label">Published:</div> <div class="minutia-content">Jul 24, 2007</div></li> <li><div class="minutia-label">Chapters:</div> <div class="minutia-content"><a href="http://blog.plasticmind.com/movable-type/">Movable Type</a></div></li> </ul> <ul class="minutia-column2"> <li><div class="minutia-label">Previous:</div> <div class="minutia-content"><a href="http://blog.plasticmind.com/movable-type/mttagscom-a-handy-reference-fo/" class="option-previous">MTTags.com: A Handy Reference For Movable Type Template Tags</a></div></li> <li><div class="minutia-label">Next:</div> <div class="minutia-content"><a href="http://blog.plasticmind.com/movable-type/the-style-archive-with-mt4/" class="option-next">Using The Style Archive With Movable Type 4</a></div></li> </ul> <div class="clear"></div> </div> </div> </div> <div class="column2a"> <div class="module" id="updates"> <h2><span>Get</span>Updated</h2> <p> <form action="http://www.feedburner.com/fb/a/emailverify" method="post" target="popupwindow" onsubmit="window.open('http://www.feedburner.com', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true"> <label for="subscribe">Get new articles in your inbox:</label> <input type="hidden" value="http://feeds.feedburner.com/~e?ffid=1158501" name="url"/> <input type="hidden" value="Plasticmind//Blog" name="title"/> <input type="hidden" name="loc" value="en_US"/> <input type="text" name="email" id="subscribe" class="form-field" /> <input type="image" src="http://plasticmind.com/img/journal-button-go.png" alt="Go" value=" Go " id="subscribe-submit" class="form-button" /> </form> </p> <ul class="more-options"> <li><a href="http://feeds.feedburner.com/plasticmind/blog" class="feed-link">Blog RSS Feed</a></li> </ul> </div> </div> <div class="column2b"> <div class="module" id="status"> <h2><span>Else</span>Where</h2> <div class="widget-elsewhere widget"> <div class="widget-content"> <a href="aim:goim?screenname=theplasticmind" rel="me"><img src="http://plasticmind.com/mt-static/plugins/ActionStreams/images/services/aim.png" alt="Find me on aim"></a> <a href="http://del.icio.us/plasticmind/" rel="me"><img src="http://plasticmind.com/mt-static/plugins/ActionStreams/images/services/delicious.png" alt="Find me on delicious"></a> <a href="http://digg.com/users/plasticmind/" rel="me"><img src="http://plasticmind.com/mt-static/plugins/ActionStreams/images/services/digg.png" alt="Find me on digg"></a> <a href="http://www.dopplr.com/traveller/plasticmind/" rel="me"><img src="http://plasticmind.com/mt-static/plugins/ActionStreams/images/services/dopplr.png" alt="Find me on dopplr"></a> <a href="http://www.facebook.com/profile.php?id=502817201" rel="me"><img src="http://plasticmind.com/mt-static/plugins/ActionStreams/images/services/facebook.png" alt="Find me on facebook"></a> <a href="http://www.last.fm/user/jessegardner/" rel="me"><img src="http://plasticmind.com/mt-static/plugins/ActionStreams/images/services/lastfm.png" alt="Find me on lastfm"></a> <a href="http://www.linkedin.com/in/plasticmind" rel="me"><img src="http://plasticmind.com/mt-static/plugins/ActionStreams/images/services/linkedin.png" alt="Find me on linkedin"></a> <a href="http://plasticmind2k1.livejournal.com/" rel="me"><img src="http://plasticmind.com/mt-static/plugins/ActionStreams/images/services/livejournal.png" alt="Find me on livejournal"></a> <a href="msnim:chat?contact=plasticmind@hotmail.com" rel="me"><img src="http://plasticmind.com/mt-static/plugins/ActionStreams/images/services/msn.png" alt="Find me on msn"></a> <a href="http://pownce.com/plasticmind/" rel="me"><img src="http://plasticmind.com/mt-static/plugins/ActionStreams/images/services/pownce.png" alt="Find me on pownce"></a> <a href="callto://plasticmind" rel="me"><img src="http://plasticmind.com/mt-static/plugins/ActionStreams/images/services/skype.png" alt="Find me on skype"></a> <a href="http://technorati.com/people/technorati/plasticmind" rel="me"><img src="http://plasticmind.com/mt-static/plugins/ActionStreams/images/services/technorati.png" alt="Find me on technorati"></a> <a href="http://twitter.com/plasticmind" rel="me"><img src="http://plasticmind.com/mt-static/plugins/ActionStreams/images/services/twitter.png" alt="Find me on twitter"></a> <a href="http://plasticmind.vox.com/" rel="me"><img src="http://plasticmind.com/mt-static/plugins/ActionStreams/images/services/vox.png" alt="Find me on vox"></a> <a href="http://edit.yahoo.com/config/send_webmesg?.target=superplasticmind" rel="me"><img src="http://plasticmind.com/mt-static/plugins/ActionStreams/images/services/yahoo.png" alt="Find me on yahoo"></a> <a href="http://www.youtube.com/user/plasticmind" rel="me"><img src="http://plasticmind.com/mt-static/plugins/ActionStreams/images/services/youtube.png" alt="Find me on youtube"></a> </div> </div> </div> </div> <br class="clear" /> <div class="column2a"> <div class="module" id="chapters"> <h2><span>All</span>Chapters</h2> <ul class="table"> <li><a href="http://blog.plasticmind.com/accessibility/"><em>2<span> articles in the chapter </span></em>Accessibility</a></li> <li><a href="http://blog.plasticmind.com/announcements/"><em>6<span> articles in the chapter </span></em>Announcements</a></li> <li><a href="http://blog.plasticmind.com/app/"><em>1<span> articles in the chapter </span></em>App</a></li> <li><a href="http://blog.plasticmind.com/apple/"><em>2<span> articles in the chapter </span></em>Apple</a></li> <li><a href="http://blog.plasticmind.com/blogging/"><em>5<span> articles in the chapter </span></em>Blogging</a></li> <li><a href="http://blog.plasticmind.com/cms/"><em>7<span> articles in the chapter </span></em>CMS</a></li> <li><a href="http://blog.plasticmind.com/code/"><em>1<span> articles in the chapter </span></em>Code</a></li> <li><a href="http://blog.plasticmind.com/css/"><em>3<span> articles in the chapter </span></em>CSS</a></li> <li><a href="http://blog.plasticmind.com/design/"><em>16<span> articles in the chapter </span></em>Design</a></li> <li><a href="http://blog.plasticmind.com/diy/"><em>1<span> articles in the chapter </span></em>DIY</a></li> <li><a href="http://blog.plasticmind.com/downloads/"><em>4<span> articles in the chapter </span></em>Downloads</a></li> <li><a href="http://blog.plasticmind.com/freebies/"><em>1<span> articles in the chapter </span></em>Freebies</a></li> <li><a href="http://blog.plasticmind.com/gadgets/"><em>2<span> articles in the chapter </span></em>Gadgets</a></li> <li><a href="http://blog.plasticmind.com/journeys/"><em>5<span> articles in the chapter </span></em>Journeys</a></li> <li><a href="http://blog.plasticmind.com/miscellany/"><em>1<span> articles in the chapter </span></em>Miscellany</a></li> <li><a href="http://blog.plasticmind.com/mobile/"><em>1<span> articles in the chapter </span></em>Mobile</a></li> <li><a href="http://blog.plasticmind.com/movable-type/"><em>59<span> articles in the chapter </span></em>Movable Type</a></li> <li><a href="http://blog.plasticmind.com/plugins/"><em>2<span> articles in the chapter </span></em>Plugins</a></li> <li><a href="http://blog.plasticmind.com/print/"><em>1<span> articles in the chapter </span></em>Print</a></li> <li><a href="http://blog.plasticmind.com/projects/"><em>3<span> articles in the chapter </span></em>Projects</a></li> <li><a href="http://blog.plasticmind.com/reviews/"><em>2<span> articles in the chapter </span></em>Reviews</a></li> <li><a href="http://blog.plasticmind.com/seo/"><em>2<span> articles in the chapter </span></em>SEO</a></li> <li><a href="http://blog.plasticmind.com/social-networking/"><em>9<span> articles in the chapter </span></em>Social Networking</a></li> <li><a href="http://blog.plasticmind.com/standards/"><em>1<span> articles in the chapter </span></em>Standards</a></li> <li><a href="http://blog.plasticmind.com/writing/"><em>4<span> articles in the chapter </span></em>Writing</a></li> </ul> <!-- ### Put this back in when the index page is done ### <ul class="more-options"> <li><a href="#">Table of contents</a></li> <li><a href="#">Subject Index</a></li> </ul> --> </div> <div class="module-right" id="bitesize"> <h2><span>Bite</span>Size.blog</h2> <script type="text/javascript" src="http://del.icio.us/feeds/js/plasticmind/bitesize-blog?count=7"></script> <noscript><a href="http://del.icio.us/plasticmind/bitesize-blog">BiteSize links courtesy del.icio.us.</a></noscript> <ul class="more-options"> <li><a href="http://del.icio.us/plasticmind/bitesize-blog">all bitesize.blog links</a></li> <li><a href="http://feeds.feedburner.com/plasticmind/bitesize-blog" class="feed-link">bitesize.blog feed</a></li> </ul> </div> </div> <div class="column2b"> <div class="module-right" id="popular"> <h2><span>Reader</span>Favorites</h2> <ul> <li><a href="http://blog.plasticmind.com/css/css-image-framing/">CSS Image Framing</a></li> <li><a href="http://blog.plasticmind.com/design/tools-of-the-web-design-trade/">Tools of the Web Design Trade, Pt.1: Where to Begin</a></li> <li><a href="http://blog.plasticmind.com/design/tools-of-the-web-design-trade-2/">Tools of the Web Design Trade, Pt.2: Building Trust</a></li> <li><a href="http://blog.plasticmind.com/design/creating-mockups-in-photoshop/">10 Tips For Creating Website Mockups In Photoshop</a></li> <li><a href="http://blog.plasticmind.com/movable-type/movable-type-fluid/">Movable Type As A Desktop App</a></li> <li><a href="http://blog.plasticmind.com/design/redesign-part-1-the-logo/">Redesign, Part 1: The Logo</a></li> <li><a href="http://blog.plasticmind.com/css/redesign-part-2-stylesheet-phi/">Redesign, Part 2: Stylesheet Philosophy</a></li> <li><a href="http://blog.plasticmind.com/social-networking/social-graph-defined/">The Social Graph in Plain Language</a></li> <li><a href="http://blog.plasticmind.com/blogging/writing-your-own-autobiography/">Writing Your Own Autobiography: The New Persistence of Information</a></li> <li><a href="http://blog.plasticmind.com/design/designing-ecomm-2008/">Designing eComm 2008</a></li> </ul> </div> </div> <br class="clear" /> </div> <form action="https://www.paypal.com/cgi-bin/webscr" method="post" name="donate" style="display:none;"> <input type="hidden" name="cmd" value="_s-xclick"> <input type="image" src="https://www.paypal.com/en_US/i/btn/btn_donate_SM.gif" border="0" name="submit" alt="PayPal - The safer, easier way to pay online!"> <img alt="" border="0" src="https://www.paypal.com/en_US/i/scr/pixel.gif" width="1" height="1"> <input type="hidden" name="encrypted" value="-----BEGIN PKCS7-----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-----END PKCS7----- "> </form> </div> <div id="footer"> <p>Copyright © 1999-2008 <a href="http://plasticmind.com">Jesse Gardner</a>.</p> </div> </div> <script src="http://www.google-analytics.com/urchin.js" type="text/javascript"> </script> <script type="text/javascript"> _uacct = "UA-1045764-12"; urchinTracker(); </script> </body> </html>