Creating a custom WordPress theme can be quite some work, even when you are pretty skilled with HTML, CSS and know your way through the theme requirements.
The best thing that I’ve done to reduce the time I need to develop a new WordPress theme, is to create a wireframe theme. A wireframe is nothing more than a clean theme, with no layout at all. It’s just a bunch of ‘wires’ (borders mostly) connecting all the elements of your theme.
But the best part is that all the basic functionality is already there. So when I’m going to develop a new WordPress theme, I’m not going to start from scratch, but take a fresh copy of my wireframe and start building my new theme on top of it. I just have to take care of the looks and extra (non-standard) functions.
How do I build my own wireframe?
Just follow these steps and you will get your wireframe up and running in no time:
- Draw a sketch of what you’re going to build. Yes, on paper. Might sound a bit odd, but it gives you a nice overview of possible challenges to you have to overcome. Sketching forces me to think a bit different about the same problems.
- Design the required pages in either Photoshop, Fireworks or any other application you like. If you feel the sketches are more than enough to get you going with the HTML, that will do too.
- Build a static HTML page of each page that is really different than the others. If you keep your wireframe really basic, you can also choose just to markup a single page for now.
- Build a basic working WordPress theme that contains all the basic functions of a WordPress theme.
- Add specific functionality that you might need by adding custom functions in the functions.php file.
A wireframe is unique to any developer, to suit some specific needs or habits. That’s why with writing this tutorial, it is really hard to help each and every developer at the same time. You should look at your coding habits and support them with your wireframe. Otherwise you might end up adding more time to the development stage instead of reducing that amount of time.
What should a good wireframe theme be capable of?
I like my wireframe to be as pure as possible. Nearly no styling will be applied, just a few borders to maintain the overview in development stages. Besides that, it should have all the functionality that you desire from your WordPress themes. Imagine (possibly multiple) widget-ready sidebars, extra added functions and whatever you can think of.
When you are developing your own custom wireframe theme, you should always keep your goal in mind. Is the wireframe really reducing the development time? That is the goal of a good wireframe, so when people ask me; what is the perfect wireframe? The answer is quite simple: A perfect wireframe suits your needs while developing a new WordPress theme and reduces the development time for every single WordPress theme that you build on top of the wireframe.
My wireframe is constantly being tweaked. When I come across a modification that I have to make more than once to the wireframe while developing a new theme, it is likely that I will change it in the wireframe. You should always keep in mind that you decide what’s best for your wireframe.
What does your wireframe theme look like?
Have you built your own wireframe and what does it look like? Does it have any customized functionality, or any other spectacular innovations? Please let me know, or us give a sneak peek under the hood of your WordPress wireframe theme!
Related posts:
Thank for the post. It really help me to update my knowledge on WordPress especially about the theme.
To be frank, I have never heard about the wireframe and how it let the process of developing wordpress theme easier and faster.
Can you suggest the example of wireframe, Coen? I have never bumped with such thing (n_n)
I am actually planning on releasing one of my wireframes to the public later on.
Today, it’s not good enough to sell it, a little to good to give it away for free. I’ll give you guys a sneak peek in a couple of days!
Thank you! I’ve wanted to try my hand at making a theme, but I admit that I’m a bit of a coward. LOl Using this wireframe idea might get me braver.
This is the kind of thing I’d like to learn how to do eventually. Thankyou for sharing.
Many task in theme development are quite repetitive, so building a basic WordPress is a very good idea, so you don’t have to copy and paste the code from the WordPress Codex – that’s what I do
. It’s like building a personal framework.