Self-building is an experience that I recommend to anyone who has used WordPress for a while.
There’s no better way to really understand how something works than to learn to build one from the ground-up, so that’s what I did with this theme.
I started from a blank page in a text editor and slowly put everything together. I learned an incredible amount from doing it and I’m certain that what I’ve learned and experienced will help me no-end going forward.
It’s easier than it sounds, you just need a couple of simple tools. I’ll show you exactly what you need:
If you’re reading this somewhere around February 1st 2011, then you’re seeing the new theme. If you’re not, then I’ve probably already moved on to something new (I don’t stick with themes very long). So here’s what it looks like:
To build this theme, I used five tools:
- A Code Editor. My code editor of choice is Notepad ++ which is free and does everything I can think of to want it to do.
- Filezilla. For FTP uploads and downloads, I’ve use Filezilla for years. Also free, this is an indispensable tool!
- Google Chrome. I wrote here about how you can use Chrome’s built in features to help you modify the layout of a site.
- Other themes.
I’m not going to try to tell you I know the ‘best’ way to go about building your first theme. I’ve only done it once so my experience is limited but I started with a stylesheet.
I created a new folder on my computer called Plain-Beauty (the name of the theme) and, using NotePad ++, created a file in it called STYLE.CSS.
To me, it was important to start with a basic stylesheet because I needed to define the width of my page and the sizes of the main elements inside that page.
The main elements are:
- Content Area
After I had created by basic layout, I created three files, header.php, index.php and footer.php.
This is where I cheated a little and copied the basic code needed in those files from a couple of themes I had used before.
I’m no code expert. I can’t sit and write code but through experience, I can see what the code is doing and just copied the parts which were forming the basic elements of the site.
Once I had done that, I used Filezilla to upload the files to a test wordpress installation I had set up and took it from there, using my idea of what I wanted to achieve and the css editing facilities of Google Chrome to help me craft every aspect of the design and layout of the site.
I frequently referenced other themes, opening up their files to see how they did certain things and whenever I had a problem, I just Googled it and usually found the answer within minutes.
What was really good about the process though is that I got a much better appreciation of how WordPress themes are put together and feel even more confident now in modifying and adjusting them.
This is definitely a work-in-progress. It’s nowhere near finished – and I’m very interested in your feedback.
How is the theme? What would you change? What could I do better?
Check out Tentblogger.com for more tips and tricks for creating awesome WordPress sites!