How do you create your WordPress themes?
I’m really interested and curious to find out how other people come up with their themes for WordPress. Although I really love the blogging tool, my one complaint has been how hard it is for people like me, who aren’t that familiar with PHP, to successfully get in and create their own themes. There are some guides out there for people like me, but unfortunately I find a lot of them hard to understand and not too user friendly.
Normally I’ll begin in Photoshop and do a mock up of what I’d like my final theme to look like, including link colors, text colors, and etc. Then I’ll go and try to find an existing theme (usually from my collection) that will fit this idea. I then tweak the CSS and code around to get the theme to work, and I always give credit to the original creator of the original theme. Sometimes the theme works, sometimes it doesn’t.
Lately I’ve been contemplating building a theme from the ground up, without borrowing code from other themes, and it’s a little daunting. How do I start? Should I just build a page without WordPress in mind using CSS, and then try to fit WordPress into it afterwards? Should I try to build my theme around WordPress functions I know that I want to use?
Other things I try to do when envisioning a new theme is to check out the websites of my esteemed peers. 
Websites like beccary.com, tehsheriff.org, pure-essence.net, bubblessoc.net (even though it’s down at the moment), and veerle.duoh.com are all created with that clean, sophisticated, and elegant style that I love. There aren’t too many elements distracting you, all are very simple and clean and all of the elements match well and work well together.
How do you go about creating your themes? What is your process?
-
Hey Erin. I find that WordPress has very little code that needs to be added, which makes it really easy to make a layout for it. I usually draw my layouts in Photo Impact, then I code them, then I include the basic files that come with every WP installation, and then I am changing various tags whatever I like differently. Like the date. The WordPress Wiki is really helpful!
Making themes used to be much harder in the beginning days of blogging (like for Moveable Type, YIKES!), but it has become so much easier these days.
I really prefer individual layouts so much more to the themes that everyone is using, I cant look at them anymore. I like yours a lot!
-
You don’t need to know PHP to get WordPress silly! No, but really, you don’t — I can turn any layout ever created (.. okay maybe not ANY, but close) into a functioning WP layout, and the only PHP code I can write from nothing would tell you the time.
I usually create a mock in Photoshop, and then transfer that idea to XHTML/CSS — and then seperate it into the pieces for WordPress. Once you’ve done it once or twice, it’s not that hard. Perhaps I’ll write a tutorial
-
I tried to follow a tutorial, but as WP is constantly getting updated, it was rather useless as the functions were not good and PHP gave me errors.
So here is how I ended up creating my current theme:
- design a layout without thinking that you will need to adapt it for wordpress.- go to the folder that has the classic theme. NOT the default one, as that has 9578675 useless stuff… just in case some highly unlikely thing happens
- Compare your header file with the header file of the classic theme. In the head section there are some php code lines, put them in your own code as well.
You will have to name you stylesheet style.css and replace the line where you look for a stylesheet, with the one in the header.- open index.php
This one has a lot of divs which you might not use: post title, post body, post meta info… You might want to get rid of the divs, and enclose them in tags that you need for them.- the sidebar generally doesn’t need to be changed, unless, like me you decide to put these things in the footer.
- comments.php and comments-popup.php can stay as they are. I just changed the form, p tags for fieldsets.
And then check to see how your theme looks. You will probably need to make some changes in the style.css. To see ids and classes, just visualize the code of the page.
Word of advice: it is good to have a webserver, phpparser and mysql installed offline. This was you can test things before uploading them, making sure it will look fine from the start, online.
http://codex.wordpress.org/Installing_WordPress#Installing_WordPress_Locally
That’s it
-
- Comment Feed for this Post
Aww…I’m an esteemed peer.
Thanks!
I usually code without thinking about WordPress, get everything I want as far as the HTML/CSS goes, make sure it validates and then I add WordPress to it.
I still don’t really build from the ground up anymore. I’m too lazy. I always copy and paste from stuff I’ve done, especially when incorporating WordPress. Most of my layouts are similar so I take the basics and then add to it.