Wednesday, July 29th, 2009

Redesigning with WordPress

So I just finished redesigning tonkapark.com using wordpress as my CMS. I was already running my blog with wordpress so it was only a matter of extending a few theme pages and a few settings in wordpress. Let me share those steps here in case they can help someone else.

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.

Share and Enjoy:
  • Twitter
  • Facebook
  • StumbleUpon
  • Google Bookmarks
  • del.icio.us
  • Digg
  • LinkedIn
  • Technorati

Comments are closed.