Over the last year I’ve really adopted the use of wordpress not only as a blogging platfrom but as a content management system (CMS). I have now helped set up three different organizations with wordpress as a replacement for their previously hard-coded website content. Through this process I discovered that it is actually incredibly easy to take an already pristing (fully validated and tweaked for IE bugs) css website and convert it to a wordpress theme. Here’s some of the things I learned in my adventures.
Start with a good model
The first big hurdle is to start with a good model for your theme. I still haven’t figured out what is the best example (for reasons I’ll share in a moment) but I have found the bad ones.
Wordpress Default Theme: “Kubrick”
Do not start with “kubrik” which is the default theme for all versions of wordpress. I find that the CSS is arranged in a way that makes it hard to find the classes you are trying to work with. In general the css layout itself separates arrancement from asthetic (the colors for the sidebar are in a separate section from the width of the sidebar, etc.).
So what should you use instead of Kubrick? To tell you the truth I don’t know. Because the recent release of WordPress 2.7 included some inproved css class functionality many themes aren’t yet updated for this. My advice would be to get several themes that look great and then check out the style.css file. If it looks well organized and condusive to incorporating the css layout your are trying to merge then use it. In the end you will want to check all of the template files to make sure they do what you want them to as well as incorporate the new feature of wordpress. You want the work you do now to be as up-to-date as possible so the in the future it will be easy to tweak your theme to keep up with development (and embrace new features).
Example Content
Working with a wordpress install devoid of content is like painting in the dark. Having a test site that is full of content will allow you to view how your layout effects every aspect of the content you are using. Luckily there is sample content available from WPcandy that you can download from this post. Import it into your test site and you will have the give of multiple pages and posts exhibiting every aspect of wordpress: Images of all alignments, all types of comments, all types of lists, all types of headers…. everything!
One word of caution with this sample content. It will not validate as XHTML strict because some of the photos have a depricated option of “align: right” in the img tags. This can be edited out easily enough (I did) and will not be a problem if you are designing for XHTML transitional.
Let the Merge Begin!
You should really look at this as a merging of wordpres with your previously designed site. I opened up my original style.css from the hard-coded site next to the style.css from my model wordpress theme. You need to find the class names of your wordpress model that fit the css layout from your previous webpage.
Start copying over your layout to the wordpress css file. The names will change but the layout will remain the same. Don’t forget to copy over any images that your previous design used. Put them in your wordpress themes folder (I store them in a folder called ‘images’… go figure) and link to them in the css just like you normally would. Save frequently and refresh your page to see the results.
Changing the Template Files
Eventually you will have done all you can with merging the CSS files. There may be a need to add classes and tags to the wordpress templates themselves. This is pretty simple and just requires the ability to read a bit of the php function calls. One you find what you are looking for wrap it in the tags that you need.
For instance if you need everying that is not the header or the footer to be in the css class “main_container” just add div tags after the php function call for the header and before the function call for the footer. It would look something like this:
<?php get_header(); ?>
<div id="main_container>
/* all of the main page content will be here */
<?php get_sidebar(); ?></div>
<?php get_footer(); ?>
You can then style your new class “main_container” like normal:
#main_container {
margin: 0 auto;
background: grey;
color: blue;
}
Good luck, I hope this helps!