Creating a Custom Wordpress Theme - Part One
People ask me all the time how I create custom Wordpress themes. The gist of what they are trying to figure out is the actual process in which I use to go from the theme in its origin to a fully functional theme. I’ll try to take it one step at a time, so instead of a very long post, detailing my entire procedure, I’ll do it as a series.
Since it’s pretty darn near impossible to write every piece of php and css from scratch, I started out my first theme using the default Wordpress theme and began to modify it. I did this because I knew functionally everything was stable.
I rewrote how the css appeared in the file, as well as how the php was laid out as well. Then I obliterated the style sheet so that my theme was no longer able to be compared to the original one.
Nowadays when I make themes, I will basically take an existing one of mine (which now I feel is totally my work) and then modify it. If you can believe it, the Blue Zinfandel theme is really my Vertigo theme, but heavily modified.
The first step in any theme design project is to envision what you want your theme to look like. Granted, not all of my themes end up exactly the way they were first drawn up, so I’ve had to be flexible with my refining nature.
For those of you who are interested in creating themes, my first piece of advice is to sit down, draw out a very basic layout of how you want to organize content, and then come up with a color scheme you think you may want to add into it. That’s the best place to start. Call it an architectural blueprint, from which you will build your first Wordpress theme!
Comments
40 Responses to “Creating a Custom Wordpress Theme - Part One”
Hey Randa, before you accuse me of stealing my own content (i.e. the comment I left on your blog the other day) I’ll fess up and say I took that to use in this post!
This is great, Brian. Exactly the type of article/series I’ve been hoping to see from you. Looking forward to the remainder.
Glad you liked it Chris, and yes, there will be more to come! By the way, I dig in ways I can’t describe what you’ve done to Blue Zinfandel!
Chris’ website just looks like a complete rip of Justin Shattuck’s [url:http://www.justinshattuck.com/] - I know you’re giving credit, but still, it’s a bit more than inspired. Even down to the details such as sidebar graphics on the list items, and the calender, heck, even the main navigation is the same colour. Get some imagination and stop stealing other people’s hard work and effort.
Well, Christopher, I’ve already been in touch with Justin and he’s quite well aware and flattered by the imitation. The site is a testing ground of sort, as I change and modify themes on a routine basis as I find inspiration. If you would take the time to look closely, you’d notice that all the graphics are, indeed, created by me. I do it to see “if I can do it”. I’ve made no attempt to pass this off as some sort of original. It is a learning and testing ground for me. I’m sorry if you’re offended, but it appears that it may not take much to accomplish that.
If I were passing off my site as some sort of springboard for a design company, I might see your issue, but because the site is read by about 9 people, I think you’re off base.
Brian, I thank you for the compliment. I’ve found Blue Zin to be a great template for developing themes and learning the ins and outs of WP development, because of the clean markup.
Time out. I appreciate what’s been said so far, but let’s just focus on what’s important. Keep in mind that the theme I had previous to this was very heavily influenced by Humble Voice. Getting permission and providing a link was much appreciated by Justin I’m sure in Chris’ case, as it was in Jonathan’s case with Humble Voice.
Even I find myself borderline “copying” concepts for two reasons. 1) I love them. 2) I might be experiencing designer’s cramp, and need something to work off of.
Having said that, one of the best ways to teach yourself how to design, is to use something as an example to see if you can replicate it. When you get to that point, it means you are capable of the technical aspect of design, and can then apply your own concepts to the basic knowledge you have.
My Vertigo theme was inspired by the design that Jeff Croft had on his site at the time. The sin in design isn’t being inspired by other people, or using their concepts (even if only for temporary periods of time), but blatantly taking someone’s work, and claiming it as their own.
Let’s shake hands, make up and learn some more design tips!!!
P.S. Chris… just checked out some pics on your site. WAAAAAAAAAAAAAAAAY adorable family!
Thanks, Brian. They are adorable, aren’t they? And thanks for the “time out”, I needed one.
It’s all good. My mother wrote a book on copyright, as well as started a copyright consulting business. I can understand Christopher questioning. It’s a hot topic around the net. Way too many thieves, not enough credit given. (not the case with you which has already been stated.)
Hi Brian,
Really looking forward to seeing the rest of these articles. One thing you didn’t cover was the whole ’sketching a layout’ stage. I’ve read about wireframe designs and read that people often sketch them on paper, or in Illustrator, Photoshop, Fireworks, or whatever. What do you do them in? I’m keen to develop my own ‘best practice’ in web design and would like to do things properly like the pros do.
Thanks,
Stephen
Stephen… welcome!
I sort of mentioned it:
“… my first piece of advice is to sit down, draw out a very basic layout of how you want to organize content…”
For me, I actually envision it in my head, because I have some experience, and can translate from my mind to the screen. Others might find that literally drawing it up on paper works for them.
Design is a matter of what people feel comfortable doing… their way. Thanks for dropping by Stephen!
Thanks Brian - been lurking for a bit and really like the re-branding by the way!
I seem to take weeks and weeks when re-designing my own websites so am keen to think more like a pro and develop a good workflow and efficien style of working.
I look forward to seeing the rest of this series anyway - are you going to talk about the stages in general, or be really kind and actually use this series to walk us all through a new theme release, from start to finish? Kind of like a ‘Big Brother’ for WordPress theme creator lovers!
Thanks,
Stephen
Thanks, the re-branding was sort of necessary when I got so busy and felt I needed a little more professional look. My website always take time, and they always change. It’s one of those about myself i wish I could change.
As for the series, it will probably only touch upon the processes I take when creating themes. It literally would take weeks (and very long posts) if I really went into grave detail.
Some great info man look forward to see what other tidbits you have to get to designing great WP themes.
Dave, thanks man - just don’t learn how to create themes or I might be out of a job!
Hi Brian,
Finally, a series on the nuts-and-bolts of wordpress theme design from a talented designer. Your opening suggestion — create your draft on paper — is a step I always seem to bypass and end up regretting.
I look forward to part II; maybe it’ll reduce the “hey, brian, how do I do this?” sort of e-mail from people such as myself.
Ed - Mr. Vertigo Blue… how’s the site coming along? I’ll be anxious to see the launch party! Yes, putting it down on paper (or in your head) is almost a must for design. I do say almost, because one or two themes of mine have been done on the fly. No preparation whatsoever. Just sat down and pumped them out…
I’ll generally either have an idea of what I want my site to look like. Then I go theme hunting and see if I can find one what I can alter easily,
or
I get fed up with what my site looks like and go browsing for something else. Then I come across a theme that I can see has potential within my limited capabilities and I try to work off it.
I’ve always liked the clean and bold look of CopyBlogger.com, so recently I tried to use aspects of its Brian’s design that I liked (big fonts, and bold colours) without completely copying it. I’m quite happy, but I’m a little like you Brian…I get fed up too easily!
Brian — I’m furiously dotting the i’s, loading in the content and adjusting ad space for the Monday launch.
Armen — I like the look of your site; I wonder if the two-column format is advertising-friendly. On the point of getting fed up too easily: I totally agree. Sometimes, I two-thirds the way through tweaking a design and I begin wondering what I first saw in the theme. I guess that’s why we have pro designers like you guys.
Ed, shoot me a note when you’re live! Yes Armen, I understand. I’m not even happy with the design I have here, but oh well, c’est la vie. Sometimes I wonder if I’ll ever be happy with my site?!?!
Thanks for the ecouragement Ed. If I was wanting to benefit from advertising fully on my blog, it would be better the have the sidebar on the left, as ads on the left have a far higher CTR.
“pro designers” - I really hope that wasn’t in any way directed at me…even if it was a joke. I’m not completely useless at design, but I almost am!
I don’t covet, but I wouldn’t say no to Brian’s ability.
Brian, this blog is beautiful. One thing I would change if it was mine though would be the use of Times New Roman font. It doesn’t seem to fit in with the slick look. It seems to work with Shawn Blanc’s blog, but I’m not too sure about it here.
Thanks Armen, for the honesty regarding the font. I agree that it wasn’t the right fit, and have since changed the headlines to Verdana, which IMO looks better and fit with the overall design now!
Thanks!
Armen — Anyone who knows anything about design is a pro in my eyes. I’ve lived in the content world, where design is some magic the art guys (and gals) use encantations to elicit “oohs” and “aahs” from readers.
Brian — I agree on the decision to change hed fonts; Verdana brings more authority to words — probably the reason I’m using Verdana on my site, too.
A design question: Which is better (ie, more ’sticky’ for readers, more enticing for advertisers, and more authority-providing for a news niche) — a header that has a dark background and colorful fonts or a colorful background and subtle (ie white) fonts?
My site is new, but it needs that instant-authority with readers. I don’t want to give the impression of a blog that presents news, but a news site presented in blog format.
And yes, I am considering design changes at the last hour.
Ed, depends on how big you intend the site to be - here’s a quick response. Study some of the most popular/heavily trafficked sites/blogs from Technorati, and see what the generality is for the header.
http://www.technorati.com/pop/
Brian, the site is intended to compete with the big boys. My own survey, along with your suggestion, shows muted header colors dominates. Also: while Adsense’s heatmap indicates the left-side the most popular region for advertising, the majority of sites give ad preference to the right. So, a tweak is in order to give a calmer header.
Brian - Much better. Glad I could help in a little way.
Ed - Stop leaving us hanging…let us see the site; it’s Monday over here now!
As for the ads, yeah commonly you’ll find them on the right, but I proved the heatmap to be correct in a test I did once. I was using a 3 column theme and had the same ad size on either side of the content. The left side had a much higher CTR.
Therefore the reason many go for the right is for the benefit of the users. Some think that a site is more ‘readable’ and user-friendly with the content on the left. Having said that, Darren Rowse doesn’t seem to drive away visitors with right-sided/central content
Brian- your content in the comments on my blog was really good, and I’m glad you were able to post it here so more people could see it. When you say you rewrote “how the PHP was laid out”, do you mean you rearranged the code so the sidebars would show up where you wanted them to, or did you actually change some code? I haven’t actually gotten into the PHP code yet- still in the layout phase, but I’m wondering if I’ll just be able to move sections of code around pretty easily, or whether it’s going to be more involved than that. I “read” code pretty well, and am not that interested in really learning PHP in any great depth.
(Hey - by the way, you need the Subscribe to Comments plugin so it’s easy to keep up to date on further discussion on a post)
I agree with Armen, Ed, reveal your URL so everyone can see!
Randa, as for the php coding, it was more rearranging how it appeared in each file, with the proper indentions, etc. One of the themes I started with (instead of the default one) was pretty sloppy, and being an organizational freak, I wanted it to look pretty.
Thanks for the suggestion about the subscribe to comments plugin. I see that my posts on design tips might generate more comments and discussion, so that was a great idea!
Okay, gang, here’s the URL: http://www.wiredconsumers.com.
Not all content has been loaded in, but the design is up. It needs a bit of tweaking (ie, the text I thought was white turned out to be gray. I’m using Windows Gimp.)
I used the vertigo blue logo box and the gray vertigo 2.0 banner. A nice combination, I think.
All comments welcome.
Ed
Ed - I’m so glad you’ve changed the theme. I definately think it’s more appropriate.
You may want to even try out Blu3zin3 Theme. I was going to do a laptop review site with that theme, but I just don’t have the time.
You can see what I did with it at http://www.laptopfinder.co.uk It’s very easy to ‘monetise’ as they say.
Armen - Yes, Blue Zinfadel better fits the site’s theme. I’ve replaced the blank header with a bluish keyboard. I have Blu3zin3 on my test site. The layout does offer some possibilities.
I agree - much better theme to use for your site. Obviously, if you need some help tweaking, fire away!
Brian - I certainly will. I’m currently using the Blue Zinfadel as the base, which is a better theme for a news site. As time permits, I’m tweaking the site’s appearance (first on a test site, then live) to differentiate WiredConsumers.com from every other blog. I’m trying to walk the fine line between a design focusing on original reporting and a theme which attracts sponsors. Outside comments are most welcome, since I realize it takes only seconds for opinions to be formed.
I’m so happy I found one of your themes, it’s perfect in every sense of the word for what I’m hoping to achieve.
I’ve been stressing, that is until tonight. This series of articles is exactly the help I’m looking for.
I look forward to more (I know there are two more :))
P.S the theme I downloaded was activate.
hi brian,
This is what i always wanna do i.e to design my own themes blog. Thank you for pointing out the direction so from now, i hope to create my own themes as well.
cheers,
toby
[...] visit the tutorial series over at wpdesigner.com or check out the tutorial from Brian Gardner (part 1 - part 2). For more information on widgets, visit this page over at Automattic. Nathan Rice is a [...]
Hi Brian
Wondering if the Blue Zinfandel theme is free to download. I am not starting a blog,
just discovered this wonderful design at “businessshakers.com and could be used for a website i am planning to put together.
FYI, I am a recent Christian myself and started to walk with Christ
God Bless you and your family
Feroz
I must be completely oblivious to life. At least to what has been occurring in the sphere lately. I just now noticed this article Brian. Apologies; I’ve been so busy lately I haven’t had much time to keep up with my feeds. I don’t even remember this whole conversation between Chris and I; I’m sure it took place but I am forgetful at times.
Who knows… I used one of Brian’s original themes for inspiration for a new project I am starting too.. hey Brian you mind? haha, forgot to ask!
Well guys and gals, hope all is well — goodnight