» Dreamweaver Templates into Wordpress Themes

Posted: September 25th, 2007 | Sammy Russo | Tutorials

This tutorial explains how to take your Dreamweaver Template and convert it into a Wordpress Theme. I also posted a variation of this tutorial where I leave the Dreamweaver Template intact. You may want to read through both before you begin.

Through this process we’ll start by creating a blank Dreamweaver Templated page, we’ll detach it from the Dreamweaver Template, insert the Wordpress loop, sidebar & header code, adjust the stylesheet a bit and finally break the page into the various Wordpress include files typically used in a Wordpress theme. We’ll be grabbing the Wordpress loop, sidebar and header code from the Default Wordpress Kubrick Theme and pasting it into the Dreamweaver Templated page.

I like to create a new page from the Dreamweaver Template I plan to convert and name it index.html, then I detach the file from the template for a few reasons. First, once in Wordpress, you don’t need all that extra Dreamweaver template mark up. And second, Dreamweaver doesn’t understand the WP commands when including the header, footer and sidebar files because they aren’t standard includes. Finally, this allows me to work in WSYIWYG version for most of the process. However, I suggest you get used to working in split mode (code & Design).

Before we start converting your Dreamweaver Template into a complete Wordpress Theme, please note that you will need a good working knowledge of HTML and CSS, a very basic understanding of PHP, and good attention to detail.

And By all means.. 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.

Read the Primers in the Codex
I highly recommend you first read Theme Development and The Wordpress Loop… at least once.

Optional Preliminary Step - Merge the Stylesheets
You have two options when it comes to merging the stylesheets. Before converting your Dreamweaver Template into Wordpress, you can sift through the Loop and Sidebar code from the default Wordpress Theme, grab the needed formatting styles and paste them into your main stylesheet.

Your other option is to merge the css code on the fly as you copy and paste from the Kubrick theme files. If your main site stylesheet doesn’t already utilize content, sidebar and footer container div tags, you may want to create them and style them to your liking. After you get your Dreamweaver / Wordpress theme working you can go back and tweak your styles accordingly.

Let’s Started Converting Your Dreamweaver Template
Step 1- Theme Directory: Create a folder to hold your theme. Place it inside the themes directory, which is located inside of wp-content.. s o your folder structure should look something like: site folder > wp-content > themes > your theme folder > ThemeFiles.php

Step 2 - The Style Sheet: If you don’t name your stylesheet correctly and add the comment tag markup at the top, your theme will not appear under your presentations tab.

• Rename your existing stylesheet as style.css and save it to your new Wordpress theme folder.
• Add this snippet of code to the very top of your stylesheet and fill in the info accordingly.

/*
Theme Name:
Theme URI:
Description:
Author:Author URI:
Template:Version:General comments/License Statement if any.

*/

Step 3 - Create an HTML File: As I mentioned above I like to start by creating a standard html file

• Click file > new from template > chose the template you want to use > save as index.html into the theme folder
• Click Modify> Templates > Detach from template
• Update the link to the stylesheet to match that of the one we created in Step 2. For now make it absolute link so you’ll need to upload the css file to the server.

Step 4 - Add Comment tags: I like to add comment tags in specific places to mark off the header, the footer and sidebar sections.

• Your header comment tag can go just outside the closing head tag or if you have a horizontal top navigation, it can go just below the nav.. just place it logically. I tend to place just outside the opening of the div id content tag.

  </head><!-- End Header -->

• Do the same for your sidebar and footer areas

  <!-- begin sidebar--> <!--begin footer -->

• Finally add a comment tag for the WP Loop… it should go where your main content editable region used to be.

Step 5 - Link Modification: I’m assuming that the central navigation & footer nav (if it exists) for your existing website is going to stay so you need to update the links to make them all absolute URL’s… http://yoursite.com/page.html.

Step 6 - Add WP Template Tags: Open up the necessary files from the default Wordpress Kubrick Theme. Open up header, footer, index, sidebar and style.

• Header: Replace everything from the top of the file to the bottom of your closing head tag with the following into your index.html page…
• If you have java script calls and extra head content that is unique to your Dreamweaver / Wordpress Theme then pay close attention and merge what you need and be careful not to overwrite anyting important.
• For visual purposes you may want to temporarily keep the original absolute call to the stylesheet.

• <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" <?php language_attributes(); ?>> <head profile="http://gmpg.org/xfn/11"> <meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset= <?php bloginfo('charset'); ?>" /> <title><?php bloginfo('name'); ? ><?php wp_title(); ?></title> <eta name="generator" content="WordPress <?php bloginfo('version'); ?>" /> <!-- leave this for stats please --> <style type="text/css" media="screen"> @import url( <?php bloginfo('stylesheet_url'); ?> )</style> <link rel="alternate" type="application/rss+xml" title="RSS 2.0" href="<?php bloginfo('rss2_url'); ?>" /> <link rel="alternate" type="text/xml" title="RSS .92" href="<?php bloginfo('rss_url'); ?>" /> <link rel="alternate" type="application/atom+xml" title="Atom 0.3" href="<?php bloginfo('atom_url'); ?>" /> <link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" /> <?php wp_get_archives ('type=monthly&format=link'); ?> <?php //comments_popup_script(); // off by default ?> <?php wp_head(); ?> </head>

• Sidebar: Replace everything from the beginning to the end of the sidebar div tags with the following…
  

  <div id="sidebar"> <ul> <?php /* Widgetized sidebar, if you have the plugin installed. */ if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar() ) : ?> <li><?php include (TEMPLATEPATH . '/searchform.php'); ?> </li><li> <?php /* If this is a 404 page */ if (is_404()) { ?> <?php /* If this is a category archive */ } elseif (is_category()) { ?> <p>You are currently browsing the archives for the <?php single_cat_title(''); ?> category.</p> <?php /* If this is a yearly archive */ } elseif (is_day()) { ?> <p>You are currently browsing the <a href="<?php bloginfo('home'); ?>/"> <?php echo bloginfo('name'); ?></a> weblog archives for the day <?php the_time('l, F jS, Y'); ?>.</p> <?php /* If this is a monthly archive */ } elseif (is_month()) { ?> <p>You are currently browsing the <a href="<?php bloginfo('home'); ?>/"> <?php echo bloginfo('name'); ?></a> weblog archives for <?php the_time('F, Y'); ?>.</p> <?php /* If this is a yearly archive */ } elseif (is_year()) { ?> <p>You are currently browsing the <a href="<?php bloginfo('home'); ?>/"> <?php echo bloginfo('name'); ?></a> weblog archives for the year <?php the_time('Y'); ?>.</p> <?php /* If this is a monthly archive */ } elseif (is_search()) { ?> <p>You have searched the < a href="<?php echo bloginfo('home'); ?>/"> <?php echo bloginfo('name'); ?></a> weblog archives for <strong>'<?php the_search_query(); ?>'</strong>. If you are unable to find anything in these search results, you can try one of these links.</p> <?php /* If this is a monthly archive */ } elseif (isset($_GET['paged']) && !empty($_GET['paged'])) { ?> <p>You are currently browsing the < a href=”<?php echo bloginfo(’home’); ?>/”> <?php echo bloginfo(’name’); ?></a> weblog archives.</p> <?php } ?> </li> <?php wp_list_pages(’title_li=<h2>Pages</h2>’ ); ?> <li><h2>Archives</h2> <ul> <?php wp_get_archives(’type=monthly’); ?> </ul> </li> <?php wp_list_categories(’show_count=1& title_li=<h2>Categories</h2>’); ?> <?php /* If this is the frontpage */ if ( is_home() || is_page() ) { ?> <?php wp_list_bookmarks(); ?> <li><h2>Meta</h2> <ul> <?php wp_register(); ?> <li><?php wp_loginout(); ?></li> <li><a href=”http://validator.w3.org/check/referer” t itle=”This page validates as XHTML 1.0 Transitional”> Valid <abbr title=”eXtensible HyperText Markup Language”>XHTML</abbr></a></li> <li><a href=”http://gmpg.org/xfn/”><abbr title=”XHTML Friends Network”>XFN</abbr></a></li> <li><a href=”http://wordpress.org/” title=”Powered by WordPress, state-of-the-art semantic personal publishing platform.”>WordPress</a></li> <?php wp_meta(); ?> </ul> </li> <?php } ?> <?php endif; ?> </ul> </div>

• Footer: Insert the following code into your footer section…
  

  <div id="footer"><!-- If you'd like to support WordPress, having the "powered by" link someone on your blog is the best way, it's our only promotion or advertising. --> <p> <?php bloginfo('name'); ?> is proudly powered by <a href="http://wordpress.org/">WordPress</a> <br /><a href="<?php bloginfo('rss2_url'); ?>">Entries (RSS)</a> and <a href="<?php bloginfo('comments_rss2_url'); ?> ">Comments (RSS)</a>. <!-- <?php echo get_num_queries(); ?> queries. <?php timer_stop(1); ?> seconds. --> </p> </div> </div><?php wp_footer(); ?>

• Index.php: Insert the loop
  

  <div id="content"> <!-- here comes the loop --> <?php if (have_posts()) : ?> <?php while (have_posts()) : the_post(); ?> <div class="post" id="post-<?php the_ID(); ?>"> <h2><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title(); ?>"><?php the_title(); ?></a></h2> <small><?php the_time('F jS, Y') ?> <!-- by <?php the_author() ?> --></small> <div class="entry"> <?php the_content('Read the rest of this entry »'); ?> </div> <p class="postmetadata">Posted in <?php the_category(', ') ?> | <?php edit_post_link('Edit', '', ' | '); ?> <?php comments_popup_link('No Comments »', '1 Comment »', '% Comments »'); ?></p> </div> <?php endwhile; ?> <div class="navigation"> <div class="alignleft"><?php next_posts_link ('« Previous Entries') ?></div> <div class="alignright"><?php previous_posts_link ('Next Entries »') ?></div> </div> <?php else : ?> <h2 class="center">Not Found</h2> <p class="center">Sorry, but you are looking for something that isn't here.</p> <?php include (TEMPLATEPATH . "/searchform.php"); ?> <?php endif; ?> <!-- the loop is closed --> </div>

Step 7 - Create Your Includes: Create 3 blank documents name them sidebar.php, footer.php, header.php and save them to your Wordpress Theme folder

• From the top of index.html file, cut all the code down to (but not including) the header comment tag and paste it into header.php In place of the code we just cut… insert the Wordpress Header Template tag.

  <?php get_header(); ?>

• Do the same for your footer code and replace it with

  <?php get_footer(); ?>

• Finally, do the same for the sidebar code and replace it with

  <?php get_sidebar(); ?>

Step 8 - Rename Your Index.html file to Index.php.

Step 9 - Copy function.php, search.php, comments.php and comments_popup.php from the Kubrick Theme directory and paste them into your dreamweaver / wordpress theme directory.

Step 10 - Follow this same process to create your single.php and whatever other template files you need like archive.php, page.php, category.php etc. For the most part you can just rename your index.php file and adjust the bits of code to match what is in the respective Kubrick files.

Step 11- Upload your theme directory to your test install, login into your admin panel > presentations and your new theme should appear… click it and view your site. Go test out your new theme… if everything seems to be working then it’s time to cleanup the CSS file.

Step 12 - Widgetize the sidebar: If you followed the directions properly your sidebar should already be widgetized. If it’s not, make sure you copied over the function.php file and the widget code is intact in the sidebar file. If you have further issues check out

That’s It you should be done and now your dreamweaver template should be functioning as a working Wordpress theme.

---

---