« How to Fix a Common MT4 Feed Formatting Error | Main | Create a Contact Form using MT4 »

Working with Movable Type 4.0 Templates: Sidebar

This tutorial is cross posted on my personal blog On a path.

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.pngThe 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.

Comments (16)

Toni:

Thanks Michelle, I found this tutorial very informative. I've installed the Google code, but instead placed it inside one of the divs, giving it a bit of formatting. My blog uses a three column layout, so it wasn't hard to swap content from the beta and gamma sidebars to give it a different look, making the different widgets show up on all pages.

So I have been waiting over a month to find out how to edit my sidebar! I am surprised that MT didn't provide better documentation on how to manipulate the new template modules. Thanks to you, I finally was able to add my own content to the sidebar - a blogroll and some personal links... THANKS!!

Please help me get one thing straight: is editing the header to an image as simple as replacing the header name and description with an image? And it must be done in the MTIf="main_index" AND the if I want it to appear on all pages?

I'm not sure I understand your question. You want a section header that's currently text to be replaced with an image header? Or are you wanting to replace the text name and description with an image (like where on the tutorial blog where it says Tutorials and then let's decipher MT4's templates)? If the latter is the case you'll need to edit the Header template module. And yes you'll need to edit it in all the instances of if statements where you want it to appear. Or as we discussed in the tutorial you can get rid of all the if statements if you want the image header to appear on every single page independent of which template was used to create the page.

Andy:

Hi Michelle. With previous version of MT I worked the different sections of my blog without a sidebar. With the modular approach of MT4 i cannot manipulate and formating the body contents of each sections, since the alpha divs are in the header module.
How to set up a section of my blog only mantaining the banner and footer divs, and completely re-formating the body section?

Thanks!!!!

Michelle, thanks for the awesome tutorial.

It helped me to remove the Tag Cloud and add a Links section to my own site.

Do all of the templates have to be edited within MT itself. I tried editing the .mtml file directly on my PC then uploading it to my site. For some reason, it would not work until I edited it directly in MT.

However, I just this moment realized that I never loaded the template to view its contents in the Design menu of MT. Maybe this was the problem.

Anyway, thanks again.

Thanks for all the info. I am using MT 3.17 but I just installed a MT 4 version. I see that lots of things are different now.
Yesterday I spent some time trying to insert my Adsense ads but I just couldn´t do it.
Now I see that it is possible and not that hard.

Thank you again,

Claudia

You're very welcome Claudia. You can totally get your AdSense stuff in there. It might take a little time but I'm confident you'll get it.

Mac:

Thanks for the tutorial! One question: is there a way to set the if/then on the entry level? For example, let's say I have an entry titled "Classroom Resources" and I want the sidebar to show related links that are *only* applicable to this specific entry. I know I could code the whole thing into the Entry body, but I'd prefer to keep the related links for each entry in a separate sidebar. Is something like this possible, or can if/then only work on the template level?

Thanks again!

Hi Mac -

You can use the mt:If anywhere at all. The only issue you might run into in a sidebar when using it this way is that it could get rather complex if you're using it for multiple entries.

But to illustrate, let's say you want to show something in the sidebar for entry #1. You would just do something like this:

<mt:SetVarBlock name="entry_id"><mt:EntryId></mt:SetVarBlock>

This gets the variable entry_id set with the current entry id. Simple enough, right? Then all you need to do is check it, in this example to see if it's 1:

<mt:If name="entry_id" eq="1">
  <!-- do something -->
</mt:If>

Where it would get complicated is if you want to do something different for every entry. The check would rapidly become cumbersome, requiring an "mt:If" for each entry (or a lot of "else" statements, equally difficult).

Depending on what you are doing, you might be better off using includes or styles that just include the entry id. Something like this would include a document with the entry's id as the name (you may want to include a check for existence, as well as a path):

<?php include '<mt:GetVar name="entry_id">.txt'; ?>

(In fact, you don't even need to use GetVar there - you could just go straight to the entry id.)

A style would work similarly, but just in the style name, rather than in any include.

Mac:

Chad -- Thank you very much! This is exactly what I was looking for.

And I agree re: the difficulty of using this solution for a big site. Fortunately, this is a relatively small and static site, so adding MTif calls won't be too egregious.

Thanks again. I really appreciate it.

-- mac

Hi
Im using mt 4.1 now and it got upgraded from previous version whatever template i had in old version i been now as the template file but think now the mt4.1 templates are like too much organised and im not sure how to get the new templates in fro my blog , can you help me with this i installed the import template plugin and i have the default templates now , not sure some cases it give 500 error for example the category archive which i have in the main index template i have to make that value 0 in order to build it without error , do you think its becasue there are too many categories its taking time to do it .

Ryan:

Thanks for this very easy to follow tutorial. I did what you instructed above, but the "Tag Cloud" is still there and my weather sticker is not showing. When I go back to the module, everything remains as I changed. What could I be doing wrong?

Did you rebuild everything completely? I know it sounds simple but sometimes it's the simple things that do it.

It was just too complicated to understand. So, started messing around again and I think I have sussed an easier way.

Create your own widget. Put everything and anything in there that you want on your sidebar.

Go into Design>Widget Sets
Click on the "Edit Widget Sets" (right hand side of screen)
Click on "Create Widget Template"
Name your template e.g. 'Claire's Widgets' and insert some text for test purposes
Save
Go back to Design>Widget Sets
Click on 2-column-layout-sidebar (or whatever your layout is)
Here you will see two colums. Your widget template should be listed in the right column
Simply drag and drop widget templates what you want and do not want on your blog sidebar!
Publish and see the changes.

This way, you are not messing around with code, and you have your own widget file which you can update, amend and put anything you like in there anytime you like including html, links to other sites/blogs, images...)

To insert an image just go to Create>Upload File

Here's my blog to show you, but it's not finished mind!

www.homecleaningforum.com

Hope this helps

Cheers,

Claire

fran:

For some reason my blog doesn't change after following your instructinos to the letter and publishing all files. Tag Cloud is still there. Made the same edits to the 3-column and 2-column sidebars, published all files, no change.

Hi, Thanks for taking the time to write up this tutorial, it sure helps me understand how movable Type works, however I have to agree with Claire wouldn't be easier to just create your own widget and do it that way? it seems a lot less complicated.

Post a comment

(If you haven't left a comment here before, your comment may need to be approved before will appear on the entry. Thanks for waiting.)