« Scheduled Postings and Cron Jobs | Main | CGIWrap and suEXEC »

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

Comments (22)

Pipes McGee [TypeKey Profile Page]:

I added the left sidebar using an include but now when I click on an arcive file (either by date, category, or individual) the bottom margins are all messed up. My index page has a consitent bottom margin but the others don't. Any ideas on how to fix this?

elise [TypeKey Profile Page]:

Pipes - if you are using a 3 column layout, try adding

<br clear="all" />

right above the last closing div tag on the archive templates.

glow:

does this still really work in 3.121?

i have been trying both methods for the past couple of hours to no luck.

if i use php, the category archive pages will each need different path to the sidebar code file, because some are sub-categories. and setting one path in the template won't work well.

so i tried the mt include method, which solves the path problem. but, when i am in a category archive page, the sidebar's category section is blank.

elise [TypeKey Profile Page]:

Hi Glow,
I'm using MT 3.12 and use this method for all of various weblogs, but I don't use subcats. I don't know why it would work however with subcats. In fact, I know other weblogs with subcats that use this method for their their sidebars. You might try asking over at the MT Support forums.

Did you check the tutorial on PHP and MT Includes?

glow:

yes, i have checked out that tutorial as well as many other tutorials of yours. your tutorials have been a great help! :)

here's the trouble with the php method. i include this line in the archive category template:

<? include("../../sidebar.inc");?>

.. because sidebar.inc is in /home while the built category archive file resides in /home/archives/category/. but when it comes to a sub-cat, the path won't work, because a sub-cat archive file resides in /home/archives/category/sub-cat/.

i will try the forums too. thanks again! :)

elise [TypeKey Profile Page]:

Glow -
I don't understand why you are having trouble. My categories archives for some of my blogs exist in different directories than the include file as well, but I have no problem. Why don't you post your question at the support forum and include a link to your site, and perhaps the code that you are using in your sidebar file. Make sure you use the code and link buttons so that the link and the code display properly in the forums.

elise [TypeKey Profile Page]:

Glow -
One more thought. Try using an absolute path in your include tag. Example:

<? include "/home/glow/public_html/mtdirectory/sidebar"; ?>

That may be what is tripping you up.

elise [TypeKey Profile Page]:

And another thing... I have found that saving my sidebar .inc files as Index templates rather than template modules works better. I forget what exactly the issue was, perhaps because my LMT sidebar relies on javascript, or perhaps because it was pulling in data from other template modules. Whatever the reason, it made the difference between the sidebar working or not working.

Big 'Un:

I'm having the exact same problem as Glow. When the sidebar is included on category archive templates, the category links in the sidebar get dropped. This problem does not occur on individual entry pages. So I'm guessing there is some conflict in the code that determines what category you are viewing and the code that lists the category links. Any other suggestions? I'd really love to solve this.

Big 'Un:

Hey- I think I figured out a way to get the sidebar to work on category archive pages. Simply replace MTSubcategories with MTTopLevelCategories at the start of your sidebar include code. I'm using an MTInclude as opposed to PHP.
MTTopLevelCategories is...
"A clone of MTSubCategories, but it always starts at the top level of the category hierarchy" according to the MT user guide.
Just tested it and I think it's working.

hrm:

hi Elise! i was wondering if the codes would apply also to adding a 2nd sidebar? such that the main entry is flanked by 2 sidebars?

thanks for the helpful tips!

elise [TypeKey Profile Page]:

Hi hrm,

What you are looking for is a "3 column layout". Look at the instructions in Simple Changes to the Default MT3 Styles.

Nate:

What if I want content on the left and then two sidebars on the right side? I've been messing with MT for a while now trying to make it work and it keeps adding the second bar at the bottom of the page.

Withnail [TypeKey Profile Page]:

I have a three-column layout through LivingDot.com and they've been great, but apparently seem unable to make it so that my sidebars "keep pace" with my center column of text. Do you have any idea how to achieve this?

Thanks!

Mark

Mush:

What are the tags for 2.6? There's no "center" div in the old version... it looks like "container" in the Individual Entry Archive should be changed to "content" and the second "blog" tag should become "blogbody"?

elise [TypeKey Profile Page]:

Hi Mush,
This tutorial is for MT3.x. To see how the tags correlate between MT2 and MT3, see Arvind's Converting MT2.x Styles to MT3 tutorial.

Can I use an include in an include?

IE:
File #1
[sidebar include]
some code & stuff
another include
[/sidebar include]

File #2
[another include]
more code & stuff
[/another include]

elise [TypeKey Profile Page]:

Hi Kirk
I have found that when I want to include an include into an include (wow that's a mouthful) I create a MT template module, include that into my PHP sidebar index file using an MT include, and then use a PHP include to pull in the sidebar index into the individual archive, category archive, monthly archive, and main index templates.

Chad:

I must have tried for 2 hours to get categories to appear on archives pages. That MTTopLevelCategory tag worked. It was amazing.

Thanks

Marcus:

Hi,

tutorial is very helful, but still one problem unsolved: When opening a category archive template, the category links in the sidebar get dropped.

Could someone help me?

I pasted the existing sidebar code into the correct place in the archive templates; not using the "includes method"...

Marcus

Marcus:

Hi,

found the correct and complete code snippet:

www.movabletype.org/support/index.php?act=ST&f=28&t=53486&hl=mtsubcatisfirst&s=4319493ca7bb50913e01bc56281aeb05

Now even in the individual archive templates the categories will be displayed and don't get dropped.

:-)

Marcus (

Thanks for the great Movable Type site, Elise!

I can attest that your answer about using an absolute path above fixed the problem for me. I had my php includes working fine on the main index and main archive, but they did not work on the category, date-based or individual entry template.

I made the center portion

div id="beta-inner"

and the left and right sidebars "alpha" and "gamma" respectively. For the left and right sidebars I had to change my statements for alpha.inc and gamma.inc from

php include("alpha.inc");

as I used in the main index and main archive pages,

to

php include("/var/www/vhosts/novatownhall.com/httpdocs/blog/alpha.inc");

This not only required using the absolute path I could see for myself (when I do an "pwd" command in my http directory in the bash shell I only see "/httpdocs") but finding out from my host what the TRUE absolute path was, which is the much longer path shown above.

This ended two days of struggling to make the pages work, so thank you!