Let’s create a WordPress theme

So, I’ve wanted to give this site a makeover for a while. It’s in pretty poor shape currently. The code sucks, it’s not responsive, the design is somewhat bland, and I’ve simply learned a lot since I did any sort of major overhaul. I have wanted to release a WordPress theme for a long time too, and I may as well release what I create for myself. I build themes for clients every day, and now I want to build one for me (and maybe you).

In this project, I’m going to design (as well as I can), code, and submit a WordPress theme to the official theme repository, and blog as many of the steps as I can. I didn’t get kickstarted for $90,000 to do this (not that I’d even back myself), so it’s likely definitely not going to have all the fantastical magic I’m sure Chris Coyier’s CSS-Tricks redesign will (which I’m excited to back!), but I do have some goals in mind:

  • Create a good-looking design fit for a blogger, but also have a place to showcase work
  • Design and develop a custom home page
  • Design and develop blog archive and singular post templates
  • Design and develop portfolio archive (via CPT) and single templates
  • Integrate post formats for (at least) links, images, galleries, video, and audio

I’m looking for some feedback on what you’d like me to share the most. I’m primarily interested from a code and workflow perspective, because I’m probably going to do most of the design in the browser, hopefully with some periodic input from some designer friends of mine :) (shhh, I haven’t told them yet).

I’m considering covering the following:

  • Concepting the site via sketches and/or wireframe
  • Font and color selection? Design considerations from a non-designer (exciting I know!)
  • Setting up the template hierarchy, and the general philosophy for what code goes in what templates
  • The post format integration
  • The custom post type integration (hint: this part will be a plugin)
  • How to organize custom functions
  • Integrating with the Hybrid Core framework (don’t less this part let you down if you aren’t a Hybrid user, it won’t be totally reliant on the framework, I’m just going to let it save me some time)
  • Making the theme responsive, and considerations for WordPress
  • Theme settings / customizer? (hopefully there won’t be many/any!)
  • Browser testing
  • Active plugin rundown for the site?
  • Post “launch” tweaks / review?

Would you like to see anything else? Does the coding environment matter to you? Do you want to see more writing on the topics, or mostly code progress? I’m considering adding audio with extra information about each post – would that be valuable? Would you like me to blog about the theme submission process (I probably will).

Some of the things I list above have been tutorialized really well elsewhere, and I fully intend to use resources available to me. However, I think it would be beneficial to blog what resources I’m using to build a certain feature, and maybe add some notes on my implementation (for instance, post formats and the theme customizer).

Maybe I can even get a few people in the community to review this with me as I go (I’m sure I’ll make mistakes, please call me out when I do). It may even be fun to record those conversations and post them as I go along. If you’re interested in that, hit me up.


I’m also thinking I’m going to do most of this live. As in, I’ll have a live URL as soon as the index.php and stylesheet are up and you can track the progress on that URL. I figure it will be best if I mirror the theme to a public Github repository so you always have a place to reference, and I’ll have a handy way to permalink progress. Sound like fun?

I’d love to get your thoughts and advice. This has pretty much been a brain dump.


I’m by no means the best developer in the world. I don’t want to do this because I think I’ll be able to fill anyone that reads it full of knowledge. I’m doing it because I need a redesign, and I think maybe we can learn together if I do it openly so anyone can watch and join in the party.


This isn’t going to take a week and a half. I fully expect to work on it a couple of times a week for the next couple of months. So, don’t expect it all at once, but definitely keep me accountable!


New theme sketches

Yesterday, while I was installing Mountain Lion, I had some free time off screen. I figured it was a perfect opportunity to sketch out some ideas for my theme project.

Since I said I’d share my brainstorming here, well, here you have it!

I want the theme to be blog focused, but on the homepage I’d like to have either a dedicated area or a larger than normal sidebar for more static information, like an “about” widget. You can also see a concept for the portfolio / services section to be visible on just about any page. The single post layout would definitely include a nice featured image, but a video or audio post format could also utilize that space. Also, the sidebar would be a little more subtle on interior pages, to make way for the content.

I’m struggling a bit with the portfolio. You can see in the image on the right, somehow my pen just started drawing a mega slider, and before I knew it, there was slider inside a slider! I’m going to have to modify that : ) Anyway, I’m getting some ideas on paper, and soon I’ll have something to show you with a URL attached.

Working copy of Happy theme on Github

So, I promised to be transparent. So I’ve uploaded version pre-pre-pre-alpha of the Happy theme to Github :) This theme is rough right now. I’ve been making changes to my former base theme. Taking things out, Enabling other things.

No templates for the general body are doing much. footer.php, header.php, home.php, and of course functions.php are where the meat of the structure exists currently.

I have bazillion planned changes, so don’t take this what the theme will be. I haven’t even uploaded this theme to a non-local URL yet. But you can at least browse it on Github. I’ll have that up asap on this url. PROMISE.

Like the name? I’m kind of addicted to it. PS the theme currently on that url is a Twitter Bootstrap theme I built, before deciding I wanted to do this instead of adopting all that comes with Bootstrap. But if you read this late enough, you won’t see that anymore, and will only see this theme. That’s confusing.

By the way, I’m writing this from the sky as I fly to San Francisco. Awesome. Computer dying. Bye.


edit: thanks for Tom McFarlin writing about my project, and linking here : )

I’ve actually updated the theme a lot since then, so check it out on Github. And sorry for the confusion in this post! Just check it out live on Happy Loops and let me know what you think. Patches welcome, and updates via blog and github will keep coming!


Mac and web based tools for WordPress theme development

It was a whopping month and a half ago that I announced my project to build a WordPress theme from scratch, and share the process as I go. You haven’t seen much since then (unless you follow me on Twitter), but I’ve been super busy working on what’s become the Happy theme. The picture above is my all-too-familiar evening view.

An unexpected consequence of sharing that I would basically live-blog my progress on developing Happy is that the development hasn’t been a strict, ordered process. Therefore, I’ve held off sharing things until I’m able to do so confidently knowing that I’m providing useful information to other theme developers. Consider this post a primer. I’ve got a slew of blog posts upcoming on how I’ve made decisions, processed them, what I’ve learned, etc.

Anyway, in this post, I want to share with you some of the tools I’m using while working on the Happy theme, and for my WordPress development in general. They’re not really WordPress specific, but I use them for my WordPress development.

I’ll list my tools of choice below, but definitely check out these posts on ThemeShaper by Ian Stewart and on WPTuts+ by Tom McFarlin that go into far more detail on WordPress-specific development tools. I use many of those they list, and I’ll likely do another post with a list similar to this, on my exact WordPress setup.

Web Dev tools – both web and Mac based

  • Machine – 2011 Macbook Pro, 16GB Ram, running Mountain Lion. I originally had the standard 4GB RAM and it was unusable when running tools a Web Developer needs. 16GB is now more than sufficient. SSD would be nice, but I’ll wait until my next machine. I’m usually hooked up to a 22″ external LED monitor (shown above), but sometimes I like to use the laptop by itself to see how things look on smaller screens.
  • Editor – Coda 2. Sublime Text 2 is enticing, but I’ve spent a year on Coda and am used to it. The PHP & Web toolkit is a must, as well as the WP Syntax plugin. The only major downside of Coda is that it doesn’t have autocomplete for all functions in a project (aka WordPress), but only those in the file you’re in. Hence the need for the WP Syntax plugin.
  • Local – Mamp Pro and Codekit. Codekit is a new addition and it is freaking amazing.
  • File Transfer – I usually use the one built in to Coda, but for large transfers I have Transmit.
  • Version control – Tower makes working with Git a breeze. Managing Github or Bitbucket repos is no problem at all.
  • Browser – Chrome and the built-in inspector. The Web Developer extension is also a nice addition.
  • Alfred – Alfred is great. I use the calculator for px to rem conversions constantly. I also love how easy it makes it to find files and programs. Here’s a great writeup on Alfred.
  • Photoshop – for basic image manipulation or quick sketches, or for breaking down comps if that’s what you start with.
  • Sequel Pro – for managing databases. It’s easy to use and fairly powerful. Packs all the punch I need at least.
  • IE testing – I use CoRD because we have it connected to Windows at work. I’ve used Browserstack before too, and it’s very nice. Completely worth the small investment for a professional developer.
  • Device testing – other than my desktop, my initial mobile tests are always with my iPhone. We also have an iPad at work I test on. And my non-Apple fanboy coworkers have a couple different Android model phones and a large Android tablet. I would love to have a small tablet like a Kindle Fire or Nexus 7 to test on, but unfortunately I don’t.

I know this post isn’t WordPress specific, and I promise I’ll get to those : ) But I hope this is valuable for perspective on future posts on the theme build series, and maybe you picked up on a tool or two you didn’t already know about.

Screenshot of the new design.

New design!

Welp, here it is. I’ve been talking about a new design of this blog for what seems like a year. It’s about time I actually ship something. So I did… all in one night.

It’s based off of the base theme I’ve been creating for many months, Happy. While I’m overall pretty pleased with the direction the Happy theme is going, I’ve delayed redesigning this site because I keep tinkering with the base theme. Well, forget that. It was beyond time to replace my previous, very outdated theme.


This color scheme is definitely outside of my very small comfort zone. But I’ve liked DarkSlateGray ever since I saw it on the 147 Colors website, and this color scheme is just a lighter version of that. So we’ll see how it stands the test of time.

For typography, the body font is Adobe’s Source Sans Pro. It’s the same font that ships with the Happy theme (though I may remove having any embedded font in that theme), and I’ve like it for a long time.

The headlines are Trocchi, which I didn’t discover until I saw Rafal Tomal’s Typespiration site. I’ve always liked slab fonts, but they feel too harsh sometimes, and this one seems just right with its little round bits. And I’m sure that summation tells any real typography dorks just how little I know about it. But when I saw the demo on Typespiration paired Trocchi with Source Sans Pro, I was sold.

I certainly look forward to any design feedback y’all may have. I’m not a designer. So this is me – out there – on a limb.

Oh, Content

I’ve added two new sections to the site: My work and My toolset. Neither is filled out yet (you don’t expect that in one night too, do you?), but I’m excited about both.

The section for work will obviously be a simple portfolio. A relatively boring but necessary thing for someone that advertises themselves as a consultant.

For the toolset section, I plan to host reviews, or something like that, for the development tools, plugins, and services that I use in my workflow. Hopefully it will be a good opportunity to share with people what I use to make websites, and also offer a way to monetize this space a little bit. So, when I mention one of my tools in a blog post, I can link to one of the items in the toolset, which will give a thorough description of the item, and a disclosed affiliate link. That way, affiliate links I use are honest, and people gain some insight about what I’m linking in my blog posts. Hopefully it’s a win, win.

The about section is also going to get a makeover. I at least put a picture on that page to try to be a bit more personal.

Plenty to do

In addition to lots of content review, I’ve got plenty else that still needs work around here.

For one, all my feature images were designed around a 580px max width. So I’ll need to go back my more popular articles to make them not look so bad with the new wider layout. I also need to give some love to single post styling, especially for image and heading margins, and list styles. They are all still the Happy base styles, which are intentionally light.

I also need to create a custom page template for the homepage. The sidebar is pointless on the homepage, and I want to feature feeds from my portfolio and toolset in some way. But I wanted to go ahead and get version 1 out of the way. And I’d rather fill out that content first anyway before putting it on the homepage.

I’m aiming to make December a big month for my personal projects, and this is step one. So keep an eye out, because I’m not done with announcements yet!