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


Design Premium CS4
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.


Dreamweaver CS4




Now What?


 Leave a comment

 Permalink

 Comments Feed



27 Responses to “Dreamweaver Templates into Wordpress Themes”

  • Benson Says:

    Thanks, Sammy! This is great. I’m sure quite a lot of us have been looking for exactly this. Cheers!

  • pwtgirl Says:

    Wow Great Tutorial!

    Thank you so much for putting this together. One question..

    After following step 12 do we need to add anything to the sidebar file to allow widgets? Or is step 12 all there is to widgetizing the sidebar?

  • Sammy Russo Says:

    Hey pwtgirl,

    sorry for the delayed response…

    no. if you copied the code from the default Kubrick theme from a 2.2 or above install, the widget code is already inplace.

    However, if you went ballistic and programmed your own sidebar then maybe.

    Look in your sidebar file for the following code:

    <?php /* Widgetized sidebar, if you have the plugin installed. */
    if ( !function_exists(‘dynamic_sidebar’) || !dynamic_sidebar() ) : ?>

    If this exists then your sidebar is widgetized. If not copy it and paste it right after the opening sidebar div tag. If your sidebar is all wrapped inside a

      then put it inside the

        tag. Most of my custom sidebars are wrapped in an unordered list.

        Cheers!

      • Wahoo Says:

        Thank you for sharing!

      • pwtgirl Says:

        Thank you so much for providing more details on the widgets. Your tutorial worked like a charm. Many Thanks!!

      • grooni Says:

        Thanks for this, it’s exactly what I wanted to do.
        However I’m stuck at step 9. I followed your instructions and uploaded all four php files and the stylesheet. When I got to presentation it says ‘Broken Theme’, Template is missing.

        What kind of template is this?

      • Sammy Russo Says:

        Grooni,

        send me a zip of your files and I’ll take a look at your code and see if I can figure out the problem.

        send it to me AT searchfriendlywebdesign DOT com

      • Sammy Russo Says:

        The fix for Grooni’s broken template was in the style sheet… something new that I was not aware of

        in step 2 change the few lines of the theme to look like this..

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

        */

        its the Template: that is needed. Funny, none of my themes has that line in it yet they all work and I’m running 2.3.3 across the board of my 30 installations that I manage.

      • Jason Says:

        I would like to use this method to re-create a news section on my website. I made a boring brochure type website using Dreamweaver. I don’t have a sidebar, or a footer. There’s just a body. the whole site was based on a template with one editable region right square in the middle. I think for these reasons above steps 4 and 6 are confusing to me. Do I add the code into my index.html anyway?

        I also didn’t use a CSS file on my entire site. Can my “style.css” be blank? Whats the bare minimum?

      • Jason Says:

        Sorry to be more specific this is where my confusion begins
        “Replace everything from the top of the file to the bottom of your closing head tag the following into your index.html page…”
        Which file are we editing? You previously ask us to open a bunch of files; (header, footer, index, sidebar, and style) The heading says “header”??

        I’m sorry but I’m confused. I’m new with this. Please pardon me but I would really be thankful for a more detailed explanation. Thanks.

      • Sammy Russo Says:

        Hi Jason,

        the files I said to open up are the header, footer, sidebar etc from the Default Kubrick theme so you can copy Wordpress Elements from the default theme.

        The copy part that confused you…
        copy everything from the top of the file

        < !DOCTYPE html PUBLIC "-//W3C//DTD
        XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

        down..to and including the closing head tag

        Hope this helps

      • Jason Says:

        Thank you very much!

        Your advice and a good night’s sleep cleared up the confusion for me. In the end I used your tutorial but with a simpler theme [olive-green-01]. Because my page was so simple this was a better platform to transform.

        There are still a lot of little style issues to sort out but this is really a great learning experience.

        Thanks again!

      • rita Says:

        Hi Sammy, thanks so much for this tutorial!

        for some reason i also got “broken themes” when i uploaded the files. i made template name same as theme name as you mentioned to grooni so must be something else i did incorrectly… may i please email you a zip of my files so you can take a look?

      • Sammy Russo Says:

        Hi Rita,

        Sure, email me a zip and I’ll take a look at it later this afternoon.

        send it to the email address on my contact page:
        http://searchfriendlywebdesign.com/contact/

      • Dreamweaver Template to Wordpress Theme Variation Says:

        [...] 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 [...]

      • Converting Dreamweaver Templates into Wordpress Themes « BlueTech IT Solutions || News, Tips and Tricks Says:

        [...] Copyright 2007, Sammy Russo Original article  can be found here: http://searchfriendlywebdesign.com/dreamweaver-templates-into-wordpress-themes/ [...]

      • Dreamweaver Template to Wordpress Theme Variation « BlueTech IT Solutions || News, Tips and Tricks Says:

        [...] 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 [...]

      • homemade beauty Says:

        I’m nervous about doing this, but about to try merging from Dreamweaver over to wordpress. This guide looks very helpful – so thank you!

      • Sammy Russo Says:

        It’s ok to e nervous. However if you follow the guides and make backup copies of your templates then there really is nothing to worry about.

        If you have questions, post them here and I’ll try and answer them the best I can.

        Good Luck

      • Little Nicky Says:

        Howdy folks!

        First off, thanks for the great tutorial, Sammy. I’m lovin’ it.

        I had the same broken template problem as rita and realized the issue is with the comment text in Step 2. The bottom line reads “Template:Version:General comments/License Statement if any.
        “. I deleted the first bit, “Template:”, from my comment, and after that, it worked like a charm.

        Just wanted to share if anyone else is having the same issue.

        Cheers.

      • Virginia from Tips to lose weight fast Says:

        Thank you, this tutorial is very useful especially for programming dummies like myslef :)

      • Quick House Sales Says:

        Good guide – would have never thought this was possible. Great for those who want to have a go at making a theme for themselves.

      • Web Design Preston Says:

        A great article. I’ve always found that striping out the default theme is a great way to start getting to know wordpress. In theory it’s only a couple of .php files which actually make a theme.

      • Sammy Russo Says:

        You are absolutely right. When I first started working with Wordpress… I would morph the default theme into looking like the main site we were trying to match. It wasn’t very long until I was creating my own custom Wordpress themes from scratch.

        In reality a Wordpress theme simply needs 2 files to be a working theme.. the index.php and style.css. The header, footer and sidebar files are optional.

      • Web Design Preston Says:

        Yeah I know, I’ve been tempted to start looking into frameworks but I can really see the benefit of them as yet.

      • Sammy Russo Says:

        I think the only framework worth looking into is Thesis.

        However, I have to say that I am NOT a fan of frameworks.. at all. Yes I use thesis a little bit for the simplicity. The reason being, everything is handled by PHP and the more calls the more load on the server, slower load times, etc.

        I think navigation structures that are fairly static can and should be coded in straight xhtml… not an unordered list assembled by PHP.

      • Sonia Trevor Says:

        This tutorial really helps me on learning more new things regarding Wordpress especially in converting a Dreamweaver template into a Wordpress. I will give this guide to my team so that they can work on immediately with our templates. Thanks.

        Sonia Trevor
        Consultant for Naples web design

      Leave a Reply