You recently decided hosted blogging is for the birds. You want more control over your blog’s setup. In fact, you want total control over every last detail of your layout, functionality and design. So what do you do? Where do you turn?
One popular option is the Movable Type publishing system from Six Apart (other popular options include Drupal, Joomla!, and WordPress). Movable Type contains pretty much everything you need to get your own site up and running, plus the flexibility to get really obsessive over the details. Also, with a little creativity and some community-created plugins, you can power much more than just a reverse-chronological list of blog posts.
This tutorial won’t go into the Movable Type installation process in-depth since there are many resources online already. What we’ll cover is the process of dressing up a vanilla Movable Type installation by customizing the look and feel of your new site. We’ll also get you started with some custom features by installing some plugins.
Which Version to Use
Movable Type is essentially a collection of Perl scripts that make it easy to create and publish blog entries. Luckily, you don’t need to know any Perl as most of the programming aspects are hidden from the casual user.
Movable type will run on just about any server, the only requirements are a database and the ability to run CGI scripts.
There are currently two separate distributions of Movable Type, the commercial version (still free for individual users) and the open source version. Deciding which one to use depends what you need and what you’re willing to pay for. The personal version of the commercial software can be used so long as your blog is not for-profit. Google AdSense, Amazon Associates fees, PayPal tip jars or other similar programs which aren’t the main purpose of the site are permitted under the Personal license. The commercial versions run from $300 – $1000 depending on the number of users your installation needs.
The open source version of Movable Type is free, and of course you’re free to tinker with the source code and can apply patches, hacks and other improvements the community comes up with.
Getting Up and Running
Assuming you’ve selected a web host that meets the Movable Type requirements (pretty much anywhere that offers a MySQL database will work) you’re ready to install Movable Type.
Installation isn’t a terribly difficult process. Essentially, you’re going to download the MT package, unzip it and then upload it to your server. Then it’s just a matter of configuring a few settings, like telling MT where to find your database and how to connect.
The nitty-gritty instructions on how to install MT are widely available on the web, so we won’t rehash them here. Check out the official guide first. Also worth a mention is the MT installation guide over at SuperMX.com which walks you through all the necessary steps and includes screenshots.
Once you’ve got everything working properly, it’s time to set up your blog.
Log in to Movable Type through your new admin screen. In the main menu select “Create New Blog.” Give your blog a name, set up the necessary paths to your media files (like stylesheets or images), set up the URLs (or go with the example http://www.yoursite.com/blog/) and select a time zone.
Save your changes. If you surf to the URL you entered, you should see a rather basic looking page with very little content. Congratulations, you’ve got a Movable Type-powered blog.
Add a little content so you have something to see while we customize the look in feel in the next section. Go ahead and create some new posts and save them. Just click the “Write Entry” button in the main menu, or choose Create > Entry in the main menu. This will display the Create Entry screen where you can enter your first blog post.
Customizing Your Site’s Appearance
The stock Movable Type look isn’t going to impress your visitors. Luckily, it isn’t hard to customize your Movable Type site. But before we start doing that let’s step back and take a look at how Movable Type works.
How Movable Type Works
In order to get MT behaving the way you want it’s important to understand how it works. Movable Type has two main components, the backend administration interface where you can manage your blogs, post new entries, moderate comments and more, and the front-facing public website.
For the most part, Movable Type publishes static HTML files. When you post an entry, Movable Type adds the entry to the database and then uses a template to create the HTML file that your visitors will see. It also updates any other pages that are affected by the changes. For instance, if you have a sidebar that shows recent entries, MT will update the sidebar whenever you publish something new.
This process is known as static publishing. That is, the page your visitors see is a static file sitting on your server rather than a page being generated on the fly — other blogging systems, such as WordPress, operate that way. Actually, Movable Type does offer some dynamic template features, but for this introduction, we’ll stick to the static publishing.
- Built a dynamic MT site? Show us how! Click “Create an Article” above.
The key elements here, from a user point of view, are the templates. By default, Movable Type gives you some basic templates that control how your generated pages will look. To customize the look and feel of your site, you’ll want to dive into the templates.
The Movable Type Template Language
Movable Type templates have their own language that looks at times like HTML and, at times, more like PHP. The basic idea is that you have a bunch of variables from the MT backend that you can use to plug content into your pages.
As with most programming languages, you can create if/else statements, for loops and other tools to display the content you want, where you want it.
The template language is actually quite robust — some might say complex. So, to give you an idea of how it works we’ll dive in with a quick example.
This chunk of code is similar to what you might use to generate a list of recent entries in your sidebar:
<h2>Recent Entries</h2> <ul> <MTEntries lastn="5"> <li><$MTEntryTitle$> <br /> <$MTEntryEntryExcerpt$></li> </MTEntries>
The key to this is the
<MTEntries> tag, which is known as a container tag.
<MTEntries> essentially creates a loop of recently published entries. The
lastn parameter tells Movable Type how many entries to grab, in this case five.
Then we move inside the <MTEntries> container and we have access to all the Entries tags. For a complete list of tags related to entries, see the Movable Type manual. For this simple case I’ve used
<$MTEntryTitle$> to print out the title and
<$MTEntryEntryExcerpt$> to give a short summary. The
<$MTEntryEntryExcerpt$> tag will automatically create an Excerpt if your entry doesn’t have one.
Let’s look at another useful container tag, the
MTEntryCategories tag. Here’s a little snippet of code:
<p>category: <MTIfNonEmpty tag="MTEntryCategory"><MTEntryCategories glue=", "> <a href="<$MTCategoryArchiveLink$>"><$MTCategoryLabel$></a> </MTEntryCategories> <MTElse>none</MTElse> </MTIfNonEmpty></p>
So what does that mess do? Well, the goal is to display all the categories you’ve assigned to a post. So the first thing we do is check to see if the post actually has any categories. The easiest way to do that is with the
MTIfNonEmpty tag. This tag takes another tag as a parameter, in this case the
MTEntryCategory tag, and checks to see if the value exists.
If in fact our post has one or more categories assigned to it, then we proceed to the
MTEntryCategories container tag. This tag sets up a loop that moves through all the categories assigned to an entry.
Once inside the categories loop, we print out a link to the category archive page and the name of the category. That way, any visitor to the site who likes your article about bananas can quickly find all of your articles in the banana category.
The other thing to note in this loop is that just about any MT tag that uses an IF statement can include an Else tag to print out something when the if fails. In this case, if there is no category assigned to a post it will just print “none.”
Whew. What a mouthful of tags. And we’ve barely even scratched the surface.
For more in depth info on MT template tags read through the template tag documentation. For those who’d like a somewhat easier to navigate list of tags, check out MTTags.com, which offers a very nice interface for navigating through and quickly finding definitions of the myriad of available template tags.
If you’ve used older version of Movable Type, check out the overview of new template tag features in MT 4.+, including the very powerful new ability to assign multiple values to an attribute.
So where do you put your template code? Well, MT includes the ability to edit your templates right in the admin interface. Just select Design > Templates from Movable Type’s main menu. This will display the Blog Templates screen.
To edit one of your index templates, just click on the template name to open the Edit Template screen. Once you’re here the sky’s the limit, you can customize the layout and look of you site to fit whatever your heart desires.
This screen is also home to the Includes and Widgets that have been referenced in the template you are editing. For example, by default the Main Index template references a Header, Entry Summary and Footer modules. This allows you to quickly edit and make site-wide changes to say your header template. Whenever you find yourself wanting to include a chunk of code in multiple templates, break that code out to an Includes template so that when you want to change it again you only need to do so in one spot.
Widgets and Plugins
The whole point of using a publishing tool like Movable Type is to take advantage of the many cool tools users have developed — that’s where plugins come in handy.
Movable Type has been around for some time, and third party developers have built a small ecosystem of plugin and widgets to enhance your MT blog.
For a fairly complete list of what’s available check out the Movable Type plugin directory.
Here are a few of our favorites:
- Bookmarks – Adds a “Bookmarks” menu to Movable Type 4.0′s menu system, allowing quick access to your favorite and most frequently accessed pages within the application.
- FCKeditor – Swaps out the default Movable Type Rich Text Editor for the more feature-rich FCKeditor (requires MT 4.1)
- Flickr Photos – Pulls your most recent photos on Flickr into your Movable Type blog.
- Dashboard Twitter – See your friends’ timeline and post your Twitter status update from within the MT4 dashboard.
- Action Streams – Aggregate, control, and share your actions around the web as well as a list of your profiles on various services.
- Gravatar – Add some personality to your comments by including thumbnail images. Uses Gravatar’s global recognized avatar system to output the correct gravatar image URL based on the commenters e-mail address.
So how do you install plugins? It depends on the plugin — the functionality of the plugin determines how much there is to install. In the simplest case, you just drag the plugin to your plugins folder in the Movable Type folder you installed at the beginning of this tutorial.
More complex plugins may require some additional files to be placed in other folders. In some cases, a line or two of code needs to be added to the
mt-config file. Fortunately, most plugins listed in the official repository have reasonably clear instructions.
Though we’ve really just scratched the surface of what you can do with Movable Type, hopefully this will get you up and running. For additional tutorials and help solving common problems, be sure to sign up for the Movable Type forum and wiki where you’ll find like-minded people who can help you out with any bumps you encounter on the way to Movable Type Nirvana.