« The New Themes - Making Sense of It All | Main | Creating a 3-Column Layout in MT3.2 »

Adding a Sidebar to the Default Archive Templates

mtbadge-small.gif

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

layout-two-column-right.gif

Where do 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:

<body>
<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>
               </div>
            </div>
         </div>
    </div>
</div>
</body>

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

<body>
<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>
</div>

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

    Sidebar Content

</div>
</div>


</div>
</div>
</div>
</div>
</body>

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.

Comments (10)

Peter Lorenz:

Thank you for this exellent tutorial.
One question:
To use the new template I have to
link this template to a file.

There is no explanation in this tutorial to where to link.

Can you tell?
Thanks
Peter

I've read that MTEntries tags shouldn't be used in the Individual Archive.

http://www.sixapart.com/movabletype/forums/index.php?showtopic=45210&st=16

armin Lahiji:

ok so I did a boo boo configuring the sidebar for the archiving. Then i refreshed it to go the back up settings, and I noticed it chande the index file from index.htm to index.htm.static I had to go manually in with ftp and rename them. The index file im refering to is the index file in the category archive folder, since it is the one I tried to configure.

Any idea how this happened?

a

Hi Armin - I have no idea; you may want to check over at the forums.

Thanks for the tuorial and the templates. The template for datad based archiving is throwing an extra " /> oustide the container for the page.

I have linked it here: http://www.wpsands.com/mt/2006/03/

Know where in the template I can fix this?

All the best

wpsands - you might want to run that page through the W3C Validator to check where you might have an extra tag or missing one.

Ryan:

wpsands: I found an extra > in the 9th line of code, right after index.xml

Jeff Noble:

Hey Everyone,

I found the error on the date based template

Copy the date based code, paste into the editor and then go to this line (It's the 9th line of code, I believe)

index.xml"$>" />

Now change the line into the following

index.xml" />

That will fix it!!!

Thanks Jeff, I made the corrections to the template. No idea how that one got in there. Thanks for finding it.

Christopher Oldfield:

Thank you so much. I spent so many hours to make my posting templates two column - and then I found your site!!!

Chrisotpher

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