Learning Movable Type: Adding a Sidebar - MT3.1 and Earlier


This tutorial is out of date. ~Elise March 5, 2007

The default Movable Type MT3 templates come with a sidebar on the right side of the Main Index page, but not on any of the individual entry, monthly, or category archive pages.

There are two basic ways to add a sidebar to archive pages. The easiest for beginners is just to copy and paste the existing sidebar code into the correct place in the archive templates. The slightly more involved, but much preferable method is to create a separate file with the sidebar code and use a PHP include or an MT include to include the file into the various templates. You can also very easily move a sidebar from the right to the left side of your weblog pages.

Where is the Sidebar Code? MT3.1 and earlier versions

In MT version 3.1 and earlier versions, you can find your sidebar code in your weblog's Main Index template in the Templates section of your Movable Type edit window. It is all of the code that includes and comes between the <div id="right">, <div class="sidebar">, and their respective closing div tags.

<div id="right">

<div class="sidebar">

All of your sidebar code including code for calendar, search, categories, archives, and recent entries.

</div>
</div>

Where do I put the sidebar code in the archive templates? MT3.1 and earlier versions

If you look at the default Main Index template you will notice that there is a <div id="center"> and a <div class="content">, after which comes your MTEntries information. The sidebar code comes after the closing div tags - </div> for those center and content sections.

The archive templates, because they don't have a sidebar by default, also don't have a center section distinguished. You need to make that first, before you can add the sidebar code. To do that, below the banner code and right above the tag <div class="content">, put the tag, <div id="center"> so that the section looks like this:

<div id="container">

<div id="banner">
<h1><a href="<$MTBlogURL$>" accesskey="1"><$MTBlogName encode_html="1"$></a></h1>
<h2><$MTBlogDescription$></h2>
</div>

<div id="center">
<div class="content">
<MTEntries>

At the end of the closing MTEntries tag, add a closing div tag for your new center section like this:

</MTEntries>

</div>
</div>

</div>

Now you are ready to add the sidebar code. Your sidebar section goes after the two closing div tags for the center id and content class divs, and before the last closing div tag for the container div, like so:

</MTEntries>

</div>
</div>

<div id="right">
<div class="sidebar">

All of your sidebar code including code for calendar, search, categories, archives, and recent entries.

</div>
</div>

</div>

Do this for every archive template on which you want a sidebar to be displayed.

Using Includes for your Sidebar

If you follow the above directions, they will work, but you will notice that every time you want to change something in your sidebar, you have to change it for each of the templates in which you have placed the sidebar code. A much easier way to manage this is by using an include for your sidebar file. Then instead of the sidebar code, you place the include code on your templates. This code calls up the sidebar information from your sidebar file. So if you make a change to your sidebar, you only have to make the change on one file. For directions on how to use includes, see the LMT tutorial Using PHP and MT Includes.

Moving a sidebar from the right to the left side.

The default MT templates have the sidebar on the right side of the page. To move the sidebar to the left hand side you don't have to change the stylesheet. The changes can made to the Main Index template and any other archive template that has a sidebar. In the Main Index template, find the sidebar code section:

<div id="right"> <div class="sidebar">

Your sidebar code

</div>
</div>

If your sidebar is currently on the right side of the page, the sidebar code will be found below the center id and content class closing div tags. Cut and paste this code from below these closing div tags to right above the beginning center id and content class div tags like so:

<div id="right"> <div class="sidebar">

Your sidebar code

</div>
</div>

<div id="center">
<div class="content">

Repeat for your archive templates that have sidebars. Save and rebuild your templates.

Links:
Want to add a left sidebar to create a three column layout? See the LMT tutorial Simple Changes to the Default MT3 Styles


Posted by Elise Bauer on September 27, 2004 11:15 PM to Learning Movable Type http://www.learningmovabletype.com/