Today sees the launch of my very first self-built WordPress theme.
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.
- Google.
If you want some other recommendations, you should check out this post by @tentblogger.
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:
- Header
- Content Area
- Sidebar(s)
- Footer.
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!
I really like it. I also like your subscribe box at the end of the post.
Thanks, Michael.
It’s a widget called WWSGD (What Would Seth Godin Do?) I just applied a little css formatting to it.
I like what you have done. The theme is clean and easy to read with easy to follow links. Your work gives encouragement as I look to future changes in my own blog.
Thanks for the comments, Dennis. I appreciate them.
It’s easier than you think to make changes to your blog.
Let me know if you need any help/advice!
this looks great! i’m terrible with html. i’ve googled a million different questions and been able to piece some things together, but it takes me HOURS! I’m always impressed by folks who know what they are doing. I’m afraid to say that you’ve inspired me.
I have no idea what I’m doing… I just muddle through.
That’s part of why it’s so good to build from scratch, because then you have to learn/work out how to do every aspect of the theme, which can only help in the future.
Here comes answers to your questions… ready? LOL
How is the theme? // I like it, really. I dig minimal.
What would you change? // I’d add some padding to the post-info area and the search box looks crammed in the corner. Perhaps either get rid of the border around the bread-crumbs, or add some padding.
What could I do better? better is relative
oh, and I think I’d change the blue hover color – if it were me 😀
but again, over all I love it, and think it’s awesome that you attempted your own theme.
Oh… yeah.. I keep meaning to do something about the blue hover color. That came with the script I used for the drop-downs and I’ve never managed to come up with a better color!
Thanks, Herb, those were some really helpful suggestions.
I added some padding in the post-info area and around the search box and completely changed the breadcrumbs/topsy tweet box.
You have a relative named ‘better’? I’m assuming she’s a girl?
It looks fantastic, Peter. But why should I build my own theme? That’s what you’re for, right?
Well… Obviously when I was writing this post, I wasn’t aiming it at royalty such as your good self…
I think you are very brave! I can’t even imagine trying to do that and I “tip my hat” to you and all the ones who are so creative.
I can learn software with a couple of lessons but this behind the scenes stuff scares me. Perhaps someday I can get some hands on experience from some of my tech savvy friends.
It looks good!!
Thanks, Janice.
I am far from creative though.
You should definitely jump in to some more hands on wordpress stuff.
We’ll all help, and you’re free to use the sandbox I created for you!
i’m digging it!!!!!!!!!!!!!!!!!!!!!!
Thanks John,
I appreciate you stopping by and taking the time to comment.
Somehow or other you manage to get more energy into a three word sentence than a whole bottle of 5-hour-energy!
Looks great, Peter! Like it a lot. It does seem very daunting to consider starting from scratch, especially after just fumbling my way through redesigning someone else’s theme, but I guess maybe that’s why it’s easier (not having to change someone else’s work). Anyway, good stuff!
Thanks, Jason.
Fumbling through is one of the reasons I did it.
I’ve worked with a lot of other themes and half the problems I’ve encountered are solely due to the weird ways they have coded their themes.
I think you could do it!
I like it! I wish I was this far, but I haven’t even gotten to the point of figuring out how to download and use WordPress yet, I am simply using the free templates.
🙂
Let me know if you need any help/a push in the right direction!
It impresses me in ways my Uncle Toby’s big toe never could.
That’s the nicest thing anyone has said to me since my Aunt Phyllis told me I reminded her of her dead goldfish!
It was a compliment. Seriously. 🙂
Hi Peter. I was away from the Internet for a while, what a nice surprise I found when I got back and checked your blog.
I liked the new looks. It is clean, it’s easy to find the links and buttons and to read the text – I personally like dark fonts with clear colored background.
What I am missing is a list of top posts. That’s usually the first thing I look for when I visit a new blog. Just a suggestion…
Great job, and thanks for sharing.