I haven’t done one in a few weeks, but this morning I’m working up a custom WordPress theme for my software developer client’s site, which will be launching on Monday. It’s a small site with a clean little design, so this should be easy and quick. I’m still using WP Framework because it definitely fits the needs of this site, but I’ll be looking around at some of the other frameworks for sites coming up in October that need more widget areas right off the bat.
Oh, I almost forgot – I’ll be following along using my own WP Framework tutorial to make sure I didn’t miss anything.
Earlier this week due to a number of irritations with one particular project (it started off as a really bad week!), I decided to take the plunge and learn how to create a custom WordPress theme myself.
I’ve been integrating WordPress into other websites for quite a while so I did have some basic understanding of how it worked. I found this nice article in Smashing Magazine about WP theme development frameworks and read it all. I looked at a few of them and picked WP Framework because it looked like something I could handle, as a beginner.
A half hour into my workday Tuesday and I’d downloaded and installed WP Framework and made that my active theme. I found the actual migration of my HTML/CSS page elements into WP Framework was quite easy – the main issue was figuring out which of my elements needed to be renamed.
Basically with WP Framework, there’s a base.css file that contains a pretty minimal amount of CSS styling. There’s a screen.css file that’s blank and takes precedence over base.css – that’s where you can copy and paste your CSS styles from your HTML/CSS page. And then as I mentioned, you have to determine what styles of yours need to be renamed (or, which styles in the theme HTML need to be renamed). As long as you get all the styles in agreement, it works either way.
I had to create one additional template for the home page, which wasn’t the blog in this case. That gave me a little trouble because I hadn’t done that before, but when I figured out I just made a copy of the theme’s index.php file, made the changes I needed in the code and gave it a theme name in the commented section at the top, it began to make sense. I created a new header_custom.php file that would call a second stylesheet with adjustments for just that template, changed the header file call in my new version of index.php to that new header_custom.php. This did take a while to figure out but it does make sense to me now.
Then in the ‘home’ page’s editing window in WordPress I just selected this second template name for my page, and all was working fine.
It took me exactly 10 hours to build my first custom WordPress theme – there’s still a little CSS glitch at the bottom with the footer, but otherwise it’s done and I’m very happy with it.
I learned a really important and marketable new skill as a result of all the trouble I had with on this particular project – so it definitely turned out for the best.