Learning Movable Type: Adding a Sidebar to the Default Archive Templates


The default Movable Type MT3.2 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?

The MT3.2 stylesheets and templates are designed to have the columns laid out in order, starting with the column named "alpha". The columns, in order are alpha, beta, gamma (if you have a 3-column layout), and delta (a hypothetical fourth column that one could create). In the page produced by the default MT3.2 Main Index template, the sidebar is on the right and is in a column named "beta" in the template. The sidebar code is the section that begins with <div ID="beta"> and ends with its closing tag on the Main Index Template. (A text file of the default beta section can be downloaded here.)


Where to I put the sidebar code in the archive templates?

The MT3.2 main layout divs in the default archive templates are laid out like so:

Main Blog Content

You are going to want to put the sidebar "beta" code after the closing div tag for the <div id="alpha"> like so:

<div id="container">
<div id="container-inner" class="pkg">
<div id="pagebody">
<div id="pagebody-inner" class="pkg">
<div id="alpha">
<div id="alpha-inner" class="pkg">

    Main Blog Content


<div id="beta">
<div id="beta-inner" class="pkg">

    Sidebar Content



Note that these instructions are for the default layout of having a sidebar on the right.

The other change you must make is to change the body tag near the beginning of the archive template from <body class="layout-one-column"> to <body class="layout-two-column-right">.

Save your template. Rebuild your archive files to see the change reflected in them.

For convenience, here are some of the default MT3.2 archive templates, with the right sidebar already in the proper place:

The Refresh Template Action

Copying and pasting sections within your templates can easily fubar your pages. It is so easy to miss a closing div tag! A useful tool, new in MT 3.2, is the Refresh Template(s) action. With a click of the mouse you can restore selected templates to their system defaults, while at the same time making a backup of the most recently saved version of your template. To use, in the Templates edit window select the template that you wish to restore to the default. Underneath where it says, "Create New Index Template", select the menu, "More actions" and scroll to "Refresh Template(s). Click on the "Go" button. The template will be restored to the system default and a back-up copy of your most recently saved template will be created.

Click on image for larger view.

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.

Big thanks to Arvind of Movalog for his detailed explanations to me of how the new stylesheet and templates work.

Posted by Elise Bauer on September 4, 2005 12:40 PM to Learning Movable Type http://www.learningmovabletype.com/