Oct 03

Working with Movable Type 4.0 Templates: Sidebar

The new templates and template structure in Movable Type 4 streamline and simplify the process of making site wide changes to your blog. Well that’s what they do once you actually understand the templates and template structure. But understanding how the templates work together and digesting the tag soup that swims in each of those templates? Not exactly simple. So at the suggestion of a friend I thought I’d create a series of basic tutorials that help explain the templates and template structure. The tutorials will begin at a relatively basic entry level.

Instead of just breaking down templates line by line I thought it would be easier and more practical to look at templates in the context of actually doing something. You don’t really need to understand every single line of code if you know where and how to make the changes to accomplish what you want. For this first tutorial we’ll be making changes to the sidebar. Specifically we’re going to remove a widget we don’t want and add Google AdSense ads in the sidebar, after the archive content, on every page of a blog.

Before we get to actually editing any templates I can’t recommend highly enough that you download and install the Template Shelf plugin. If you’re going to spend any time at all editing your templates this plugin will make your life much easier. For this tutorial we’re only going to be editing one template. But it’s not unlikely that you’ll be needing to hop back and forth between multiple templates and modules in the future and this plugin makes that much, much simpler.

I’ve set up a brand new blog to serve as an example of the work done in this tutorial. I selected the minimalist light blue style and a two column (wide-thin) layout from Stylecatcher in Movable Type. Since we’ve got a two column layout the template we’re going to be modifying is the Sidebar - 2 Column Layout. This template is actually a template module. What’s a module? The best analogy I can think of is that a template module is like a backpack. You’ve got a whole bunch of stuff (all the code for the sidebar) you need to get somewhere (in the sidebar of all the pages on your blog) and it’s much easier to put all of that stuff in a backpack (a template module) and then unpack it when you get to where you’re going.

So instead of having to put all your sidebar code into every template (main index, individual archive pages, monthly archives, etc) you just reference the particular module that contains the code like so <$MTInclude module="Sidebar - 2 Column Layout"$>.

Out of the gate this is what the sidebar looks like.
beforeedits.png
The first thing I want to do, is remove the text that says “Tag Cloud.” Tag clouds can be fun but I’m not using tags on the tutorial example blog so there is no reason to have it there.

To remove the Tag Cloud we need to find the following section of code in the Sidebar - 2 Column Layout template module (line 169 if you’ve got syntax highlighting turned on):
<MTIf name="main_index">
        <div class="widget-cloud widget">
            <h3 class="widget-header">Tag Cloud</h3>
            <div class="widget-content">
                <ul class="widget-list">
    <MTTags limit="20" sort_by="rank">
                    <li class="rank-<$MTTagRank max="10"$> widget-list-item"><a href="<$MTTagSearchLink$>"><$MTTagName$></a></li>
    </MTTags>
                </ul>
            </div>
        </div>
</MTIf>

Let’s look some of the important code in this section before we remove it.

<MTIf name="main_index"> and </MTIf> Everything that falls between these two template tags is governed by a rule that basically says “if a template is the main index template then this information will be displayed on that template’s published page. If a template is not the main index template then this information will not be displayed on that template’s published page(s).” In other words “the information within these tags is only going to be displayed on the main index page and not any of the archive pages.”

Wrap your head around the if/then idea here. It’s going to be really important later.

<div class="widget-cloud widget"> and </div> The first tag in this pair says “we’re dealing with the tag cloud widget here.” Th second tag (which comes just before </MTif> if you’re confused) says “we’re done dealing with the tag cloud widget now.”

Combine those four tags together with all the code included between them and you’ve got a Tag Cloud that appears on your blog’s main index page and nowhere else.

I don’t want a Tag Cloud to appear on the main page or anywhere else so I’m totally deleting all of this code. If you think you might want to implement the tag cloud later on you can just comment out this section instead.
posttagcloud.pngTag Cloud gone we can now move on to adding the code for AdSense into the sidebar. To do this next step you’ll have of course needed to setup an AdSense account and grabbed the code they give you to put ads on your site. It will look something like this

<script type="text/javascript">
<!--
google_ad_client = "pub-################";
google_ad_width = 120;
google_ad_height = 600;
google_ad_format = "120x600_as";
google_ad_type = "text";
google_ad_channel = "";
google_color_border = "FFFFFF";
google_color_bg = "FFFFFF";
google_color_link = "000000";
google_color_text = "000000";
google_color_url = "333333";
google_ui_features = "rc:10";
//-->
</script>
<script type="text/javascript"
  src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>

I want the ads to appear, on every page of my tutorial blog, after the monthly archives list and before “Subscribe to this blog’s feed.”

On or about line 242 (depending on whether you deleted or commented out the Tag Cloud code) you should find the code block that begins <div class="widget-syndicate widget">. Like the previous code in this format this is saying “hey we’re dealing with the syndicate widget now.”

Since we want our ads to be directly about the syndication widget (the syndication widget is where the phrase “Subscribe to this blog’s feed” is coming from) we want to paste in the code Google gave of us here. 

Voila! Now you’ve got ads on all the pages of your blog in the sidebar between the list of monthly archives and “Subscribe to this blog’s feed.”
ads1.pngOr do you? You’ve got the ads on every page sure enough. Those ads always appear above “Subscribe to this blog’s feed” just like we want but on some pages, say an individual archive page for example, there is no list of monthly archives. And this is where things get a wee bit tricky.

ads3.pngBy default Movable Type thinks you probably want slightly different content in the sidebars of each of the main sections of your blog. For example on your main page it thinks you want a search box, a list of recent entries, a list of categories, a list of monthly archives, the syndication widget and finally the powered by Movable Type graphic. On your individual archive pages it thinks you want a search box, meta data about the individual entry, a link to to the main index page, a link to the main archive page, the syndication widget and finally the powered by Movable Type graphic. All the other sections (monthly archives, main archives, etc) have, by default, some variation of either of these two versions of sidebar content.

Remember how I said if/then was going to be important later? Later is now.

Movable Type is right, I want the search box at the top of the sidebar on every page of my blog so I’m not going to touch the search box code at all. Search box related code takes up the first 40 lines of the Sidebar - 2 Column Layout template so let’s skip to line 41.

Line 41 is <MTIf name="module_about_context">. Just like when we saw MTIf before this is signifying the beginning of an if/then statement. This particular if/then statement is saying “the following content is a module called about context. If a template calls for the module called “about context” then display the following information. Simple enough right? Wrong.

Wrong because the about context module has several other if/then statements wrapped up in it and some if/then/else statements as well.

An example:
<h3 class="widget-header">
<MTIf name="entry_template">
About this Entry
<MTElse>
<MTIf name="archive_template">
About this Archive
</MTIf>
</MTIf>
<MTIf name="archive_index">
About Archives
</MTIf>
</h3>

The English translation: if a page is built from the entry template then display “About this Entry” if the page is built from the archive template then display “About this Archive” and if the page is built from the archive index template then display “About Archives.” In this case “About this Entry”, “About this Archive” and “About Archives” are all headers for the section that immediately follow the search box in the sidebars of pages built from the templates. On individual entry pages the section is called “About this Entry” and so on.

As my high school band director liked to ask “is that clear as mud?” That part actually should be relatively easy to follow. It’s the next section, starting at line 55 and going all the way through 116 that is a bit more complex. This section contains another round of if/then/else statements that determines what content to display in the about section the sidebar depending on which template was used to build a page.

But for our current project I don’t want to change the “About” section content that Movable Type is creating by default. I want the about info MT is spitting out by default for the various pages to stay the same. All I’m concerned about right now is getting the Monthly Archives list to appear on every page so I can have my ads between the Monthly Archive list and “Subscribe to this blog’s feed.” There are two steps to making the monthly archive list appear on every page.

The first step is to address the if statement that line 188 contains. It says
<MTIf name="module_monthly_archives">. From past experience we know this is saying “if a template calls for the module called monthly archives then display this information.” By understanding that I know I’ve got two ways for making the monthly archives list appear on every page, an easy way and a hard way. The hard way is to go through every single index template and add in a call for the monthly archive modules. The easy way is to remove the if statement. Meaning, there’s no if about it, I want this content on every single page so I’m removing <MTIf name="module_monthly_archives"> and the accompanying </MTIf> (line 205) from the template. Now the content that was surrounded by those two lines will now appear everywhere, not just on pages calling for the monthly archives module. 

On Correspondence Notes I wanted the right sidebar content to just contain AdSense ads and not the about content Movable Type puts there by default. Since I wanted this on every page, like we wanted our monthly archive list on the tutorial blog,  I put this technique of removing if statements to work there as well. With all the if statements removed the code gets really simple. So mentally bookmark the idea of removing if statements when you don’t need to change the content depending on which template a page is built from.

As an example here is what the code for the right sidebar of Correspondence Notes it looks like this:
<div class="widget-welcome widget">
<h3 class="widget-header">
Welcome
</h3>
<div class="widget-content">
Correspondence Notes is about communication.
<p>end tips, suggestions or perhaps just a greeting to <a href="mailto:info@correspondencenotes.com">info@correspondencenotes.com</a>
</div>
</div>

The second part of getting our Monthly Archives list in order is editing the header. If you leave the code as is (line 193: <h3 class="widget-header"><$MTArchiveLabel$> <a href="<$MTBlogURL$>archives.html">Archives</a></h3>) your monthly archive list will be right in most places but not on your individual entry pages. Instead of saying “Monthly Archives” and then listing your monthly archives it will say “Entry Archives” and then list your monthly archives. Everywhere else will look just peachy but to make the individual entry pages come inline we need to replace <$MTArchiveLabel$> with the actual word “Monthly. ” So the new line 193 should look like this: 

<h3 class="widget-header">Monthly <a href="<$MTBlogURL$>archives.html">Archives</a></h3>

Whoo. That wasn’t too bad was it? It’s a shame we aren’t quite done yet. Take a look at the screenshot below from category archive page. It’s got the Monthly Archives list alright but then it’s got the listing of the monthly entries for the particular category we’re currently looking at. Who needs that? Not us. Looking at the code directly beneath the monthly archives list in the template (starting with line 206) we can see that Movable Type thinks we might want to list not only a category’s monthly archives but also monthly archives by author. Again I say who needs that? And again I answer myself with not us.
categoryarchive.pngTo get rid of these unwanted archive lists I’m cutting out everything in the template that falls between the end of the monthly archive listing code block and the beginning of my Google AdSense code. Again, you can comment these out if you think you might want to use them later. I never will so they’re getting cut.

Now we’re done. For real. Go ahead, look around all the pages of the tutorials blog. AdSense ads on every page between the Monthly Archive listing and the syndication widget and not a Tag Cloud to be found. Feel free to download the edited version of the Sidebar - 2 Column Layout template from this tutorial. Remember that I deleted whole sections of code instead of commenting them out.

If you’re new to Movable Type templates and template tags editing them may still seem a bit overwhelming but give it time and some practice, you’ll get the hang of it. Hopefully this tutorial will help clear some things up and make things a bit easier on you. I hope to write more of these project based tutorials. To that end I’m asking for requests/taking suggestions on what projects to write tutorials for next. PHP includes? Adding Flickr badges? CSS modifications? Etc. Please leave a comment or write me at the address in this page’s footer.

Naturally if I've made any mistakes or if you have additional questions please let me know.

Categories

,
| | Comments (6)

6 Comments

Cecily Author Profile Page said:

You are awesome. Thank you for explaining things in plain language.

Michelle Author Profile Page said:

You're very welcome. I hope you and others will find it helpful.

Mark Thomas said:

Off the wall question: You’re clearly a bright, articulate, and generous person (thanks for posting this tutorial!), and MT is clearly one big bowl of “tag soup” (putting it charitably). What is it about MT that attracts you when you could easily migrate to Wordpress, lose the sea of soup, and simplify your world?

I ask because I’m designing a blog for a friend who must use MT and I’m discovering that MT’s architecture is the virtual equivalent of an ecological disaster zone and for the life of me I cannot understand why any intelligent person would take the time to learn this application when life would be so much easier on Wordpress.

Okay, I vented. But if you have an answer, it is a serious inquiry.

Thanks again for the tutorial.

Michelle Author Profile Page said:

I've been using Movable Type since before the first version of WordPress was even released. I've had to work with WordPress on a few projects and I absolutely hate it. The way WordPress works is not the way I, or my brain works. So I'm curious how you think I'd be simplifying my life by using WordPress.

MT has gone through a couple major overhauls and it looks and works decidedly different than it did all those years ago. That said the newest version, 4.2 is much simpler in terms of architecture and design templates than the 4.0 release was. I'm not sure which version of MT you're working with or what you're trying to do so I can't say for certain if MT is right for you.

However since you asked, here are some reasons I continue to happily use Movable Type:

1. I have run multiple blogs for many years and MT handles all those blogs in one installation flawelessly. Updating one or the other, sharing information between them, sharing users, etc is simple as can be. When WP came out multiple blogs was impossible without multiple installations. I don't know if that's still the case or not but since WP has never offered me a compelling reason to switchI don't need to know.

2. The admin ui is fantastically simple and direct.

3. I don't worry much about MT security because if some bug or hack comes out I trust SixApart is going to be on top of it and get an update out posthaste.

4. If I have an issue with MT SixApart support is there and they've got my back.

5. For me static pages is where it's at.

6. I know how to work with the templates, I know how to create my own templates from scratch, I know, by heart, the major and important tags in the MT system. I don't need to learn anything else.

I won't begrudge anyone's choice of tools but I'll say for me the MT experience is just more polished and fluid than the WP experience. I know that depeneding on your needs WP has some serious advantages over MT but the reverse can also be said. So, for my workflow, my style, my needs MT is far superior. If WP works for you though then more power to you.

tiffany said:

WordPress has -- WordPress Multi User. I have never used it, but it allows you to create multiple blogs from one install. I hear it's a bear to manage though.

I use WP for some of the same reasons you choose MT. It just makes sense to me. Of course, it helps that I know PHP reasonably well.

I've used WP since version 1.2, and I've seen them -- and, as importantly, the community -- make plenty of improvements to both the UI and to security. To me, it just makes sense, although running multiple blogs requires the multi-user version.

I also hear good things about Serendipity (http://s9y.org/), which is on my list of tools to investigate. It has one of the best security records of any blogging package available, but I think it runs from a DB, not static pages.

Mark Thomas said:

Michelle,

Thanks so much for the answer.

I’m on MT 4.2 and it’s my first time with MT. I learned Wordpress three years ago and it took me a couple of hours to learn its nuts and bolts. It took me a weekend to grasp fully the loop and since then I’ve built some hummer sites in no time at all.

So this last month I’ve invested tons of time in MT and I come away with two distinct impressions. First, its developers hijacked Wordpress’ loop system (it may be the other way around, in which case Wordpress’ developers simplified MT’s loop) and, second, MT’s loop appears layered — levels on levels of extraneous code — to unnecessarily complicate the loop. (I just read a tutorial for MT that made the strangest recommendation — instead of amending the style sheet to reflect the changes you want, she suggested writing a new style sheet with the desired changes in it and plugging it in as an addendum to the style sheet so that it would override the original style sheet. This is preposterous! Why wouldn’t she address the subject of amending the original style sheet? She’s just piling more code on code.)

Wordpress’ security issues are a legitimate beef. I recall times when they had updates almost daily. But MT’s support comes with a price and its community list is a vacuum. Do a search on “CSS”; the results may surprise you. In fact, go to the MT website (http://www.movabletype.com) and do a search on ANY word — even the word “blog.” You’ll discover that their search engine is busted and you will get NO results. Talk about bad PR. With WP, however, I never had a bug that I could not resolve with a two-minute search. To be sure, I posted two inquiries on the MT list and one brave soul hazarded an answer but he was just throwing darts blindfolded. The problem remains. I saw several others post similar/identical queries after I posted mine and the same brave soul described the error as generic, without a specific resolution.

Michelle, I seriously congratulate you for mastering MT’s templates and for being able to build one from scratch. I admire you and wish I had your brains. For now, however, I’m scratching my head at what should be basic procedures (do you sense my frustration?) and in the words of George Clooney to his fellow convicts, “I’m searchin’ for answers.”

But you are correct. It all boils down to personal experience and comfort. Thanks again for the tutorial and for letting me vent!

Leave a comment