Working with Movable Type 4.0 Templates: Sidebar
October 17, 2007 | | Comments (0)

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.

Share this post:
digg del.icio.us reddit Newsvine Google Bookmark FaceBook Stumble Upon

Leave a comment