warning: very nerdy post.
So out of pure interest, I decided it would be a cool (term used loosely) idea to try my hand at creating my very own WordPress template. The one you see here, minimalist as it is, was created by someone else, and I kind of wanted to know the nuts and bolts of it.
Over the weekend, I googled "how to create a wordpress template" and I spent a couple hours following (and not really following, ie., not understanding) this tutorial. (nerdsidenote: I noticed the jolt in fonts when I opened it which suggests the fonts used are custom fonts embedded. but after a quick glance I didn't see any @font-face code in the CSS or reference to an EOT file. wonder how the custom fonts came about? maybe i don't know as much as i thought about styling...)
Anyway. It was awesome. Not only did I install WordPress on my own without a utility like Fantastico into a separate folder on a personal FTP server I own, and import some sample data, but I now know what each line of code in each function and template page on that test wordpress site does. Everything I built came from firing up notepad, and building each page according to the explanations and instructions of the tutorials.
I could never get through a how-to book on PHP (still trying), but I now know how PHP functions are defined and called through trial and error, where before I only knew how to use "include" and vaguely understood the concepts of manipulating and calling MySQL functions. Yes, the majority of the tutorial was copying and pasting code, and I didn't write any new code; it was just great to go through it and understand. And add the pieces bit by bit and see it working, and occasionally troubleshoot where it didn't work. Some of the tutorial was a bit unclear I have to say, and it made me feel extra smart to go in and make some minor mods on my own that made sense, and see the problem fixed.
It was also neat to see something I assembled interact so well with the WordPress software itself. I could install plugins into my own template, and I actually understood what parts of the code changed and even the custom PHP commands that were enabled. All the programmers out there are probably scoffing, but it was just exciting for me to see a widely used open-source software playing so nicely with templates that I put together in notepad.
While I still don't understand the innerworkings of WordPress functionality itself, at least I understand how the templates work. And I saved a fresh copy of my own handiwork before I dove into the CSS and started really doing the visual magic. I figure if I master this, get familiar with the necessary plugins that will make my site look even more amazing (why reinvent the wheel, right? I don't need to create plugins... yet), I'll be a WordPress template genius!
Until then, here's what I got so far:
I know. It's beautiful.
But probably only to me. I played around with the CSS and everything on this page is how I expect it to look, which is what matters for now. The sample data is so cute, isn't it?
So that's my achievement for the weekend. Now, the next step is to come up with a design. I do all my designing in Photoshop, then code it after it's done. It took me awhile to figure this process out, and a lot of it was from working at DailyStrength with the designer and seeing how she put together everything in Photoshop and I would code it up. I used to try to visualize AND code at the same time, and it never really gave great results. This way, each part of the process has its own focus without having to be muddled up with the other. In Photoshop, I can focus on just making things pretty. When I code, I focus on just making sure everything works. Each is challenging in their own way, and as I'm learning, I can feel myself getting better at it. Cool feeling.