Dreamweaver Templates into WordPress Themes

This tutorial explains how to convert a Dreamweaver Template to a WordPress Theme.

Note: It helps if you are familiar with Dreamweaver Templates, HTML and CSS. If you think this tutorial is beyond your skill level, we can convert your Dreamweaver Template into a WordPress Theme.

Let’s Get Started

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 to remove all the extra Dreamweaver Template mark up.

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 > PHP ThemeFiles

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 NAME HERE
Theme URI: http://www.yourwebsite.com/
Description: Simple descriotion
Version: 1.0
Author: Sammy Russo
Author URI: http://Click-Refresh.com/
*/

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.

Header.PHP File Code from a WordPress Theme

  • 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.

4 Responses to “Dreamweaver Templates into WordPress Themes”

  1. Ernie says:

    Thank you for this tutorial. I have been looking all around and could not find one with clear instructions. I will give it a try very soon. Your instructions seem straightforward but by any chance have you created any tutorial videos for this? Thanks.

  2. Sammy Russo says:

    Sorry I have not created any video tutorials. It’s something I’ve been wanting to do for some time now, but I’ve been way to busy.

  3. Andrea says:

    Does this work with the new Twenty Twelve theme? I can’t find a Kubrick theme to use with WordPress.org.

  4. Sammy Russo says:

    Hi Andrea,

    Not as seamlessly as it does with Kubrick. I wrote this tutorial a long time ago when Kubrick was the default theme for WordPress.

    You can download a zip of the default Kubrick theme here.

Post Comments, Questions and Feedback