Ok, we know page speed is important because fast sites equal happy users. And from my last post we know how to run a test for page speed. But the big question remains is how does one go about optimizing their site using the feedback from the speed tests?

I’m glad you asked!

From the page speed tests you’ll see a number of different criteria with some suggestions. Here are the 3 most common suggestions you’ll see.

GZIP Compression:

One of the most common suggestions is GZIP Compression. This one sounds technical but its actually pretty easy. First you have to make sure that your server is configured to run GZIP compression. You can find out by using this gzip test. If the response comes back no.. then you need to contact your hosting company and ask them if they can enable it by compiling mod_deflate in apache.

Once gzip compression is enabled on the server you’ll need to initiate it by modifying your .htaccess file. You can add your handler a couple of different ways.

# compress all text & html:
AddOutputFilterByType DEFLATE text/html text/plain text/xml

Or

#compress certain file types by extension:
<Files *.html>SetOutputFilter DEFLATE</Files>

Apache doesn’t make it easy to include multiple types. You can force it by having multiple sections, one for each extension. The “proper” way uses “FilesMatch” to match files by a regular expression and would look something like this (if you wanted to compress html, php,txt, css, js, gif, jpg & png)

# compress html, php,txt, css, js, gif, jpg & png:
<FilesMatch "\.(php|html|txt|css|js|gif|jpg)$">
SetOutputFilter DEFLATE
</FilesMatch>
# END Compression


For a better and more complete explanation on how GZIP Compression works as well as another explanation on how to implement gzip compression check out this great article.

Just by adding gzip compression to this website, I decreased the load time by more than 50%.

Compiling Stylesheets and Remove Excess Whitespace.

If you have multiple stylesheets then a good practice is to compile all of the css files into one single css file. Just copy and paste the code from each stylesheet into the compiled one. And be sure to comment the beginning and end each sheet section. Once compiled you may want to go through and clean up excess whites pace. In the old days css code was formatted like this…

body {
font-size: 62.5%; /* Resets 1em to 10px */
font-family: 'Lucida Grande', Verdana, Arial, Sans-Serif;
background: #d5d6d7 url('images/kubrickbgcolor.jpg');
color: #333;
text-align: center;
}
#page {
background-color: white;
border: 1px solid #959596;
text-align: left;
}
#header {
background: #73a0c5 url('images/kubrickheader.jpg') no-repeat bottom center;
}

This code could be tightened up quite a bit and would look something like this…

body {font-size: 62.5%; /* Resets 1em to 10px */ font-family: 'Lucida Grande', Verdana, Arial, Sans-Serif; background: #d5d6d7 url('images/kubrickbgcolor.jpg'); color: #333; text-align: center; }
#page { background-color: white; border: 1px solid #959596; text-align: left; }
#header { background: #73a0c5 url('images/kubrickheader.jpg') no-repeat bottom center; }

By cleaning up the whitespace of the theme stylesheet on Search Friendly Web Design, I reduced the file from over 500 lines to under 80 lines and shaved a few milliseconds off my page speed.

Compiling JavaScript Files and Move Them Down Under

The last common optimization technique is to compile JavaScript files in the same manner as we just did with the CSS files. Once you’ve compiled your several JS files into one, move the JS call from the header down to the footer.

By optimizing your site in these 3 ways you will reduce the total number of http requests and at the same time compress those few files to produce optimum page speed.

Page loading speeds are important to websites, especially now that page speed is part of the Google search algorithm. To analyze the page speed or load time of your website, here are 3 free and easy ways to analyze your websites page speed.

WebsiteOptimization.com

The tool I’ve been using for more than 6 years is the WebsiteOptimization.com page speed analysis tool.  Simply enter the url of the site you want to analyze. You’ll get a diagnosis or output of object size totals, external objects, page objects, download times and recommendations to help speed up your websites load time

Google Webmaster Tools

If you have an account with Google Webmaster Tools you can find a Performance Overiew which details how fast your site is.  And you’ll also find a list of HTML suggestions to help increase load speeds. To find this data, login to your GWT account and under the Labs drop menu you’ll find a link to Site Performance. If you don’t have a webmaster tools set it.. you should go check it ASAP.

FireBug for Firefox

FireBug is a plugin for FireFox Browser. The way I’ve always set it up was install FireBug then install Google Page Speed which installs into FireBug.  Once installed, open the page you want to analyze and then click the little bug in the lower right corner of your FireFox browser. Look under Page Speed > Performance Tab then click the analyze button to receive and output of your score out 100 and suggestions on how to fix or speed up your page load times.

There you have it, 3 simple ways to analyze your website page speed and get recommendations on how to clean things up and speed up your sites load time.

Next Step Speed Optimization

Now that we have our page speed analysis and suggestions it’s time to get our hands dirty with a little bit of Web Page Speed Optimization.

Some good stuff on creating rounded corners with css for your website.  Check out http://www.roundedcornr.com.

Use the RoundedCornr engine to generate the images and CSS code for…

1. Basic Rounded Corners
2. Rounded Corners with a Gradient
3. Rounded Corners with a Border
4. Single Rounded Corner Image

And here are a couple of great tutorials on rounded corners with CSS.

http://kalsey.com/2003/07/rounded_corners_in_css/

http://www.cssjuice.com/25-rounded-corners-techniques-with-css/

Enjoy

I just finished a successful week at the Search Engine Strategies Conference in San Jose. While traveling home to Southern California on the Amtrak train.. I had some to reflect on what on what I took away from the conference. The hot topic was social media and social networking.

Social Media Break Down

Social media is a user centric platform that connects people around the globe for the purposes of sharing and discussing information.

Social media can be broken down into several different categories.. each with it’s own unique purposes applications.

• Social News: Blogs, Podcasts, Livecasts
• Social Sharing: You Tube Videos and Flickr Photos
• Social Networks (personal & professional): Face Book, Linked In
• Social Bookmarks: Digg, Deliciou
• Social Micro Blogging: Twitter

Social Media & Search Engine Marketing

Define your audience.
Defining your audience is the most important step in any marketing campaign.. don’t just jump in headfirst and start publishing before figuring out who your readers are, because the audience will dictate what you publish and how you do it. Your audience can be broken down in the following ways.

• Creators
• Commenters
• Critics
• Spectators
• Inactives

Social Media / Networking Tips

• When publishing content to a social network only post to relevant communities
• The more you engage, the more people will engage with your content.
• Keep engagement authentic
• Create high quality content to make it link worthy
• Social media needs to integrate with your online marketing

Social Media Optimization

• Pick a username that has a connection with your business or product
• Tag and name videos & images with keywords
• Link your social profiles from your main website
• Set up your profiles and optimize them with rich keyword content

Getting Started

• Sign up for the various social accounts to claim your name space
• Start by publishing to one platform and beta test

Social Networking & Link Building
Social networking is about engaging a community. To engage a community you need to have good content that is inviting and useful. Social networking is a great way to garner releavant inbound links to your website, blog etc.. but don’t go in with the thinking that social networking is going to replace your link building stratgy.. links are a by-product of social media. Social communities will notice the transparency of your linking and oust you for it.

The other night I popped into the WordPress Support Forum to see if I could help solve anyone’s issues. One thread I responded to had to deal with someones site not being indexed properly by Google, plus Webmaster Tools was stating the site urls are restricted by robots.txt… but the site didn’t have a robots.txt.

I had seen this very issue with a couple of other websites / blogs that I run. In almost every case I had initially blocked search engines via the settings > privacy > I would like to block search engines, but allow normal visitors because the site(s) were in development. Once the sites were ready I would switch the privacy setting to allow search engines but for some reason Goolge would still think that robots were blocked.

If this happens to you there are two ways to go about things…

The passive approach is this.. you can do nothing. If you post or publish often (a couple of times a week) and you have the Google XML Sitemap Plugin installed on your WordPress site then it might take a few weeks for Google to hash things out… but things should work out on there own.

The proactive approach is go back to your privacy settings toggle it block engines again, update.. settings then switch it back to allow engines and update settings. Next, in a text editor like Notepad create a new file called robots.txt and save to your website root folder (same directory as wp-config.php). In the file paste the following….

User-agent: *
Disallow:

Upload the file to the server and re-submit your XML sitemap via Google Webmaster Tools Interface. What we just did was override the robots exclude / restriction and tell all the engines that the entire site is open to be crawled.

Hope this is useful to

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.

One of my clients decided that we they needed to start tracking certain goals or conversions on the website via Google Analytics. So I set up the the allotted conversion goals / funnels, but I needed more.

According to Google Analytics documentation or Help Center, they say that if you need to more than four goal conversions… set up additional profiles. So I did.. I took the snippet of java script code (we’re using the Legacy Tracking Code – urchin.js) and pasted it along side the other script. I waited a couple of days and noticed that the second profile wasn’t collecting data.

Troubleshooting Round 1
So I started examining the code snippets… I noticed they were out of sequential order according to the user account # associated with this site profile ex.. _uacct = “UA-8XXXX2-3″;. So I put them in sequential order and all of a sudden the second profile started registering data… sweet I figured out.

My code looked something like this…

A few days later, colleague and friend, Search Master Jamie Low called me and said Google Analytics stopped tracking our account. What happened was once I switched the code around it activated the second profile but deactivated the first.

Troubleshooting Round 2
I’ll admit.. I’m terrible with javascript.. I can install them but have no idea what any of the code means.. but I have worked with them so I should have used a little more common sense. First I fixed the issue by removing the call to the second profile. But I still had find the solution to track both.

Unfortunately, I couldn’t find the answer on Google anywhere so I sat an pondered the code for a little while. All of sudden I started thinking back to the validation and calendar scripts I install on client forms and how those calls to scripts are structured. I had it all wrong I needed to combine the two scripts into one.. not use two separate ones so it would like this…

After double checking things this afternoon it appears that both sites are now tracking data. I will post a follow up in a few days with final results to let you know how its going and if I really fixed it.

Dreamweaver is my primary web development tool… I use it for writing code and for FTP. There are a lot of folks out there who swear up and down that Dreamweaver FTP is aweful. Personally I love it and I’ve never, ever had an issue.

Here it goes

Step 1: Backup everything; download all files via FTP and backup all database tables with either a plugin or via PHP My Admin. Even though you may only be running a basic security upgrade back up everything… even the database. To keep things organized I generally create a zip of my WordPress backups and move it over to my external hard drive.

Step 2: Download the latest version of WordPress. Unzip the archive into the default WordPress folder and place it the associated website folder on your local machine.

Step 3: Upload the WordPress folder to the proper directory on your web server via FTP.

Step 4: Delete the appropriate files fromt the server:

1. Delete /wp-admin/ folder.
2. Delete /wp-includes/ folder. Note: You must backup /wp-includes/languages/ directory if exists.
3. Delete all the wordpress files in the root directory where the index.php file is found EXCEPT!… DO NOT DELETE - wp-config.php
- .HTACCESS (if it exists)
- Fantastico files (if they exist)
- sitemap.xml (if it exists)

and any other files located in the website root that DONOT come packaged with a WordPress Installation.
Step 5: Restore files from the lastest version.

1. Move the wp-admin & wp-includes directories and all other WP files out of the WordPress folder and into the root of the appropriate directory.
2. If existed, restore /wp-includes/languages/ directory

Step 6: Run the upgrade script http://yoursite.com/wp-admin/upgrade.php
Step 7: Test your site and make sure it’s in tact! Success!!

Step 8:Dowload all files on the server to your local machine to ensure everthing has the proper relative path.

Step 9: Go get a fresh cup of coffee – you’re done!

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.

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

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

Backups are so important, yet one might not appreciate them until you something catastrophic happens and you actually need one. I currently administer several Word Press Blogs (this being one of them) and working on launching another here very soon… I found it very educational to actually go through the entire backup and restoring process of one my blog sites.

Fortunately for me I have a development blog that is password protected and strictly for the use of a web team that I work with. We use it to post design samples, project lists and assign tasks to the individuals involved. So we decided that being the WebDev blog is not live so to speak that we do a practice run of restoring it from backup files so we know the process if anything crashed on one of our live sites.

DO NOT TRY THIS AT HOME KIDS! First we backed everything up and then deleted everything… all the files on the server and the entire database. Using the backup files we restored the entire blog inside of hour. Below is our documented backup and restore process…

The Backup Process

1. Download the entire file directory via FTP (File Transfer Protocol). If you want a good FTP program try FileZilla it’s freaking fast. I generally archive my FTP files on an external hard drive on a regular basis.
2. Database backup: You can back it manually via PHP My Admin or use the Backup plugin that comes pre-installed with Word Press.
   • From the Word Press Admin Panel click Manage > Backup. (requires that you active the backup plugin first)
   • Choose your backup option (I tend to download to my computer) and click the “Backup Button” on the right. It might be good practice to run it a second time and save it the server.

Restoring Word Press

In the event that you need to completely restore / resurrect WordPress (both the files and the database).. the process is pretty simple.

1. Upload via FTP the entire WordPress directory of files. DO NOT run the install file via the browser.
2. Login to PhPMyAdmin via the webhost control panel.
3. Select the database for the blog. If we have to recreate the database then it must have the same database name, login name and password as the original database. Once the database is selected, click browse… find the database backup file (ends in .sql) and click go. You should see a Import Successful if all went well. If there is an error refer to the Word Press.org Support Forum.
4. You should be done at this point and your WordPress blog back on online

When To Run Backups:

I backup my Word Press databases at least once a weekly… it really depends on how much is being posted or added to the database. If have a ton of traffic, posts, and comments then you might consider backing up the database a couple times a week.

A complete backup of the file directory should be done monthly as routine maintenance especially if you have several admins who constantly tweak stuff.

A full backup should happen…

• Before upgrading to the latest stable release of WordPress.
• Before we make any substantial changes to the file directories ie adding plugins, updating templates, modifying CSS.

Hopefully you will never have to restore your blog from backups but in the event you do… it shouldn’t take more than hour at least if you use Word Press. Anyhow.. it doesn’t make a difference what platform you use.. run back up regularly so you don’t lose vital information.