It’s been a few years since I first launched sackclothstudios.com (my business site) and it was beginning to show it’s age. The newest post on the blog was over a year old and the site just needed a little love. I figured while I was at it, I might as well document the process.

Planning

I knew that I wanted something at least a little more unique. My previous design was nice enough, but it wasn’t really that different from any number of other sites floating around cyberspace. One of the first design elements I settled on was a bottom aligned header. Rather than place my logo and navigation at the top of the page, I would fix it to the bottom of the browser window. It seems to work well in all browsers except embedded Safari.

The other thing I knew I wanted to change was the blog. Since I started localhost/alexmansfield, I didn’t have much use for the Sackcloth Studios blog. So with the new site design, the blog is replaced by my portfolio. I might add a more traditional blog again in the future, but for the moment I think the portfolio will be just fine. I only had a couple posts on the old blog that got many links, so I re-published them here and redirected the old pages here.

Design

I already mentioned the bottom aligned header. After that I decided to make extensive use of the @font-face css property. I chose to use the Museo font by Jos Buivenga, which I had already used sparingly in my first design. Next I decided to use a small background image in the lower right hand corner. As I started to build the site, I realized I didn’t need a sidebar. This left more room for the background image even at smaller screen sizes. The footer was also unnecessary. Finally, I found a nicely drawn Magic Marker icon set with more icons than I could ever dream of using. Part way through the design process I changed the background color from white to light gray, which really helped give the site the look I was going for.

Development

When I first started building the theme, I planned on using the new custom post types feature for the portfolio. However, the more I worked with it, the more I realized that old fashioned categories were the best tool for the job. For the portfolio posts, I decided to display the screenshots by looping through all the images associated with the post. That makes adding an image as simple as can be. I can just go to the post, upload an image, and it will automatically show up on the page. However, this became a problem when I decided to use thumbnails on the portfolio category page. If I uploaded a thumbnail, it would automatically show up on the post page, even if I didn’t want it to be displayed there. To solve this problem, I used this handy little piece of code.

$attachments = get_posts($args);
if ($attachments) {<br />   foreach ($attachments as $attachment) {
      if ($attachment->ID != get_post_thumbnail_id()){
         $image = get_image_by_id($attachment->ID);
         echo '<img src="' . $image->src . '" alt="'. $image->alt . '">';
      }
   }
}

As it’s looping through the images, it checks to make sure it’s not the thumbnail image before displaying it. Problem solved! The last little touch was adding support for custom background images. My face is on the home page, but I really didn’t want it on every page, so I added a custom field where I could specify the location of an image to be used for individual posts.

Plugins

Gravity Forms
– http://gravityforms.com

I decided to use the Gravity Forms plugin to handle the contact form. It was a snap to set up and it does everything I could ask for (and probably quite a bit more).

Limit Login Attempts
– http://devel.kostdoktorn.se/limit-login-attempts/
– http://wordpress.org/extend/plugins/limit-login-attempts/

This simply limits the number of failed login attempts that can happen before blocking a user. This prevents trial and error attempts at compromising the login.

Google Analytics for WordPress
– http://yoast.com/wordpress/google-analytics/
– http://wordpress.org/extend/plugins/google-analytics-for-wordpress/

A great plugin from Joost de Valk that handles everything imaginable relating to Google Analytics and WordPress.

W3 Total Cache
– http://www.w3-edge.com/wordpress-plugins/w3-total-cache
– http://wordpress.org/extend/plugins/w3-total-cache/

Simply the best caching plugin I’ve come across so far.

Implementation

I didn’t do too much out of the ordinary here. I had a few posts that I wanted to keep for future reference, but I didn’t want to publish theme here, so I tried using the PDF24 Article To PDF plugin to create PDF documents of the posts. It worked great, but it left out all the code blocks, so I ended up backing them up manually. I thought about using the Development Theme Test plugin to test the new theme on the old WordPress installation, but in the end I decided to just start from scratch. So from there all I had to do was install WordPress (3.0 RC) in a subdirectory (see Installing WordPress in a Subdirectory), upload the theme, add content, and set the new installation to take over for the old one.

If you have any questions about the process, feel free to contact me or post a comment below.