Creating your own wordpress theme?
Asked by
roons (
11)
January 13th, 2009
So i have recently started up a wordpress inspiration log for myself, and i am quite keen on designing my own theme to go on it. I am currently using one i found on the wordpress site, but it isn’t very ‘me’ so to speak. I would love to create something that is my own. Anyone know how to go about this or do i need knowledge of css?
Observing members:
0
Composing members:
0
11 Answers
You have to know css and a bit of HTML and PHP. (don’t be intimidated by the PHP part) it isn’t that bad once you know what it is doing. Themeing wordpress is kinda hard. Going from zero to themeing wordpress is something I would avoid.
But if you got a design down in Photoshop or whatever I would happily try to convert it into a theme. No promises. And I won’t try to get it to work in IE.
oh really? for some silly reason i was just thinking it wouldnt be that hard. Maybe i should read up a little more on it all as im not much of a web designer. anything you can recommend at all?
It’s not that it’s “that hard”, it just takes some background knowledge. There isn’t an easy editor for the themes or anything like that, to do your own you essentially have to create or edit a couple dozen files in a cohesive way.
Just jumping into it without knowing the background would be a little like learning Spanish by reading Spanish poetry. Spanish isn’t necessarily a difficult language, but it’s tough to go from zero knowledge to catching the nuances quickly. Same way with the two languages you need to learn to make a successful theme. (calling HTML/CSS one combined)
Which isn’t to say you can’t do it, and I’d be happy to try to help as well. (maybe I can try to make it work in IE when johnpowell is done ;)
There are probably a thousand existing themes for wordpress though, many on wordpress.org and many others in various sites on the internet. It may be easier to find something you like the general feel of and then make small tweaks to make it your own. A change of background images and a few colors can make something seem quite different and may be a better way to go.
Good luck with it and drop us a link when you get going.
WP themes are actually a bit harder to design than a traditional website because they contain a lot of PHP includes, and if you leave a div tag or whatever unclosed in one of them your layout will blow up and you’ll have a harder time tracing back where the problem is. You’ll be much better off by browsing around and finding a template that you like, than trying to create one from scratch with no web design experience. Do a Google search for “free wordpress themes” and I’m sure you’ll find one that you like.
Well, you need to follow some specification, which you can read on Wordpress site. Basic knowledge of PHP is a must, and you should get familiar with Wordpress PHP functions, such as including parts of site (header, footer, sidebar) and posts, tags, etc.
I’ve done three up to now. It gets easier. I’d suggest you don’t start ‘building’ you design, but modify the default one. Much of the stuff within the divs and similar you can delete, but the part which contains the header and other information that Wordpress needs from a them you already have in there, so you have less work to do. But do not try to modify the css that comes with the theme, because you will soon encounter much trouble that you can simply avoid by building a stylesheet from scratch.
LanceVance brings up a point I forgot to mention. It is much much easier to find a theme that you mostly like, and to change its colors or images to fit your needs, than it is to design one from the bottom up. So find a theme that has a structure and layout that you like, save it on your desktop, and start changing the colors. You’ll need a photo editing program such as Photoshop (the Gimp probably has the function you need too) to edit the images which contain the original color. Use the “Change Hue and Saturation” function in the photo editing program, change the hue until you find a color you like, then remember the value and change/save each of the images. You’ll also need to recolor the link colors in the CSS file. For testing, I upload the theme to my testing Wordpress installation and test and change the CSS until all the colors are changed. And you’ll want to make sure you leave in the original author’s name and website link for good web karma. Going through this process is a great introduction to the structure of Wordpress’ code and will make designing your own theme from scratch easier.
Start with an existing theme that’s close to what you want, make a renamed duplicate, and start tweaking it one bit at a time. This is what I did (with some help from johnpowell and others) for my WP blog.
All of the above is correct; I’ll just add that there are a few Wordpress themes that try to make it easy to modify the design of the site without knowing PHP. You’d still probably have to know your way around CSS, but to my mind it’s orders of magnitude easier. Thesis is one, though it costs money, and there are others that I can’t name off the top of my head.
thanks for all the tips guys, i really appreciate it. I like the one i am using at the moment, but i would like to tweak it a little, like move the rss button to the top and add a twitter and digg/delcious button. maybe make two columns. Would you reccommend using dreamweaver or something like that for making it two coloumns? Plus i heard there were plug ins and stuff for twitter and stuff.
Thanks for all your help guys, i feel like such a noob :P
If you want two columns, you’re best off finding a theme with two columns. Trying to add a column into a preexisting theme will lead to headaches and pain. Things like moving the RSS button to the top shouldn’t be too hard. While you could use Dreamweaver, realize that you cannot view your theme without it being live due to the PHP includes and database reading: using Dreamweaver is good though because you can upload the files and test it on your website in a streamlined form. But don’t think that by using Dreamweaver, things will be easier or thought out for you.
And yes, there are tons of plugins, go to The official Wordpress Plugins directory to find them. You upload them to your plugins directory, unzip them, then activate them from inside Wordpress. Very easy. I use a Twitter plugin on my blog and have integrated it into the top of my second column.
Answer this question
This question is in the General Section. Responses must be helpful and on-topic.