Charity is the author of Design Adaptations and is a freelance graphic and web designer in Wyoming, USA. Recently Charity launched her own premium WordPress theme, Cornerstone, and I invited her to share what she learned while taking on this monumental project (she has also released several other free themes). I was eager to read her article, because, if you’ve been following Creative Curio for a while, you know that I am in the process of designing an exclusive theme for this blog (though it’s been on hold for a month or so…)
by Charity Ondriezek
Over the past year, WordPress has proved itself a powerful utility not only for blogging, but for rapid website development and templating. Designers are getting wise and jumping on board with the concept of using WP as a full CMS. As a result, the premium theme market is growing by leaps and there’s no shortage of selection when it comes to finding a quality theme anymore. But what if you want to create your own rather than buy one to customize? What if your aim is to enter the marketplace too?
Where do you begin? How do you know what to include or what to leave out? What pitfalls should you be aware of? Many WP newbies have some difficulty answering these questions because theming is a relatively new frontier.
When I start on a new theme, it’s usually in the form of a sketch. If you could flip through my Moleskine (I recommend the grid version), you’d see a lot of layouts. Some have taken on life and some have long since been shelved or abandoned. Once I’ve got a sketch I like, I crack open a template I’ve already created sepecifically for the purpose of designing new themes. For newcomers who haven’t yet developed their own, you can start with a stripped down layout. Many times I’ll even browse for a CC or GPL theme somewhere which resembles the structure of my sketch. You might also consider the Sandbox theme. Although I haven’t used it myself (I was personally a little overwhelmed by the code and I guess that’s why I haven’t played with it yet), some swear by it as a great resource.
Just to be clear, I am NOT advocating that you rip someone’s work. There are many free themes out there from which to build upon, especially if you’re short on inspiration. No sense reinventing the wheel. If you’re planning on selling your theme however, it’s best to contact the original author for permission.
Keep in mind there’s often a downside to starting with someone else’s framework… the code may not be up to your standards, may be hard to sift through, or may be rife with errors. This is definitely something to be conscious of, because bad code only leads to more work for you in the long run! It’s a good idea to inspect the contents of the theme as a whole. Here are a few things to look for before you fall in love with using one for your foundation:
- Does it validate? If the theme in question has a demo feature, USE IT! See if the markup validates. Scope out the CSS. Is it properly indented and/or commented, or is it a jumble that looks more like hieroglyphics? Spending a few minutes on preliminary research before you even download the files can spare you from a migraine later when you begin modding them.
- Are there a billion CSS files? Some gurus get “trigger happy” with the CSS, and create separate style sheets to control different aspects of their design. One for layout, one for colors, one for print, etc. WordPress only requires one CSS file, and that’s really all you need to create a beautifully functional theme. Don’t make things harder on yourself than necessary!
- How does the functions.php file rate? If you open this file and your eyes immediately widen in shock at what you see… pick another theme. For general purposes, it serves to power the widgets in a “widget-ready” theme, but some authors offer additional features using this file. That’s great, but if the code below is a little frightening to you (it is to me!), it’s best to keep shopping.
Now I know what to look for in choosing a base theme, but how do I go about designing it?
Well, what are you creating the theme for? Is it for your own site/blog? Is it for a photoblog or gallery? Is it for one client or a broad spectrum of consumers? Answering that will help you narrow your design focus, and determine what to include in the theme. If you’re building it for consumers in general, sky’s the limit. Magazine style layouts are extremely trendy right now, and there are all sorts of plugins and layout tricks you can weave in to make your theme unique. (Just don’t forget attribution if you use any third party plugins or scripts to enhance your theme!)
There also seems to be a resurgence of the grunge look. (I’ve been playing around with one myself in fact). The classic grid-based/minimalist designs are still holding their own too. Take a look at Thad Allender’s work. His layouts are a great example of how less is more.
Aside from putting your own design spin on things, probably the best way to add appeal to your theme is to give buyers/clients some control over how it looks or functions. The Theme Toolkit is a good choice for doing just that, and it’s easy to implement.
Last but not least, flexibility is always a consideration (or should be). This rings true whether you’re building a theme for a single client or the masses. If it can’t be customized, it’s pretty much useless. People add curbside appeal to their homes because no one wants their house to look exactly like the one next door. Why should a website be any different? More often than not, people buy a theme with the intention of customizing it to fit their style or purpose.
In building your masterpiece, try to keep that in the front of your mind. The more versatile and intuitive your theme is, the better. That doesn’t necessarily mean feature-rich. Again, some of the best themes I’ve seen are actually very simple!
@Charity
Nice article
If I may, if would love to have a article from you, that quickly goes through which php files does what.. I don’t use WP myself, but often I tend to help people out on the issue and it takes some time to get a overview. Im annoyed that WP php/html files ares so divided.
Another thing, how do you work with the php/html in your editor? Often I have to use a local host and criss-cross between the different php files.. that really puts me off! slow and lack of overview is killing my pace.
Using WP as a full CMS like Joomla and Drupal is a extremely bad idea in the mid and long run.
Because the more extensions you use, the more difficult it is to update, since some extensions are developed for different versions etc.
There are a million open source CMS out there so why not choose a one of them? If its because you once installed Joomla or Drupal and got scared, I don’t blame you - I wouldn’t touch it with a margin. Personally I use modx, which have a extremely nice and friendly backend (backend is everything, when you demonstrate for customers)
Great links and article. I was looking forward to the Friday updates on the Creative Curio re-design, sorry to hear its hit the back-burner.
@Esben:
Using WP as a full CMS like Joomla and Drupal is a extremely bad idea in the mid and long run.
Each CMS has different strengths, so it depends on what your or your clients requirements are for a CMS. In general, I would say that Wordpress is the most capable open-source CMS to fit the most diverse range of client needs.
As you said, “backend is everything, when you demonstrate for customers” and the terminology WP uses maps closely to what “laymans” would call things (pages, posts, categories, etc) which goes a long way to how comfortable they will be with using the end product.
The history of Wordpress as a blog platform and its’ development philosophies also make it one of the best platforms for SEO potential out of the box.
@Charity — It’s very kind of you to share your insights on all of this, especially considering that it’s part of your gig, and you’re giving away precious secrets! So, thank you!
I wanted to mention to those of you who are using other people’s themes, that one thing you should be careful of is that some free themes out there have malware/ spam/ evil links embedded in them. Check the code carefully!
@Esben — I LOVE MODx! But I have to admit I’ve used WP for several sites that were too simple to benefit from all of the cool stuff MODx has to offer.
Great post Charity! Good tips on choosing a theme.
I recently wrote my own theme so that I had some simple code and I know what everything does in there. Although I have to admit I’m still no PHP guru and I think the theme ends up being a bit of an amalgamation of themes that I’ve used now and in the past.
I too was overwhelmed by the Sandbox code! Although I might come back to it again, now that I’m more familiar with WP and PHP.
@Esben - You can use WP as a CMS without overloading it with plugins. One of the more effective ways of doing that is using queries to get only the stuff you want on a particular page, an example is Chris Pearson’s categories code. I’ve used that type of thing to create a sort of portal front page - to show news and announcements (on a site for a university society I’m involved with). I started using Joomla for that site, but it wasn’t really working for me (and I started when they were only on 1.5RC, I wanted to wait for 1.5 to come out.
Anywho, thanks for the MODx recommendation - I’d never heard of that one.
I agree, you don’t need a lot of plugins to turn WP into a basic CMS. I use improved includes to create editable areas like sidebars or front page content blocks, and that’s about it.
I do think Sandbox is worth the effort, though. It’s so flexible and gives you so many hooks that you can do practically anything with it. It’s the only theme I use anymore. True, some of the code seems like overkill but I still find it easier (and safer?) than starting over with an unfamiliar theme.
Glad to hear you enjoyed the article everyone! It was a pleasure to write for Lauren and hopefully she’ll invite me back again someday!
@Esben - I’m not sure what kind of answer you’re looking for about working with php/html files, but here’s my best shot…
I use Dreamweaver and Firefox with the Web Developer add-on. The two together are indispensable for simplifying development. DW has some great coding features (code collapse, coloring, auto-complete, etc.) along with a tabbed view of open files… and the FF plugin makes short work of finding a particular style hooked to any PHP snippet. It also provides measuring tools, validation tools and the ability to show/hide images. All very handy.
As for WP as a CMS, I’ve played around with a few different ones (EE, Joomla, Drupal and ModX) over the last couple years. Each had strength as weaknesses, but none were as easy to work with as Wordpress IMHO. I don’t know about the pros/cons in terms of longevity, but I haven’t had any trouble so far. It really all depends on the nature of the site as to what CMS should be used. I’m a one-person show so the other apps were just too much for what I needed. Although if I had to choose one over WP, I’d go with ModX too.
@Alec - good call on being cautious about whose themes you choose to work with!
@Kristarella and Julie - I will probably at some point give Sandbox another try as well. I kept it in my local dev folder to remind me that I need to open it up again someday. I’ve learned a thing or two since the first time I looked at it, so if I ever get around to it again maybe it won’t seem so complex!
@JamieO - thanks for the link to the “10 best” plugins. There’s a few listed I have not heard of before. I’ll be checking that out for sure.
Charity,
I would love to have you back any time! I really enjoyed this article and very glad to see many others did, too.
Thanks to everyone else for your comments! I liked reading the discussion :)
Thanks Lauren and Charity, this has been a really interesting discussion.
I have looked into some CMS programs but hadn’t checked out ModX yet so I’ll be doing that very soon. I hope to have the new version of my site live very very soon and I will probably incorporate Wordpress but it’s good to have a working knowledge of an alternative.
One Trackback
[…] On Designing a WordPress Theme “The premium theme market is growing by leaps and there’s no shortage of selection when it comes to finding a quality theme anymore. But what if you want to create your own rather than buy one to customize?” - creativecurio.com […]