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:
[html]
[/html]
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:
[php]
[/php]
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.
[html]
This would output all our posts into the news div, and put the content of the posts into a separate class called “newscontent”, so I could give it special padding as well as special link classes, etc.
Now, the base of the html was coded and ready for posts from WordPress to be inserted.
Easier than it seems
As you have seen, WordPress is not as hard as it may look to take advanced designs and ideas and turn them into reality. The WordPress Codex provides a great resource for you to learn about all of WordPress features and uses.
But why not take it further.
Next week, we conclude the WordPress Series with must have plugins, and, the following week, we throw the kicker at you. Our first, custom built WordPress theme, specifically for use with these articles and to help you learn the ins and outs of wordpress. We’re not giving away many details yet, so stay tuned!