As I embarked on an epic adventure of designing a new WordPress theme for thedesigner.co.za I learnt a few things that I want to share with you. This is by no means a tutorial on how to create a WordPress theme, but rather a guide on what I found useful to do when using or designing a new WordPress theme.
When I started this blog I used a minimalistic theme which I downloaded from the WordPress theme gallery and without thinking much about the consequences started blogging, adding image headers and some formatting that I rather shouldn’t have.
Make your images dynamic:
I only realised that this was a problem once I started testing some different themes where I discovered that my header images, which had a curve to it, suddenly didn’t fit in with the theme anymore. The same thing happened with some of the content formatting I used. So my first tip is that you should make your images more dynamic and insert them into posts as basic images and let your WordPress theme add all the interesting elements via CSS.
Should I use a WordPress framework?
This was probably my biggest battle I had in my head as I scoured the web to find the ultimate WordPress framework. I downloaded the recommended ones that caught my eye and did a few tutorials on getting started with them, but every time I got to almost-the-end product of my site I wasn’t satisfied as the little voice in my head kept telling me that I can do this on my own – I am a fully capable web designer after all?. This kept happening until I got to the fourth framework where I decided that this is not the solution for me. Now don’t think I have something against WordPress frameworks as I have seen some amazing ones that are fully capable of kicking ass in terms of development, but as a web designer I felt empty using them for my own work.
Should I use an existing WordPress theme?
So after I finally trashed the frameworks I went on another hunt for an existing WordPress theme that I could tweak, mangle and disfigure to fit my needs, but that same little voice and emptiness kept lurking in the back of my head until I ultimately decided that this is not the way to go for me either – I am a fully capable web designer after all?
More on WordPress frameworks at http://codex.wordpress.org/Theme_Frameworks
Should I build my own WordPress theme from scratch?
Absolutely, this was the right choice for me…and the little voice faded and was replace with the excitement of going on a design development binge. I managed to find a number of good articles on the web on how to build a WordPress theme from scratch, but ended up using bits of advice from each as I couldn’t find just one that had all my unanswered questions.
Where to find good articles on building WordPress themes?
I was pleasantly surprised with some of the WordPress articles I found on Smashing Magazine which enabled me to conjure up the WordPress magic I was looking for.
I was having problems with multiple sidebars in my theme, because they kept on disappearing in the widget area once all the settings were saved. After reading and implementing my multiple sidebars as described by Smashing Magazine my widgets were finally behaving. The problem was that I didn’t include ID’s for my sidebars so be sure to give your sidebars their own ID’s.
Reference:
- Point ‘6. Add Multiple Sidebars‘ from the article ‘10 Useful WordPress Coding Techniques‘
Next I needed to show a thumbnail next to a bit of content from my posts in the main index page and once again Smashing Magazine helped me out in this area. I combined two coding techniques by Smashing Magazine where I used TimThumb to automatically resize my thumbnail’s size and a function that looks for the first image in a post.
Reference:
- Point ‘6. Automatically Retrieve The First Image From Posts On Your Home Page‘ from the article ‘10 Exceptional WordPress Hacks‘
- Point ‘7. Resize Images On The Fly‘ from the article ‘10 Exceptional WordPress Hacks‘
Reference the Default and Kubrik WordPress theme:
Sometimes when I got stuck with a certain part of my WordPress theme I referenced the two stock themes that come packed with WordPress as I thought they are good examples of what I am trying to achieve. It also just helped checking to see if I had all the correct parts inside my theme.
What plugins worked for me?
It is always difficult finding that perfect plugin between the masses which can literally be like finding a needle in a haystack. I tried and tested so many plugins that I lost count, but after about a week of trial and error between the million plugins out there I settled and can recommend the following:
- Author Image, by Denis de Bernardy
Adds authors images to your site, which individual users can configure in their profile. Your wp-content folder needs to be writable by the server.
Visit the plugin page at WordPress.org - Google Analyticator, by Ronald Heft
Adds the necessary JavaScript code to enable Google’s Analytics. After enabling this plugin visit the settings page and enter your Google Analytics’ UID and enable logging.
Visit the plugin page at WordPress.org - Google XML Sitemaps, by Arne Brachhold
This plugin will generate a special XML sitemap which will help search engines like Google, Yahoo, Bing and Ask.com to better index your blog.
Visit the plugin at WordPress.org - Limit Posts, by Alfonso Sánchez-Paus Díaz y Julián Simón de Castro
Limits the displayed text length on the index page entries and generates a link to a page to read the full content if its bigger than the selected maximum length.
Visit the plugin here - Shadowbox JS, by Matt Martz
A javascript media viewer similar to Lightbox and Thickbox. Supports all types of media, not just images.
Visit the plugin at WordPress.org - Twitter Widget Pro, by Aaron D. Campbell
A widget that properly handles twitter feeds, including @username, #hashtag, and link parsing. It can even display profile images for the users. Requires PHP5.
Visit the plugin at WordPress.org - WP-DB-Backup, by filosofo
WP-DB-Backup allows you easily to backup your core WordPress database tables. You may also backup other tables in the same database.
Visit the plugin at WordPress.org - WP-ContactForm, by Johannes Ries, Ryan Duff
WP Contact Form is a drop in form for users to contact you. It can be implemented on a page or a post.
Visit the plugin at WordPress.org - WP-PageNavi, by Lester ‘GaMerZ’ Chan
Adds a more advanced paging navigation to your WordPress blog.
Visit the plugin at WordPress.org - WP125, by redwall_hp
Easily manage 125×125 ads within your WordPress Dashboard.
Visit the plugin at WordPress.org
Now like I said, this is by no means a tutorial on how to create a WordPress theme from scratch, but hopefully this will help you out with your next WordPress project or give you a different view on how I created mine.
You also need to take into consideration that I am a web designer with good knowledge on xHTML, CSS and a limited – but workable – knowledge of php so I would not have accepted taking someone else’s work and tweaking it. Between Smashing Magazine and the WordPress Forums I was able to build up my own WordPress theme from scratch.
What do you do when you start a new WordPress theme?
Do you use a framework, existing theme or create one from scratch?
[...] This post was mentioned on Twitter by Patrick – HFConcepts, Adriaan Fenwick. Adriaan Fenwick said: What I've learnt from building a WordPress theme and some cool plugins http://bit.ly/6rsV9D #webdesign #wordpress #design [...]
Mostly creating from scratch is the best option. But sometimes depending on what clients require, I take a short cut and customize any GPL theme totally different from what it was. Saves lot of time.
-Btw, I love your WP theme here, Color contrasting is awesome and eye-catching. Keep up the good work !
Social comments and analytics for this post…
This post was mentioned on Twitter by donderhaas: What I’ve learnt from building a WordPress theme and some cool plugins http://bit.ly/6rsV9D #webdesign #wordpress #design…
This is really useful thanks, it is something I come up again everytime we run a course; do we teach making a site from scratch OR do we just use a template. The ability to make our own templates answers that question.
Thanks for the post.
Carl
Adriaan, I felt the same way the first time I tried to change Kubrick. It was so confused, with so many things already set and codes I was not going to use that it took me a while to tweek it and the end result, my page won´t have a RSS Feed in the navigatiion bar due to some error.
It made me mad, so the next redesign, I used a lot of advise from Smashing Magazine, CSS Tricks and Cats Who Code/WpRecipies. The best piece of advice: build your theme on Starkers framework. Starkers is the nude theme, just the bare minimum and no style.
The best thing you can do, as a designer, is to start from nothing, build your own css and xhtml and them use a nude theme like Starkers to tranlate to Wordpress.
Thank you for this post, very helpful for anyone trying to build a theme for the first time.
Have you tried submitting your theme to the theme directory at wordpress.org? When you do that you find out there is a whole other list of requirements. I certainly understand the desire to build a theme from scratch, but I usually settle with modifying an existing theme.
That being said, there is no better way to learn a ton about WordPress than building your own theme from scratch!
Great post, Great theme! I love how the subtle things on this theme make it so much more valuable and attractive. Simple, hover over the main body and the opacity changes, almost like you put it there just to tease peoples brains subconsciously.
How long did you take to build it?
Thanks for the feedback.
After I battled with the idea of using a framework or not – an existing theme or not – it took me about 3 days to design and build this theme. That’s the beauty of wordpress, even if you’re not using a framework it is still very much a rapid development solution.
Wow, awesome! 3 days! That’s unbelievable! Flash development always seems to take much longer, hehe.
Great stuff buddy! Keep up the good work!