New Theme: Part 3; Building the Framework.

My first step is to remove the style.css content leaving the theme registration.

Theme Name: mrtwebdesign
Theme URI:
Author: Matthew Taylor
Author URI:
Description: My own theme.. for me.
Version: 1.0
License: GNU General Public License
License URI: license.txt

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.

 mrtwebdesign is based on Underscores, (C) 2012-2013 Automattic, Inc.

Not very exciting. But I’ll be using this file for CSS overrides if needed. I’ll generally just try to customize the Foundation files in place.

New theme: Part 2, The nuts and bolts.

I need a solid start to my theme. I’ve tried starting with twentyten, twentyeleven and twentytwelve. Not a bad place to start.. but I want to make sure I get away from the styled elements of those themes. I could start with a premium framework.. but I want something really lean and flexible. I am happy to add my own custom functions as I need them. So the starting point I selected is a starter theme: underscores.  or.. ‘_S’ by Automattic.  Yup.. by the same people that are behind WordPress. You won’t find Underscores in the theme archive.. it’s not a complete theme. Just the beginning of one.

For my CSS reset I’m ripping out the one used in Underscores and using Normalize.css that comes with Foundation.

I’m using Foundation for responsive layout. I’ve been using Twitter Bootstrap. What first caught my eye about Foundation was the extra control I have over the layout for narrower displays.  I was ready to try something new.. but this was a great chance to learn it outside of a client project.

Here is a list of my current tools:

  • Underscores by Automattic
  • Foundation by Zurb
  • Sass – css pre-processor(handled by Codekit)
  • Codekit – for.. a bunch of stuff! can’t live without it.
  • Sublimetext 2 – code editing(Solarized – dark color scheme)
  • Xampp – local server for developement
  • Tower – version control
  • Transmit – FTP
  • Browserstack for device testing

Next post: Part 3; Building the Framework.

planing to plan

To make a theme.. any theme I start with a starting point. Not from complete scratch. I used to start with the current default theme that came with WordPress and create a child-theme. More recently I’m much happier to use a starter theme. This is a codebase for a theme designer to start with. Not something you can use as an actual theme. It has very little CSS or structure. If you activate it, you don’t get errors. You get all the text and links from WordPress you would expect, just all dribbling down the left side of your page, one text after another. No layout at all.. and very basic text formatting.

My current starter theme of choice is Underscores. Or ‘_s’. It’s made by the fine folks behind WordPress, Automattic. That way you know it’s up to the best practices coding standards recommending for theme design.

Next up is the layout framework. This is a shortcut that helps you lay out the page features with gutters, column widths all calculated for you. There is usually a CSS reset involved. That creates a redundancy conflict with the CSS reset that comes with the theme.. I’ll have to manage that. A recent favorite of mine is Twitter Bootstrap. It makes use of jQuery and has lot’s of cool javascript plugins available that can help you quickly add a slider or accordion group.  There are all kinds of css selectors you can use to help with buttons and alerts and so-on. I try to use Bootstrap for just it’s layout functionality. I keep my theme CSS enqueued *after* Bootstrap to ensure I can over-ride any styling I don’t like. I want the site to be very functional.. but not ‘look’ like just another Bootstrap site. I can recognize Bootstrap elements in other websites and I’m sure others do as well.

Next on the list is Javascript libraries. Like many web designers, I’m self-taught. I actually started web design back in 1997. It’s been like skipping a stone overs a pond. I kept being repelled by web design because of how difficult is was to make anything look and behave the way I wanted without resorting to flash. I think I was using Flash when it was 2.0.  Even back then I didn’t think it was a great solution.. it was just the only one I could find. Now Flash is one it’s way out and we can do just about anything fancy with HTML5, CSS3 and Javascript. We still have to pay attention to older browsers though. At the time of this writing it looks like we can now discard IE7 as a concern. At least I can for my website.  A few years ago the water seemed better for swimming so I jumped in, mixing metaphors in my wake. HTML5 and CSS3 were the first things I learned along with PHP. After that, Javascript. I don’t know javascript, but we’ve had lunch on occasion. I primarily use jQuery and jQuery plugins. I can build stuff in javascript, I have rarely had to create anything from scratch, and getting conflicting jQuery plugins to work together is a great way to start learning javascript.

For javascript libraries.. I’m looking at starting with the following:

  • jQuery(1.10.x, not ready to drop IE 8 users just yet)
  • Bootstrap(just the plugins I find myself using)
  • Foundation 4.2 with jQuery 1.10.x (not Zepto or jQuery 2.0)
  • modernizer.js

Now there are lots of other web technologies out there I know how to use that I’m not including. There are also some that I know about, but I’m just not making things that would make use of that yet. Node.js is a good example of that. I’m doing interesting things on the front-end with javascript, but my themes are only starting to take on application capabilities. Server-side javascript isn’t something I need yet.

New design plans for

One of the hardest things to do as a custom theme developer is make a theme for yourself. From the outside it might not seem like such an issue, but it’s like trying to give yourself a haircut. Or maybe a better example would be a kid in a candy store.. with one dollar. Sure.. I know what I want and there are many frameworks and javascript libraries that would help me build in awesome features.. but I only have one website. I want a clean understandable website. I can’t include everything! It’s not a matter of technical ability. It’s a matter of having to choose when there is so much to choose from. It’s just hard to be your own client.

I’ve been doing freelance web design for over two years now and I’ve been getting all the work I want through freelancing website. That’s fine. But I feel like I’m established enough now to start promoting myself and getting work directly with clients looking for the kind of services I provide. That means I need to bite the bullet and take the time to design my own theme.  I’ve been careful thus far to use a blank theme. Twentytwelve in fact. An unmodified Twentytwelve at that! If I had any sort of fancy theme.. it would be someone else’s work and design. I can’t have that! So it’s always been a very safe ‘nothing’ sort of theme. Time for that to come to an end.

I’ve been coming up with some ideas and directions to go with a theme design and how I would present it. I’ve decided to make it sort-of sideways. Instead of building a complete them and just using it. I decided I would make it a ‘Live’ redesign.  I’m going to blog about the design as I make it.  It will give clients an idea of how I think, along with the thought, effort and philosophy that goes in to designing a website. It may also help fellow web designers with a few of the issues that I’ve had to work through to get things done.

In my next post I will start making some of the more technical decisions that I need to make so I have a solid base of code to start my custom theme on.