The tools for your muse

Tim mentions many great tools to get your muse up and running. At Tonka Park we use many of this such as wordpress, wufoo, skype, google adwords and analytics and more that he doesn't mention. I feel that we have a good handle on these tools and have made them work for different projects.

So that brings us to a new service from Tonka Park. Test, Rollout and Automation.

Test, Rollout and Automation

4 hour work week introduces many of the concepts but not all readers are going to be familiar or even comfortable with these tools. Perhaps you have already outsourced your life and you have another muse but you don't want to go through the test, rollout and automation process by yourself. This is where Tonka Park will step in.

Outsource your muse

If you have a great business product idea and don't have the time or desire to work on websites, contact forms, pay-per-click advertising or online shopping carts, then you need to contact us today, hello@tonkapark.com or fill out the form on on our homepage.

Find out more about our plans to help you test, rollout and automate your muse.

The old site homepage

The New Landing page

Part of the redesign was to improve the landing page of tonkapark.com to better address new clients. Some of the information previously was hidden in sub pages. Additionally, with my new focus on internet marketing and development I wanted the content to connect with those areas.

Internet Marketing

The Lake of the Ozark small businesses could use some help in the area of search engine marketing and optimization. Many businesses have websites but often are poorly maintained. So I want Tonka Park to position itself to help these businesses generate new online traffic and improve their online presence. To coincide with this move I have begun new websites to begin driving new traffic to Tonka Park as well as keep my experience up to date with the latest in affiliate marketing. Check out camdentonwebdesign.com and fallasleepquick.com to see some of the work I am doing in this area.

Website Uplifts

Another area that I will be looking to take advantage of is quick website uplifts for small businesses trying to take existing content to the next level without too much cost in the design. A website uplift could be where a client or myself selects a template from a site like themeforest.net and I implement it either as a static html site or integrated with WordPress. This helps keep out the cost of hiring a designer and a PSD slicing company.

E-Commerce

Recently much of my traffic is centered around several e-commerce solutions. For the front page I wanted to draw attention to the e-commerce services I offer to businesses in Lake of the Ozarks and around the country. Many of the visitors to my site are investigating Etsy, Big Cartel and Spree for e-commerce solutions for small businesses. I hope that by bringing that to the front page potential clients will see the services I offer in regards to consulting on e-commerce implementations.

The Tonka Park Blog

The blog is no longer featured on the front page with the most recent posts. I wanted to put just a small separation from the business information to the posts. The blog sees some much needed visual improvements as well as new wordpress plugins installed. I worked with several base wordpress themes to get a good typography implementation. Much better than the previous site. I hope this helps encourage my readers to return. Another new addition to the blog is the use of the Sociable plugin to allow posts to be shared via a variety of social applications such as twitter and facebook. And to help readers find other related posts I have installed the yet another related posts plugin for wordpress. I hope these two things help out my visitors and improve their experience at the Tonka Park blog.

Enjoy the new look and please if you have any questions or projects that you would like help with please do not hesitate to email us at hello@tonkapark.com.

Remote Git Setup

Using a shared host, such as dreamhost you can easily setup a remote git repository that we can use later with Capistrano deployment.

ssh username@yourcheaphost.com
mkdir -p ~/git/yourproject.git
cd ~/git/yourproject.git
git --bare init

Local Git Setup

mkdir yourproject
cd yourproject
git init
git remote add origin ssh://username@yourcheaphost.com/~/git/yourproject.git
touch .gitignore
git add .
git commit -m "Initial Commit"
git push origin master

At this point you have now pushed to your remote repository and are almost good to go. The last thing is you need to add the following on your local machine to .git/config in your project.

[branch "master"]
remote = origin
merge = refs/heads/master

Local WordPress setup

Most likely you don't need help with the local setup but I will share my setup.

In the same directory we setup our local git repository I extract the wordpress files.

- yourproject
-- wordpress
--- wp-admin
--- wp-content
--- wp-includes

Once you have extracted the current version of wordpress then I add the plugins and themes to the wp-content folder that I will be using in this project. At this time I will commit the changes and push them to the remote repository.

git commit -m "wordpress"
git push origin master

Depending on the secrecy/control needed you can use a gitignore file to skip the wp-config.php file if you want to keep passwords out of the repository. I will leave that up to you, I don't address how to handle that in this guide.

With your wordpress website ready to go you can now begin to worry about how to deploy your code to the production server with ease. This is where Capistrano comes in.

Capistrano Setup

I have used Capistrano with some rails projects and it works well. Capistrano was built to work with Rails projects. So there are some tricks to get it working when deploying PHP or other non Rails projects.

cd yourproject
capify .

This creates two files, yourproject/Capfile and yourproject/config/deploy.rb.

The next thing I found was a great gem on github that built out Capistrano has a railsless resource. Check out the repository, http://github.com/leehambley/railsless-deploy/

gem install railsless-deploy

Once you have the gem installed you want to open up the Capfile and edit the contents.

load 'deploy' if respond_to?(:namespace) # cap2 differentiator
# Dir['vendor/plugins/*/recipes/*.rb'].each { |plugin| load(plugin) }

require 'rubygems'
require 'railsless-deploy'
load    'config/deploy'

Then comes time to edit the deploy.rb file with your specific setup. Again much of this was extracted from other sources like Railstips.

default_run_options[:pty] = true

# be sure to change these
set :user, 'username'
set :domain, 'yourdomain.com'
set :application, 'yourapp'
set :wordpress_dir, 'wordpress'

# the rest should be good
set :repository,  "#{user}@#{domain}:git/#{application}.git"
set :deploy_to, "/home/#{user}/#{domain}"
set :deploy_via, :remote_cache
set :scm, 'git'
set :branch, 'master'
set :git_shallow_clone, 1
set :scm_verbose, true
set :use_sudo, false

server domain, :app, :web
role :db, domain, :primary => true

That is a basic portion of the deploy.rb file that works even with rails projects. For a wordpress project or other PHP source projects we need to make a few changes. I have added the wordpress_dir option for the cases when you deploy wordpress outside of the root directory. For me I usually install into a folder called blog. This will be needed for the next portion of the deploy.rb file.

In WordPress you have the wp-content/uploads directory which usually holds post photos and other media uploaded through the admin interface. We don't want these to be lost each time we deploy the latest revision of the website so we need to create symlinks.

Here are the changes needed to make sure deployment of wordpress is handled correctly. Add these in the deploy.rb file below the previous code block.

set :app_symlinks, ["wp-content/uploads"]
before  'deploy:update_code', 'wordpress:symlinks:setup'
after   'deploy:symlink', 'wordpress:symlinks:update'

namespace :wordpress do
  namespace :symlinks do
    desc "Setup application symlinks in the public"
    task :setup, :roles => [:web] do
      if app_symlinks
        app_symlinks.each { |link| run "mkdir -p #{shared_path}/public/#{wordpress_dir}/#{link}" }
      end
    end

    desc "Link public directories to shared location."
    task :update, :roles => [:web] do
      if app_symlinks
        app_symlinks.each { |link| run "ln -nfs #{shared_path}/public/#{wordpress_dir}/#{link} #{current_path}/public/#{wordpress_dir}/#{link}" }
      end
      send(run_method, "rm -f #{current_path}/public/#{wordpress_dir}/wp-config.php")
      send(run_method, "ln -nfs #{shared_path}/public/#{wordpress_dir}/wp-config.php #{current_path}/public/#{wordpress_dir}/wp-config.php")
    end
  end
end

Painfully extracted this logic from http://madebymany.co.uk/using-capistrano-with-php-specifically-wordpress-0087. Wish the formatting was better on his site.

Setting up your server

At this point you need to make sure you server is ready to find the files. Capistrano will be looking to deploy symlinks to current/public. On Dreamhost you need to change the root of your server /home/username/yourdomain.com/current/public. This is the same setup when using a Passenger run Rails site. Once created then make sure to remove the current directory before attempting to deploy.

Deploy your application

Now that everything is ready you should be able to deploy the application.

cap deploy:setup

The setup should have created 2 new folders, shared and releases, in your domain directory on the remote host. If not check the output for any error messages. Once completed you are now ready to deploy your wordpress website.

cap deploy

At this point you should have a new Revision folder in your releases folder and the Current folder should be linked to that folder. Try opening your domain and see if you get to the wordpress site.

WordPress Tips

If you deployed outside of the root you might need to make sure to copy the wordpress/index.php file to the root directory. If your database isn't setup then try using the yourdomain.com/wordpress/wp-admin to get to the install wizard.

Good Luck setting up your next WordPress project using Capistrano and git to make deployments even easier.

Creating a theme

A big part of the redesign with wordpress is simply creating a custom theme. There are hundreds of howto's when it comes to wordpress theme development, I will not attempt to go into details here.

The key points in the theme development are creating individual page templates. This can be done by creating files with the name format of page-templatename.php.

<?php
/*
Template Name: GrowthHome
*/
?>

A page template can then be assigned when creating a new page in wordpress. This allows the Portfolio page to look different than the services page or the about page. I am actually using a Page template for my blog index page instead of the index.php default page.

Different Sinlge Page by Category

Another trick many developers are using with wordpress is to add a conditional statement to the single.php file in the theme. This file then selects a custom named file of your liking to display.

<?php
$post = $wp_query->post;
if ( in_category('29') ) {
include(TEMPLATEPATH . '/single-portfolio.php');
} else {
include(TEMPLATEPATH . '/single-blog.php');
}
?>

This simple block allows my portfolio item posts to be displayed completely different than my individual blog posts. A handy trick indeed when working with WordPress as a CMS.

Short Urls

Something new I added to the site was a feature that several other websites now have and is becoming more common due to services like twitter. Many of the times when using twitter you have to shorten a url to fit your character limit. I have used bit.ly for url shortening but I don't like having to use a third party domain to mask the actual endpoint when my domain is the one in question. I want to build name recognition and have trust in my links. So rather than using a plugin or a fancy solution to create my short urls and use hashes I took a simple approach that I believe to be pratical and elegant.

I changed the WordPress permalink structure from the previous /%year%/%month%/%postname%/ to /%post_id%/%postname%/. This change required no coding on my part, the previous links continued to redirect to the new structure and I get my short urls by cutting off the postname. I am not sure if there are any flaws to this approach yet but my existing links on twitter, my new links and my short urls all work. Using the All in One SEO plugin each of my pages is given a canonical link tag in the head section so the search engines will be able to index the full url even if the short url is used to link to my pages.

Giving WordPress its Own Directory

Finally to have the root of my website clear of all the wordpress php files I left the wordpress install in a folder (/blog) and followed the easy steps to copy the htaccess and index.php to the root so that you can have the front page outside of the wordpress directory. The steps are on the wordpress codex pages and linked from within the WordPress Admin General Options

So those are the basic steps I took to setup wordpress to take over control of my website. I am sure there are plenty more steps I can take but for what I need this works.

So I took a few days of identifying the key traits of websites that I liked and just started tinkering with ideas. Let me discuss the individual pages and then the technology involved

The Home Page

The front page is where the greatest difference will be seen by those of you who have previously made a visit. I have moved from a single page for the company minus the blog, to a multi-page format. I still like the idea of a single page format that uses the vertical scrolling and divides content in sections. One current example of this done well is over at the website for the new Shaun Inman project Fever. At this time I chose to go another direction to work on featuring the portfolio work and also the blog posts.

The front index page is fully driven by wordpress using the tips on the wordpress site. This allows me to include my blog posts and portfolio and also use widgets for the additional content if I so choose.

In regards to the actual css and design. I toyed with lots of color, thinking I needed to brighten up the website to maybe capture potential client's attention. However, after 3 different color pallettes, picked out over at COLOURlovers.com I ended up back with the blacks, greys and the touch of green pulled from the tree in the Tonka Park logo. The bold black bar across the front was the statement that I think needed to be made. It highlights the portfolio selection and the key welcome phrase that I have included.

Overall I think the home page has a better presence than before.

The Portfolio

The previous tonkapark.com only displayed the small block images with the name of the client and then underneath some text and a small link to either jump to the site or to pop a lightbox image link. This new incarnation brings the portfolio to life; Color screenshots, multiple images and individual pages for each project. Right from the front page the portfolio is displaying the most recent 4 projects. This should help grab potential clients attention if they want to view work rather than read text about services.

I am sure to see some more customization on the individual portfolio pages but I am happy with how it works for now.

The Blog

The blog probably saw some of the least amount of redesign. In general the layout is the same. The biggest differences are that the blog index now only shows excerpts of the 10 most recent posts rather than the full posts. This allows new visitors to get a good idea of the content without too much scrolling. An idea supported by popular rails blogger John Nunemaker on his blawgtips site.

The other major change is the sidebar. I simplified it a bit having a single column and loosing the pages and categories links. I think it flows well and brings more clarity to the page.

Within the individual posts I have added a new link for a shorter url hyperlink. I will write about this in a separate post on how I used simple solution to get short urls in wordpress rather than a robust service or plugin. Keep an eye out for that post tomorrow.

The Copywriting

Writing and putting words together is not something I see myself being terribly adept at most days. I went through several revisions, and probably should have gone through several more. But the words can always change as we move forward. Picking out the right words to sell my company on the home page, portfolio and services pages was difficult for me. I am still struggling to define myself and my company.

Normally I would want to leave copywriting to someone more creative with words than myself, but at this point in the lifecycle of creating a new one man company I am not yet able to spend money on a creative talent such as Tiffani Jones over at Second & Park. I came across her new venture with her fiancé Matt Brown. I think I will keep her info though as she might be a valuable resource when it comes time to truly invest into a project that requires great copy. (For the record Matt Brown designs great looking websites.)

The Technology

To the nuts and bolts of the redesign. One of the main goals was to move the company portion of the website over to wordpress to allow for some more robust management of files and content throughout the site. This was fairly simple and nothing ground breaking. WordPress has built in features that handle this rather easily. I will save this for a follow-up post on WordPress setup.

Conclusion

The redesign wasn't groundbreaking and only took a few days of time. Being as a design/developer is always there own most difficult client I tried to let the small things go so that I could finish the design. I will always be unhappy with certain aspects, that is the perfectionist in me. For instance I think the comments styling needs some work but I will get there when I start receiving comments. Ultimately, I hurried to make sure I get the portfolio out there as I have recently made some contacts that I want to be able to see more details than I previously had available. Also I should be releasing a private application to a small group of users that will ultimately see my website.

I hope you enjoy the new look and that everything works out for you.