If you’re reading this, you’ve probably seen my site’s had a bit of a redesign.
Well, ‘a bit’ is putting it lightly: I coded a whole new site template from scratch over the last three days, building on the Skeleton framework that a lot of people seem to be using (from snooping around their sites with view-source, like the old days).
It’s been ages since I’ve done so much web coding — more than three years since my last redesign. I think I’ve kept things clean enough under the hood, and it resizes nicely on my smartphone.
The new look was pretty much a necessity seeing as I’ve finally migrated from Movable Type to WordPress. And boy has that been a learning curve. Not so much using the CMS itself; I’ve become familiar enough with that posting things on other sites. But getting my own stuff into the system was a challenge.
Installing WordPress was simple enough; my host Blacknight automates it via the control panel so it was only a matter of a few clicks, and a few more clicks to reinstall when I made a hames of it the first time.
Importing my exported entries from MT was easy and remarkably quick considering how many posts we’re talking about, though the results weren’t exactly what I wanted.
I started with my link blog first so I could bulk-edit them all as links using WordPress’ post formats feature. That was grand. The problem arose after I imported everything else: for whatever reason, the MT export file didn’t cleanly format the posts I’d written in Markdown, so the text for each entry popped up in WordPress as one big block. That means I’ll have to manually edit each and every one of them with the proper carriage returns. On the bright side, it’s only a few hours’ grinding. But it’s also a few hours’ grinding.
Next, I had to get to grips with theme building for WordPress. Being used to coding static HTML pages with MT’s user-friendly tagging system, it was a sea change having to deal not only with the notion of my design as an app, since that’s what WordPress ‘themes’ basically are, but also WP’s daunting PHP function calls. HTML’s nested-tags logic and PHP’s esoteric (to me) programmer logic are two very different things.
Step one was getting a design into shape. That I did with a single HTML file and a trio of stylesheets (the two files that constitute the Skeleton boilerplate, plus my own CSS overrides). I started on Saturday morning with a rough idea of what I wanted, slapping in all the page elements I thought I’d need and styling them accordingly, and was pretty much there 24 hours later.
Step two was figuring out how to turn that design into a WordPress theme. That meant discerning the logic of how WP templates are structured, which bits do what and what yokes call where.
Complicating things further was my requirement to have different styles for full posts like this and my links, for which I’d previously made liberal use of Movable Type’s extended entry box. WordPress at least interprets that as something, consolidating the data in a single box separated by a comment tag. But it took some doing, trawling the search results and the Codex, to find a way for WordPress to make sense of that for my purposes. CSS wouldn’t be enough; I had to edit ‘The Loop’ and build a separate include for link posts that puts the right text in the right place when you visit the web page.
It turns out I had to edit the Loop anyway, to tie in includes for displaying my main blog entries with metadata at the end on permalinked pages. And then I had to do something similar to roll my own archive index. The about page was a breeze by comparison: simply a matter of creating a new ‘Page’ within the CMS, posting text and editing the link.
Then it was time to move from local testing of the design to installing my theme in WordPress, and bug-testing the hell out of it. I made quite a few boo-boos, like missing out closing div tags and whatnot when I was separating out my draft structure into separate header and footer files, etcetera. Much more frustrating was thinking I’d edited WP’s PHP code to do what I wanted, not getting the results on the web, and doing my head in striving to find where my logic failed, or where I used the wrong template tag. A lot of trial and error, not helped by missing some obvious things, like forgetting to link to Google Fonts.
But I got there, and the results are here to behold.
The structure is just how I want it, for now; any fine-tuning in presentation can be done in the stylesheet. The biggest change from a technical standpoint is that everything is now served dynamically, so that even template changes via FTP have an immediate effect. That saved me a lot of time during bug-testing, believe me.
There are still a few things that are broken, mind you, those messed-up Markdown entries aside. The Twitter bot needs updating, if you were following it. Tags are gone, lost in the move between CMS platforms, but I hardly used them anyway, and I’ll jury-rig something for those few tags that did come in handy.
And all previous permalinks are busted, since my two separate MT blogs are merged in WP and everything’s moved to the domain root. Thanks to John Kelly and the helpful souls on AskMeFi for their mod_rewrite suggestions but I couldn’t get anything to work editing the htaccess file via FTP (and the last time I tried via a WP plugin, I broke everything and needed Blacknight to throw me a lifeline). WordPress truncated my longer links so a rewrite rule wouldn’t help in those cases, anyway. Everything is still here if you really need it, though: find the archive for the relevant month and year and you’ll be sorted in a few clicks and scrolls.
(Update 18 Feb 2017: Older links should now work again, thanks to this URL redirect suggestion on AskMeFi. Phew!)
There is a new RSS feed for your reader of choice. Unfortunately, my WordPress install has more or less knocked me out of Movable Type so I can’t send a message through the old feed. I trust you got here by being curious enough to wonder what I’ve got up to, and will adjust your settings accordingly.
That’s about it. The hard work is done, but consider this a soft launch regardless. Like Andy Baio says about his own site, it’s a work in progress.