This blog is moving from WordPress to MovableType (at least, I'm working on it) but I don't want to miss my nice, red theme. There is no "RedBel" for MovableType, so I had to convert my WordPress Theme to a MovableType theme.
- WordPress admin backend
- WordPress blog page (preferable visited as not logged-in)
- WordPress blog page source
- 2x MovableType admin backend
- MovableType blog page
- MovableType tag reference
- Maybe number eight for a notepad, but you may also use some paper-based technology
You should have some experience with MovableType templates and know a bit about contexts, loops and conditions used there. There is no need to be an expert as long as you have the reference one click away. It's often better to search for some missing tag by clicking the category (Entry, Category, Comment, etc.) from the reference start page and hovering over the list of tags than using the search function.
My WordPress design RedBel is build of ten files:
- footer.php for the bottom part of all pages
- functions.php for some things I mostly ignored :)
- header.php for the header part of all pages
- index.php for listing posts (startpage, categories, posts-per-tag lists)
- page.php for static pages
- search.php for search results
- single.php for a single post
- Index templates
- Main index (index.html)
- Feed-Atom (atom.xml)
- Feed-RSS2 (feed.rss)
- Stylesheet (wp-content/themes/redbel/styles.css)
- Archive templates:
- Entry for a single post
- Entry by category
- HTML-Head for the common HTML <head> part
- HTML-Body-Pre for the end of the </head> and common body header
- HTML-Body-Post for the footer part of the body
- Commentdetails for one single comment
- Comments for a list of comments
- Commentform containing the form for submitting new comments
- Navigation for the menu
- Summary for one single post within a list of posts
|comments.php||All comment modules|
|footer.php||Modules > HTML-Body-Post|
|header.php||Modules > HTML-HeadModules > HEAD-Body-Pre|
|index.php||Index > Main index|
|page.php||Archive > Page|
|sidebar.php||Modules > Sidebar|
|single.php||Archive > Entry|
|style.css||Index > Stylesheet|
PreparationThe WordPress theme is stored in wp-content/themes/redbel/ and most supporting files also live there and in subdirectories. I started by copying the whole directory to the same place on the MovableType installation. I will clean it up and move everything to the MT theme directory below mt-static, but that's the very last step. This is also the reason, why I published the CSS into this directory: All files referenced by the CSS are relative the the directory where the CSS lives. Finally copy the style.css content into the MovableType Index template > Stylesheet.
First stepsThe first page the the way most complex item, because all common modules have to be created now. I used the WordPress theme editor to get the original header.php source, a MovableType editor showing the original Entry Archive template and switch to the included header files on demand. A source view of a rendered page is also necessary for some steps.
When copying templates parts from the original, you'll notice things like this
<html <?php language_attributes(); ?>>Use the rendered sourcecode to get an idea of what the WordPress functions do:
<html prefix="og: http://ogp.me/ns#" lang="de" itemscope itemtype="http://schema.org/WebPage">MovableType has:
<html xmlns="http://www.w3.org/1999/xhtml" id="sixapart-standard">You should merge both to get a good new result.
Walk through all files and convert each HTML block.
SampleHere is my final Entry by category Archive template:
The <html> and <head> part with some header tags are in HTML-Head, the </head>, <body> and upper common page part are in HTML-Body-Pre and the sidebar and footer go in HTML-Body-Post.
<$mt:Var name="entries_per_page" value="15"$><mt:SetVarBlock name="search_link"> <$mt:CGIPath$><$mt:SearchScript$>?IncludeBlogs=<$mt:BlogID$> &template_id=<$mt:BuildTemplateID$> &limit=<$mt:Var name="entries_per_page"$> &archive_type=<$mt:ArchiveType$> &category=<$mt:CategoryID$> &page=</mt:SetVarBlock><$mt:Var name="search_link" strip="" trim="1" encode_html="1" setvar="search_link"$>About one third of the template are dedicated to searching, this part has been copied from the original MovableType template. The HTML-head part contains only line specific to this page: The <title>, a page description (if available) and some (few) additional information.
<mt:Include module="HTML-Head"> <title><$mt:ArchiveTitle encode_html="1"$> - <$mt:BlogName encode_html="1"$></title> <mt:IfArchiveType type="Category"><mt:If tag="CategoryDescription"> <meta name="description" content="<$mt:CategoryDescription remove_html="1" encode_html="1"$>"> <meta property="og:description" content="<$mt:BlogDescription remove_html="1" encode_html="1"$>"> </mt:If></mt:IfArchiveType> <!-- Open Graph Protocol --> <meta property="og:type" content="article"> <meta property="og:locale" content="<$mt:BlogLanguage setvar="blog_lang"$><mt:If name="blog_lang" eq="ja">ja_JP<mt:else><$mt:Var name="blog_lang"$></mt:If>"> <meta property="og:title" content="<$mt:ArchiveTitle encode_html="1"$>"> <meta property="og:url" content="<$mt:ArchiveLink encode_html="1"$>"> <meta property="og:site_name" content="<$mt:BlogName encode_html="1"$>"><mt:Include module="HTML-Body-Pre"> <h1><mt:ArchiveTitle></h1> <div><mt:IfArchiveType type="Category"><mt:CategoryDescription></mt:IfArchiveType></div><mt:Entries limit="$entries_per_page" search_results="1"> <$mt:Include module="Summary"$></mt:Entries> <$mt:Include module="Paging"$><mt:Include module="HTML-Body-Post">
The evil comment formWordPress has been written mostly as a copy of the biggest and most famous blog-software on the Internet: MovableType. Today, things turned around and WP is used much more often than MT, but their comment things are still pretty much the same. But pretty much isn't exactly and there are some differences. You should take as much as possible from the MovableType comment form template, but always keep all id's, the input field names, the hidden fiels and the form's name.
As time goes by...It took me about 8 to 10 hours to convert my layout from WordPress to MovableType with 2 or 3 dedicated to the comment form.
MT has an option (within the tools menu) to download the whole theme as one zip file - you should really do that once you're finished.