» Dreamweaver Template to Wordpress Theme Variation

Last year I published a tutorial outlining how to convert a Dreamweaver Template into a Wordpress Theme. In that first method we detached the page from the Dreamweaver template and we eventually broke the templated file into the various Wordpress include files. In this alternate variation we will keep the association between the themes files & the Dreamweaver Template intact. We’ll drop the Wordpress Loop and sidebar code into the editable regions of the Dreamweaver Templated page via source code or split view. And just like in the first tutorial, we will also be merging style sheets together without bringing over too much code so theres no weird cascading effects from overlapping styles.

When converting a Dreamweaver Template to a Wordpress Theme, I personally prefer to use the initial method because creating a full on Wordpress Theme with all it’s include files makes managing your Wordpress CMS or Blog easier and more versatile in my opinion.

Suggested Requirements

• At the very minimum your Dreamweaver Template needs to have one editable region for the main body area and one editable region for the side bar area.
• Any person attempting to use this tutorial should have a moderate understanding of HTML & CSS, a pretty good understanding of how Dreamweaver Templates work, a good attention to detail and common sense.
• Most important, you should read through the original tutorial as this one is a quick bulleted todo list, where the original method goes into a little more detail. Read through both and decide which route you want to take.
• Read the primers for Theme Development and The Wordpress Loop… at least once.

Time to get started…

1. Open your Dreamweaver Template my_template.dwt file and save as a new name like my_wpblog_template_.dwt or something.

2. Update all links in your Dreamweaver Template

• Update link calls to be absolute URL’s
• Update images calls to be absolute URL’s

3. Create your various php files

• file > new from template > choose the blog template
• save as wp-content/themes/your_theme/index.php
• repeat the process and create single.php, search.php and page.php

Save and leave all 4 files open

4. Update Stylesheet

• open the site stylesheet associated with the Dreamweaver Template
• save as wp-content/themes/theme_folder/style.css => leave open

5. Go back to your NEW index.php, toggle split view,

• open index.php from the Default Wordpress Kubrick Theme
• copy everything from and including <?php if (have_posts()) : ?> to <?php endif; ?> => paste into to the body section editable region via the source code of your index.php file we just created from your Dreamweaver Template.
• scan through the source code you just pasted.. note all the different styles being used.

6. Open the stylesheet from the Default Wordpress Kubrick Theme

• add comments from top of default css and paste into yours.. update theme name, version, author etc.
• copy the styles associated with the Kubrick loop code from step 5 and paste them into your new style.css file.

7. Repeat Steps 5 & 6 for single.php, search.php and page.php, again using the WP Loop code from the associated Kubrick files. Don’t forget to carry over the associated styles.

8. Carry over the sidebar code, copy everything between <div id= “sidebar”> </div>. Copyall associated styles sidebar styles. You can either skip #sidebar container style (around line #532) or copy it over and adjust it to fit your site.

9. Copy the following files over from the default folder: function.php, searchform.php, comments.php and comments_popup.php and paste them into your new theme directory.

10. Merge your head content from the Kubrick header.php file into the Dreamweaver Template so it can filter out to all associated pages. Be sure not to over write or mess up and of the Dreamweaver Template tags.

11. upload your theme, test all the different page types; tweak styles and formatting as need be.

12. All done…

Remember.. if you get stumped or don’t understand a part of my explanation, please leave a comment with your issue and I’ll try and follow up.. I’m usually pretty fast to respond. Furthermore, if you decide this task is beyond your skill set, please contact us for a free consultation.