Converting HTML to WordPress Themes

I continued to work on the minimal theme a bit last night after the post. I decided to experiment with web fonts, and found a serif font that is quite a bit nicer to my eyes than Times New Roman – Merriweather by Eben Sorkin. So the template now looks like this. I’ve got it to the point now where I’m happy with the way it looks. It looks good on mobile devices too.

Next up is converting this sucker to WordPress. I helped my girlfriend do the same thing a few months ago, but it’s been a while so I needed to dig up the resources again. I remember we used this tutorial last time, so I’m just using it again.

First thing to do was setup PHP on my local machine. I build most projects with Ruby or JavaScript, so I never really need to touch PHP. It comes with the version of Apache already installed on the Mac, but it wasn’t working quite right, and I have no time to mess around. I’m not here to fight with PHP all day, I have a theme to create. So I downloaded MAMP, followed the instructions for installing WordPress and I was up and running right away.

Next I exported all the content from my existing site. On the local version, I installed and ran the importer plugin, and bam, all of my content was loaded. WordPress is great in that so much of this infrastructure is already built. So far, this is easy.

Now it’s on to creating the theme “structure”. First step is about the structure of the main HTML file itself. Not much to do there. I already have an HTML file the way I want it. Moving to the next step, theme template and directory structure. I’m starting as minimal as possible, and the static template is already built, so I just have one HTML file, some CSS, and Twitter Bootstrap assets. I just copied index.html to index.php, and moved on from there tweaking it.

It’s nearly good enough to go live, but it still needs some tweaks. In the meantime, thanks to being hacked, I may just move to a static site generator. EDIT: It’s live!

Comments are closed.