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 alexmansfield.com, 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.

This theme is barely usable, but I’m tired of using someone else’s theme, so I figured I’d upload it. I built it on top of my Sanitary WordPress theme this afternoon. It really has no features at all, and I’m not super excited about it, but at least my blog doesn’t look exactly the same as 30,000 other blogs now. I’m sure it will evolve over time.

Have any comments or suggestions regarding the design? Comment below!

I am a web designer and developer and this is my personal experiment. There are so many blogs floating around with instructions on creating a successful blog. I plan to test their theories and write about what happens. I will share the steps I’m taking, why I’m taking them, and how it turns out.

I want this to be a helpful place. Please ask questions (as soon as I create a contact form). I’d love to help you find the answer. On the other hand, if you have a successful blog of your own, I’d love to hear how you did it.

That’s all for tonight. More to come tomorrow…