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.

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

If you are looking for an easy to use and understandable CSS Drop Menu tutorial you might want to keep reading. For the longest time I’ve always strayed customers away from using navigational drop menus for a couple of reasons; largely because they were not search engine friendly and very fickle if not programmed properly.  My biggest reason actually dealt with usability, I’ve always been a believer that you should never hide content from a web user.

But, when a customer really wants a particular feature, I’m always willing to make them happy. The implementation I found and like is mostly based on CSS with very little Java Scripting, and is cross browser compatible. This technique has been around for a while but brand new to me…. it’s called Son of Suckerfish. I tried it’s predecessor Suckerfish Drop Menus but found Son of Suckerfish way cleaner and easier to use. I did try a few others but the only tutorials I had any success with are the ones mentioned here.

Do you have a favorite search engine friendly CSS drop menu implementation? If so share it here.

Thanks for reading.

Google +1 is a new product that was launched March 2011 in Beta to select users. Now it is out of Beta and you will find ads for it within Adsense and other places on the web.

Google +1 is Google’s version of Facebook’s Like button. It allows the sharing of recommendations with online connections and it’s all integrated into Google search results. Check out the video:

Click here to view the embedded video.

Google Adsense prompted me to add a Plus 1 button to my websites. Set up is easy, only two small code snippets need to be pasted into the site template file(s). There is also a WordPress Plugin for Google Plus 1, but hopefully a newer version which, makes installation simpler, will be introduced.

Search Goolge Plus 1 and you will likely end up on the consumer end of things where you can join the experiment and start sharing your recommendations.

Is this going to be another Buzz kill? Tell us what you think?

Before you start building out your CMS site with WordPress you should give some thought to the pages you need to create and how those pages need to be organized.

In step 12 of the Development Process we created two pages (Home and Blog). For the sake of this explanation let’s say we want to also create 3 different service pages, an about, and a contact page.  Pretty straight forward, we go to Page > Add Page and create away. But how do these pages need to be organized?

Page Attributes

In the WP Page Editor screen, under the Publish Box on the right side there should be a Page Attributes box.  For most of the pages that we want to create we’d leave these toggles alone.

I would however use the Parent Attribute for the service pages. For our demo we are creating 3 service pages;  1 main services page and 2 sub pages.. 1 for each service.  We would make the main services page the parent to the sub pages.  To do this, first create the main service page and publish it.  Next, create the sub pages, but before you publish them,  toggle the Page Parent and select the main service page from the list.

Our website hierarchy would look something like this…

• Homepage
• About Page
• Main Service Pg
  • Sub Service Page
  • Sub Service Page
• Blog Page
• Contact Page

Better Organization

Planning  and organizing all your pages ahead of time and how they will relate as parents and children will help keep things running smooth. Plan even farther by sculpting your page slugs and you’ll really be in good shape.  The more you create, change, move and delete stuff to get it right by doing things on the fly, the bigger a mess you are creating in the database.  Organizing in advance keeps the system and the database from having to work too hard.  Clogged up databases eventually lead to slower page load times, php memory errors and lost visitors.

I get asked quite often what’s  is the difference between WordPress Pages and Worpress Posts.

The main difference is pages are static and posts are dynamic. Another way I like to say this is, pages are stationary and posts have legs. What this really means is that pages are meant for long term content that should be regularly accessible where posts are mobile.

Yes a WP Page can still have some mobility with the use of social media buttons but pages aren’t thrust out into the blog-o-sphere quite like a post.

WordPress posts have legs, simply because they are pushed out to the internet so people can consume it. Posts get their mobility via Ping O Matic and RSS Feeds which aid in pushing the content out to social platforms like Facebook, Twitter, Stumble Upon etc. This content gets consumed, interacted with and hopefully shared with others.

Another way to look at WP Pages Vs WP Posts is to regard pages as making up the nuts and bolts of your website; your homepage, your about, contact and products or services pages. WP blog posts are your PA system to send your content out onto the net with updates, important dates, articles, product releases, business news, etc.

Hope this post helps clarify the difference between WordPress Pages and Posts and how they are used. If you have questions or need help with your WordPress CMS, contact us our day job.. Click Refresh.

One of the steps in the WordPress installation process is creating the wp-config file. Once you download the file package from WordPress.org you need to unzip the package and extract the files to your hard drive. The package will be contained inside a worpress folder. Directly inside that wordpress folder is a file named wp-config-sample.php, open that file in your favorite text editor. Yes you have to make some changes to the code but they are very easy to make.

In a previous video tutorial, Creating A MySQL Database in cPanel, we created the Database Name, Database User and Database Password. We need to add those credentials to the Sample Config file. Look at the screenshot below and you should be able to correlate the three items ( db name, db user, password ) that need to be input.. if not post a comment and I’ll try and walk you through it.

The one tricky item in the wp-config file is the DB_Host line from the above screenshot. Different hosting companies have different protocols due to the way their servers are configured. If you are using a hosting platform that uses cPanel or Plesk the DB_Host will almost always be ‘localhost’ like it is in the screenshot. If you are hosting at GoDaddy you will have to use a path that leads to your hosting account… localhost will not work. I believe you will have to get database location from the db panel inside the hosting control panel.

Finally there are the Authentication Unique Keys and Salts. Simply go to the WordPress Salts API Page, copy the codes that were dynamically generated and paste them over the top of the place holder keys in the wp-config file.

That’s all you have to update, now click file > save as > and rename the file to wp-config.php. Make sure you save back in inside the WordPress folder you downloaded.

If you work with WordPress long enough you are bound to run into a fatal error from time to time.  These sometimes pop up when there is a plugin conflict. That means there is a plugin that doesn’t play nice another plugin.  I came across this very thing recently while when I was working with my favorite shopping cart plugin one day, I installed, activated it and added a few products. When I went to preview things I was given a Fatal Error message.

To find the conflict you have to go through the process of elimination.  First, deactivate all plugins. In this case I reactivated my shopping cart plugin firsty and made sure it was working stand alone.  Now to find the plugin that wasn’t playing nice with the cart , I, one by one  reactivate each plugin and tested the site after each activation.  I did this until I got to WordPress Maintenance Mode where the error re-occurred… I just found my conflict.

I got lucky in this case with Cart66, the site I was working on only had 5 plugins running so it was rather easy to find the conflict. Typically, most of my WordPress sites have 15 or more plugins running.

Hope this just made somebodies day a little bit easier, good luck and happy blogging!

Part 1 in a series of 2 video tutorials..  an introduction to the WordPress WYSIWYG Content Editor Toolbar.  The tools are pretty much self explanatory but not all minds think and operate alike. This video introduction to the WordPress WYSIWYG content editor covers the first row of tools and introduces the kitchen sink button which opens a second row to the editor / toolbar.

I hope this WordPress video tutorial isn’t too dry. If you have comments or questions, please post them below.

Click here to view the embedded video.

Yet another media uploading tutorial for WordPress. Hope you enjoy… and please leave an comments or questions below. Thanks for visiting.

Click here to view the embedded video.

Another tutorial from my WordPress Beginners Series… uploading images and other media to WordPress and adding them into your pages and posts.

Click here to view the embedded video.