Seitenanfang

Converting a WordPress theme to MovableType

Dieser Post wurde aus meiner alten WordPress-Installation importiert. Sollte es Darstellungsprobleme, falsche Links oder fehlende Bilder geben, bitte einfach hier einen Kommentar hinterlassen. Danke.


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 to MovableTypeI suggest using seven screens:

  • 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
Computers with seven screens attached are very rare, so I used browser tabs spread over my two screens but ended up with some more tabs.

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:

  • comments.php
  • 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
  • sidebar.php
  • single.php for a single post
  • style.css
I started with a default Rainer theme on the MovableType side, but introduced some changes resulting in the following structure at blog level and nothing at website level (the names may not be exact matches for the English default files, because I re-translated them from my German theme back to English, apologies for this):
  • Index templates
    • Main index (index.html)
    • Feed-Atom (atom.xml)
    • Feed-RSS2 (feed.rss)
    • JavaScript (mt.js) for MT's default JavaScript
    • Stylesheet (wp-content/themes/redbel/styles.css)
  • Archive templates:
    • Entry for a single post
    • Entry by category
    • Page
  • Modules
    • 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
    • Sidebar
    • Summary for one single post within a list of posts
Here is a rough overview of the WordPress files and their MovableType targets:
WordPressMovableType
comments.phpAll comment modules
footer.phpModules > HTML-Body-Post
functions.php
header.phpModules > HTML-HeadModules > HEAD-Body-Pre
index.phpIndex > Main index
page.phpArchive > Page
search.php
sidebar.phpModules > Sidebar
single.phpArchive > Entry
style.cssIndex > Stylesheet

Preparation

The 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 steps

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

Sample

Here 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"$>

<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">

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.

The evil comment form

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

 

Noch keine Kommentare. Schreib was dazu

Schreib was dazu

Die folgenden HTML-Tags sind erlaubt:<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>