Converting any html to WordPress
Another thing easily noticeable on Devlounge is it’s unconventional design. How did we pull this off? It’s a lot easier then it may look. The WordPress template system is standard html with php thrown in to pull certain things. If you can code html, you can turn it into a wordpress ready theme.
Take a new project I’m currently working on, called Soundchronicle. Soundchronicle is going to be a simple wordpress review blog, where I’ll be reviewing albums and songs. The design took me around a half hour, because I wanted it to be simple and mostly based on css.
I began coding it yesterday. After slicing the images how I would need them, I opened up Dreamweaver and began working on the css and setting up the base of the layout. By the time I was finished, the html looked like this:
Essentialy, this was just the “bare bones” of the design, with no footer, and none of the extra features. So how did we go from html to WordPress?
Pretty easily. All you need to do is copy the html into the main index. First, break down what has to be in the header and what has to be in the footer. The Soundchronicle header consisted of the following:
As you can see, we put our “wrap” div as well as our header div in the header, so they’d be outputted in every single template file. The footer simple consisted of the closing wrapper div as well as the closing body and html tags.