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. 
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. 
Tag 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.”
Or
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.
By
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.
To
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.
6 Comments